I wish to disable a button in HTML on the condition that required fields are empty. The code given below is of the form in which the button is there:
<form>
Name*: <input type="text" size="20" name="name" /> <br /><br /> Surname: <input type="text" size="20" name="sur_name" /> <br />
<br /><br /> Mobile number: <input type="tel" size="15" name="mob" /> <br /><br /> E-mail id*: <input type="Email" size="30" name="user_id" /> <br /><br /> Password*: <input type="Password" size="30" name="pw1" /> <br /><br /> Confirm Password*: <input
type="password" size="30" name="pw2" /> <br /><br /><br /><br /> I accept the terms and conditions <input type="checkbox" name="t&c" /><br /><br />
<input type="submit" class="btn btn-lg btn-primary" value="Sign up now" onclick=window.location.href="https://www.google.co.in/signup" />
</form>
The form is actually a dummy sign up screen, yet the screen redirected is a 404 error screen, but I want the button to be disabled if certain fields are empty, and that it reloads the page if the two values for password are different.
I don't know JS completely, so please edit the code so that the parameters are clear.
Replace <input type="text" size="20" name="name" /> with <input type="text" size="20" name="name" required/>
Replace <input type="Email" size="30" name="user_id" /> with <input type="Email" size="30" name="user_id" required/>
Replace <input type="Password" size="30" name="pw1" /> with <input type="Password" size="30" name="pw1" required/>
Replace <input type="password" size="30" name="pw2" /> with <input type="password" size="30" name="pw2" required/>
Related
I'm trying to change the value of the submit button, only after required fields are filled. but as per my below code the value is changing even the required fields are not filled, additionally I'm need advice on how to mark at least one checkbox field as required.
$('#formSubmit').click(function(){
$(this).val("Processing");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
You can listen to submit event instead:
$(document).ready(function(e) {
$('#myForm').on('submit', function(e){
e.preventDefault();
$('#formSubmit').val("Processing");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>
$(document).ready(function(e) {
function validateForm() {
var isValid = true;
$('input[required]').each(function() {
if ( $(this).val() === '' ){
isValid = false;
}
});
return isValid;
}
$('#formSubmit').click(function(){
if(validateForm()) {
$(this).val("Processing");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>
I'm adding my solution since nobody seems to answer the second part of the question. You need to modify your markup a little as done below in the answer.
function makeChecks() {
checkBoxes = $("input:checked"); //Find checked checkboxes
if (checkBoxes.length) { //Only submit if some checked checkbox(es) exist
$('#exampleForm').find('input').each(function() {
if ($(this).prop('required') && $(this).val() !== "") {
$("#formSubmit").val("Processing");
}
});
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="exampleForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" onclick="makeChecks()" value="Submit" />
</form>
</body>
Id must be unique. Unique id must be assigned to each checkbox. Add required attribute to the checkbox controls.
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="callMe" value="CAll Me" required>
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="emailMe" value="Email Me" required>
</label>
You can use $(elem).val() != '' to check if a input element has been entered.
For checkbox, you can use $(elem).prop('checked') to check if a checkbox has been checked.
$(document).ready(function(e) {
$('#formSubmit').click(function(e){
if((!$('#callMe').prop('checked') || !$('#emailMe').prop('checked')) && $('#formName').val() != '' && $('#formEmail').val() != '' && $('#formMobile').val() != '')
$(this).val("Processing");
});
});
https://jsfiddle.net/snehansh/nwh0vct8/3/
the required attribute don't seem to work for Company and Phone. It is just working for Name and Email. Can anybody help me with this?
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
</form>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" pattern="[1-9]{1}[0-9]{9}" placeholder="Phone" title="Enter 10 digit mobile number"required />
<input type="submit" value="continue" />
</form>
The problem is with
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
Try to include a submit button in the form.
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>
I have the following form:
<form method="post" autocomplete="on">
<input type="text" placeholder="Site" name="Site" autocomplete="on" />
<input type="text" placeholder="User" name="User" id="second" autocomplete="on" />
<input type="password" placeholder="Pass" name="Pass" id="fourth" autocomplete="on" />
<input type="text" placeholder="Station" name="Station" id="third" autocomplete="on" />
<button>login</button>
</form>
The browser remembers user and password, but not site and station.
Is there a way to force the browser to remember ALL values?
I have created a layout for a html form. HTML Layout
Now when error occurs i want to fill color between the rounded part that i have shown. Is it possible? If not then is there any other way to do so using JavaScript??
Any kind of help is appreciated.!
Thank You
</div>
<form class="form">
<input type="text" placeholder="Name" class="textbox" />
<input type='text' placeholder='Employee Number' class='textbox' />
<input type="email" placeholder="Email Address" class="textbox" />
<input type="password" placeholder="Password" class="textbox" />
<input type="password" placeholder="Confirm Password" class="textbox" />
<input type="button" value="Register" class="button" />
</form>
</div>
I think you need to add extra elements to your form. Wrap the inputs in a div and add an arrow. Like this:
<div>
<form class="form">
<div class="input-wrapper">
<div class="triangle"></div>
<input type="text" placeholder="Name" class="textbox" />
</div>
<input type='text' placeholder='Employee Number' class='textbox' />
<input type="email" placeholder="Email Address" class="textbox" />
<input type="password" placeholder="Password" class="textbox" />
<input type="password" placeholder="Confirm Password" class="textbox" />
<input type="button" value="Register" class="button" />
</form>
</div>
.triangle should be positioned absolute and .wrapper relative.
http://jsfiddle.net/d492173y/2/
I'm building a large form that will compile tour schedules of our clients (comedians). Seen here.
Whenever I delete the larger textarea at the bottom, the form stops work, ie. the submit button doesn't do anything.
Anyone why that might be happening? Thanks.
I don't know exactly what would be helpful, but here's the code for the div containing the form:
<div class="info-avails">
<form action="http://www.standupexperts.com/cgi-sys/formmail.pl" method="post" name="hgmailer" >
<input type="hidden" name="recipient" value="adam#standupexperts.com">
<input type="hidden" name="subject" value="FormMail E-Mail">
<p> Name:<span style="color:white">X-</span> <input type="text" name="name" size="20" value="">
<span style="color:white">X.X</span>Email: <input type="text" name="email" size="30" value=""><br />
Cell #: <span style="color:white">X.</span><input type="text" name="cell" size="20" value="">
Address:<span style="color:white">X</span><input type="text" name="address" size="30" value=""><br />
Website: <input type="text" name="website" size="20" value="">
Video Link:<input type="text" name="videolink" size="30" value=""><br />
<!-- Tell us about your event. <br /> <textarea name="comment" cols="40" rows="6"></textarea> <br /> -->
</p>
<div class="avails-method">
<h3>
Our avails method
</h3>
If you cannot use the form below, you can email your schedule. Use our notation system if you want your avails entered sooner.
<a href="http://www.mediafire.com/file/wqyo8tpwq536048/2013_Comedy_Caravan_Avails_Sheet.doc">
Download</a> our 2013 avails sheet.
<br /><br />
For routing purposes, we want to know the dates you are NOT available and what state you'll be on those dates. <br /><br />
Below, <em>an X is already placed on open/available weeks</em>. For booked dates, please enter days booked and the state.
Example:<ul>
<li>12-3: X (open)</li>
<li>12-10: X 11-14 NC (open except the 10th thru 14th of Dec in NC)</li>
<li>12-17: 19 OH, 22 IN (open except for the 19th of Dec in OH and the 22nd in IN)</li>
<li>We are unable to work with <em>just</em> the day of the week (3/11: Thurs-Sun)</li>
</ul>
</div>
<br class="clear" />
<h4>
2013 Avails/Schedule
</h4>
<div class="year2013">
<div class="jan-apr">
1/07: <input type="text" name="1/07__" size="20" value="X"><br />
1/14: <input type="text" name="1/14__" size="20" value="X"><br />
1/21: <input type="text" name="1/21__" size="20" value="X"><br />
1/28: <input type="text" name="1/28__" size="20" value="X"><br />
2/04: <input type="text" name="2/04__" size="20" value="X"><br />
2/11: <input type="text" name="2/11__" size="20" value="X"><br />
2/18: <input type="text" name="2/18__" size="20" value="X"><br />
2/25: <input type="text" name="2/25__" size="20" value="X"><br />
3/04: <input type="text" name="3/04__" size="20" value="X"><br />
3/11: <input type="text" name="3/11__" size="20" value="X"><br />
3/18: <input type="text" name="3/18__" size="20" value="X"><br />
3/25: <input type="text" name="3/25__" size="20" value="X"><br />
4/01: <input type="text" name="4/01__" size="20" value="X"><br />
4/08: <input type="text" name="4/08__" size="20" value="X"><br />
4/15: <input type="text" name="4/15__" size="20" value="X"><br />
4/22: <input type="text" name="4/22__" size="20" value="X"><br />
4/29: <input type="text" name="4/29__" size="20" value="X"><br />
</div>
<div class="may-aug">
5/06: <input type="text" name="5/06__" size="20" value="X"><br />
5/13: <input type="text" name="5/13__" size="20" value="X"><br />
5/20: <input type="text" name="5/20__" size="20" value="X"><br />
5/27: <input type="text" name="5/27__" size="20" value="X"><br />
6/03: <input type="text" name="6/03__" size="20" value="X"><br />
6/10: <input type="text" name="6/10__" size="20" value="X"><br />
6/17: <input type="text" name="6/17__" size="20" value="X"><br />
6/24: <input type="text" name="6/24__" size="20" value="X"><br />
7/01: <input type="text" name="7/01__" size="20" value="X"><br />
7/08: <input type="text" name="7/08__" size="20" value="X"><br />
7/15: <input type="text" name="7/15__" size="20" value="X"><br />
7/22: <input type="text" name="7/22__" size="20" value="X"><br />
7/29: <input type="text" name="7/29__" size="20" value="X"><br />
8/05: <input type="text" name="8/05__" size="20" value="X"><br />
8/12: <input type="text" name="8/12__" size="20" value="X"><br />
8/19: <input type="text" name="8/19__" size="20" value="X"><br />
8/26: <input type="text" name="8/26__" size="20" value="X"><br />
</div>
<div class="sept-dec">
9/02: <input type="text" name="9/02__" size="20" value="X"><br />
9/09: <input type="text" name="9/09__" size="20" value="X"><br />
9/16: <input type="text" name="9/16__" size="20" value="X"><br />
9/23: <input type="text" name="9/23__" size="20" value="X"><br />
9/30: <input type="text" name="9/30__" size="20" value="X"><br />
10/07: <input type="text" name="10/07__" size="19" value="X"><br />
10/14: <input type="text" name="10/14__" size="19" value="X"><br />
10/21: <input type="text" name="10/21__" size="19" value="X"><br />
10/28: <input type="text" name="10/28__" size="19" value="X"><br />
11/04: <input type="text" name="11/04__" size="19" value="X"><br />
11/11: <input type="text" name="11/11__" size="19" value="X"><br />
11/18: <input type="text" name="11/18__" size="19" value="X"><br />
11/25: <input type="text" name="11/25__" size="19" value="X"><br />
12/02: <input type="text" name="12/02__" size="19" value="X"><br />
12/09: <input type="text" name="12/09__" size="19" value="X"><br />
12/16: <input type="text" name="12/16__" size="19" value="X"><br />
12/23: <input type="text" name="12/23__" size="19" value="X"><br />
NYE:<span style="color:white">..</span> <input type="text" name="NYE__" size="19" value="X"><br />
</div>
</div><br class="clear" />
<div class="commentsection">
Anything else you want to add?<br />
<textarea name="comment" cols="50" rows="6"></textarea>
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
<input type="hidden" name="redirect" value="http://www.standupexperts.com">
</div>
</form>
</div>
else if (/\S+/.test(document.hgmailer.comment.value) == false)
alert ("Your email content is needed.");
If you remove the textarea from the form, document.hgmailer.comment no longer exists, and therefore its .value causes an error. So, if you want to delete the textarea, you must also delete this check from your JavaScript.
It is possible that the formmail.pl expects a comment field without which the submission fails validation and is ignored.
Now ideally you would modify the formmail.pl to make this comment field optional. You can also remove the text area and replace it with a <input type="hidden" name="comment" value="" /> field, that will include an empty comment field with every submission.
###Somewhat off-topic###
On the surface this setup does not look very secure to me. Without adequate security, this form could end up being abused by spammers. The main issues are that the target email address is sent from a hidden variable which spammers can easily modify. The subject as well as the contents are also coming from the form. Unless the formmail.pl has some anti-spam measures, and those are configured correctly, you would do well to either add the security or use a different script.
Never mind that, I checked and it only emails local addresses so very little chance of spam.
In the html above, if you change the submit button <input> from button to submit.it wouldn't halt.also try this in firebug or chrome element inspector.
change
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
to
<input type="submit" value="SUBMIT" onclick="hgsubmit();" >
also edit javascript to prevent twice server requestion.let the html mark up do the stuff.