I've got multiple forms on my page. In one form I've got 3 text fields a check box and a button. When the tab key is pressed, it goes to the 3 text fields and then to the checkbox and then no where.
How can I focus the button (submit) after the checkbox (maths) and then back to the first text field (user_id).
<form id="form13">
User ID :<input type="text" id="user_id" /><br>
Password: <input type="password" id="password" /><br>
Department: <input type="text" id="department" /><br>
<input type="checkbox" id="maths" value="on"> Maths
<input type="submit" id="submit" value="Submit" />
</form>
$('#maths').keydown(function(e){
if (e.which == 9){
$('#submit).focus();
}
});
If your need is to handle Tabbing in your HTML forms. Then you may need to handle this with HTML attribute tabindex this is a good article for learning purpose:
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
So, you can handle it in your way. And yes, you can also change it dynamically by using Javascript:
document.getElementById("foo").tabIndex = "3";
I hope it may help you.
You should organize your form in such a way that it can be navigated using the keyboard only.
For example, have a look at this form:
Accessible Signup form
Manually setting the tabindex may lead to problematic behavior. There are couple of good article why you should not do it:
Using the tabindex attribute
Don’t Use Tabindex Greater than 0
Be aware when manually setting a tabindex as suggested, this will affect natural flow of tab index in form and document. Use this only when you are absolutely sure about it.
You can organize your form in such a way that keyboard navigation of your form works without you using tabindex.
Have a look at following Pen : Form field focus, you'll see that from checkbox, the focus goes directly to submit button and back :
<form id="form13">
<label for="asdfg-user_id" id="user_id-ariaLabel">
User ID: <input type="text" id="asdfg-user_id" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Password: <input type="password" id="password" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Department: <input type="text" id="department" />
</label>
<br>
<fieldset id="interestInfo">
<legend>Subject </legend>
<div>
<div id="interests"></div>
<div>
<div class="row">
<input id="chk_Subject_1_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label>
</span>
</div>
<div class="row">
<input id="chk_Subject_2_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label>
</span>
</div>
</div>
</div>
</fieldset>
<input type="submit" id="submit" value="Submit" />
</form>
Related
I want to prompt the end-user to select/check mandatory radio buttons that haven’t been selected before submitting an online form.
Currently when I click the submit button, it highlights the empty fields but bypasses the mandatory unchecked radio buttons and submits the form once the empty fields have been filled. Is there a way to make sure that the user checks/selects the mandatory radio buttons before submitting the form? See code snippet below:
<form name="onlinepensionform" action=" submit " onsubmit="return checkforblank()" method="post">
1. Do you require a Centrelink or Veterans' Affairs Schedule?
<input type="radio" name="RequiresCentrelinkOrVeteransAffairSchedule" value="Yes">
<label for="RequiresCentrelinkOrVeteransAffairSchedule">Yes</label>
<input type="radio" name="RequiresCentrelinkOrVeteransAffairSchedule" value="No">
<label for="RequiresCentrelinkOrVeteransAffairSchedule">No</label>
2. Please confirm your identity using one of the below Government issued identification.
<label for="IdentityType">Australian driver's licence number:</label> <input name="IdentityValue" type="text" id="IdentityValue" value="" />
<label for="IdentityType">State of Issue:</label> <input name="IdentityValue" type="text" id="IdentityValue" value="" />
<input type="submit" value="Submit Form">
https://jsfiddle.net/ugeshgupta000/8kdn9L9e/2/
<form name="onlinepensionform" action="submit" method="post">
<div>
<p>1. Do you require a Centrelink or Veterans' Affairs Schedule?</p>
<input type="radio" required name="RequiresCentrelinkOrVeteransAffairSchedule" value="Yes">
<label for="RequiresCentrelinkOrVeteransAffairSchedule">Yes</label>
<input type="radio" required name="RequiresCentrelinkOrVeteransAffairSchedule" value="No">
<label for="RequiresCentrelinkOrVeteransAffairSchedule">No</label>
</div>
<div class="additionalInfo">
<p>2. Please confirm your identity using one of the below Government issued identification.</p>
<label for="IdentityValue">Australian driver's licence number:</label>
<input name="IdentityValue" type="text" id="IdentityValue" value="" required />
<br />
<label for="IdentityType">State of Issue:</label>
<input name="IdentityType" type="text" id="IdentityType" value="" required />
</div>
<div>
<input type="submit" value="Submit Form">
</div>
</form>
JS:
$('input[name="RequiresCentrelinkOrVeteransAffairSchedule"]').change(function(){
var val = $(this).val();
if(val=='Yes') {
$('.additionalInfo').find('input').attr('required','required');
$('.additionalInfo').show();
} else if(val=='No'){
$('.additionalInfo').find('input').removeAttr('required');
$('.additionalInfo').hide();
}
});
I am creating a contact form, I have two inputs, of type="checkbox"; the first one is email, and is already checked, but I want to uncheck this, in the event that the user picks the "Phone" option, and show the phone input in which to enter the phone number.
Here's the code:
at JS Fiddle
I hope you guys can help me, I'm still a js newbie but I have learnt a lot.
HTML
Name *:
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox">
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
Javascript
$('#ChatContainer').hide();
$('.NoDisplayed').hide();
$('#ChatToggle').click(function(){
$('#ChatContainer').toggle('slow');
});
Thank you.
I'd suggest associating your 'preferred contact' choices together, using radio-inputs (since 'preferred' is an exclusive choice to make, whereas 'acceptable' might include all possible options), giving:
<label for="">Best form to contact</label>
<div>
<p>Email:</p>
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
<p>Phone:</p>
<input type="radio" name="contact" value="phone" />
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>
Which would work with the following jQuery:
$('input[type="radio"][name="contact"]').on('change', function(){
$('#phonecheck').toggle(this.value === 'phone');
});
JS Fiddle demo.
It's worth also noting that your HTML is somewhat problematic; your <label> elements weren't associated with any (let alone 'specific') form-elements; you were using a <label> simply to provide a form's section-name (for which the <legend> attribute should be used, within a <fieldset> grouping). That said, I've corrected your HTML and moved the phone-number entry box outside of the <div> that was containing the checkbox (and now contains a radio-input), to reduce the jarring effect of the <form> suddenly being displaced. There's still a bit of a jump, but not quite so profound.
Here's the amended HTML, which still works with the above jQuery:
<div id="ContactForm">
<div id="ChatToggle">
<p>Contact Us</p>
</div>
<div id="ChatContainer">
<form action="">
<label>Name <span>*</span>:
<input type="text" placeholder="Your Name (Required)" />
</label>
<label>Email <span>*</span>:
<input type="email" placeholder="Email (Required)" />
</label>
<label>Got a question? <span>*</span>:
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
</label>
<fieldset>
<legend>Best form to contact</legend>
<div>
<label>Email:
<input type="radio" name="contact" value="email" id="email2" checked="checked" />
</label>
</div>
<div>
<label>Phone:
<input type="radio" name="contact" value="phone" />
</label>
</div>
<input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</fieldset>
<div class="SendButton"> Send
</div>
</form>
</div>
</div>
JS Fiddle demo.
References:
CSS:
Attribute-equals (attribute="value") selector.
HTML Elements:
<fieldset>.
<label>.
<legend>.
<input />.
jQuery:
on().
toggle().
Try this code:
var $checkPhone = $('#checkPhone');
var $checkMail = $('#checkMail');
var $phonecheck = $('#phonecheck');
$checkPhone.change(function(data) {
$checkMail.attr("checked", false);
if (this.checked) {
$phonecheck.show();
}
else {
$phonecheck.hide();
}
});
$checkMail.change(function(data) {
$checkPhone.attr("checked", false);
$phonecheck.hide();
});
remove the class NoDisplayed form the phone element and repelace it by style="display: none;"
http://jsfiddle.net/dL36kccw/8/
Addition:
Doing such stuff with jQuery is not the easiest. You often end up in placing some DOM manipulations in several places which makes the code less maintainable (like the $phonecheck.hide(); in this case.
I can strongly recommend to take a look into Knockout or some other UI framework. A good list of frameworks + examples can be found on todoMVC. I think Knockout is the best for many cases. Backbone is very competitive, too. But in the end you need to find one that reflects your needs and style.
Edit: Fixed the bug with unchecking the pohne.
You just need to handle the change event of the phone checkbox:
$("#chkPhone").on("change", function () {
$("#email2").prop("checked", !($(this).is(":checked")));
});
http://jsfiddle.net/dL36kccw/5/
// I have just added id (id -->"phone" to checkbox for corresponding phone number text box and added style="display:none;" to phone number text
<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">
<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>
<div>
<p>Phone: </p>
<input type="checkbox" id="phone">
<input type="text" placeholder="Give us your phone" id="phonecheck" style="display:none;">
</div>
<div class="SendButton">
Send
</div>
</form>
</div>
</div>
// please try this script
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#phone').click(function(){
if($('#phone').is(':checked'))
{
$('#phonecheck').show();
}
else
{
$('#phonecheck').hide();
}
});
</script>
Okay here is my issue. I am using custom graphics for my submit/reset form buttons, but as soon as you press reset the form action is committed and I do not want that to happen and I have been searching the internet for a answer without any luck. I am including the form code as well in hopes as I might of just missed something.
<form class="contact" name="con_form" action="../includes/mailer.php">
First Name*: <input type="text" name="first_name" value="" /><br />
Last Name*: <input type="text name="last_name" value="" /><br />
Contact Number*: (<input type="text" name="area_code" value="" size="3" />) <input type="text" name="first_three" value="" size="3" /> <input type="text" name="last_four" value="" size="4" /><br />
Email Address*: <input type="text" name="email" value="" /><br />
I would like to*:
<select>
<option>--- Select One ---</option>
<option>Comment</option>
<option>Suggestion</option>
<option>Inquiry for employment</option>
</select><br />
Comment or Suggestion: <textarea size="1024"></textarea><br /><br />
<input type="image" src="images/sub_idle.gif" onsubmit="../index.php" alt="Submit" /> <input type="image" onclick="this.form.reset()" src="images/res_idle.gif" alt="Reset" />
</form>
input type="image" defines the image as a submit button. If you just want it to be a clickable image that triggers some javascript, there's no need to make it an input at all.
the <input type="image" input is actually a submit button
I would try this as a starting point: (not the best way probably)
<img onclick="this.form.reset();" src="images/res_idle.gif" alt="Reset" />
Don't use input type=image, use an A-tag with a CSS background.
.buttonImage {
background-image:url(/images/sub_idle.gif);
height:20px;
width:60px;
display:block
}
You can change the type to "button" and apply a css class to the button to customize the button.
<input type="button" onclick="this.form.reset()" class="resetbutton" />
I have the following on a page as well as other forms but this, or any of the others, simply do not submit using the Enter key whereas they do in Firefox - I am at a loss to understand why? I put the hidden submit in there to make it work with firefox.
I am using onclick as the submit button graphic is in a class with background sprite image.
Is there a way to make this happen?
<form action="/userlogin.html" method=post name="LOGform"><h1>Member Sign In</h1>
<fieldset id="inputs">
<div class="form_row">
<div class="form_row_name"><label>Email</label></div>
<div class="form_row_input"><input id="username" type="username" name="username" value="" style="width:60%;" placeholder="Your Email Address"></div>
</div>
<div class="form_row">
<div class="form_row_name"><label>Password</label></div>
<div class="form_row_input"><input id="password" type="password" name="password" value='' style="width:60%;" placeholder="Your Account Password"></div>
</fieldset>
<fieldset id="actions">
<div><div style="float:left; width:35%">
<a onclick="document.forms['LOGform'].submit(); return false;" class="button" href="javascript:;">Sign In</a></div>
<input type="submit" style="display:none"/>
<input type="hidden" name="LOGON" value="logon">
<input type="hidden" name="from" value="">
</fieldset>
</form>
If you want to use an image for your submit button you could just use an image input type instead of a submit button, ie:
<input type="image" src="/mybuttonGraphic.gif" />
This will work on hitting enter across browsers.
I have two forms in one page and i would like to validate each form separately DEPENDING on what the user fills. So basically the user must fill only ONE form and NOT both of them...SO basically if the user fills up form number 1, the validation will be on form 1 ONLY..
Below please find the code of both forms:
<form action="/registration.flow" method="post" id="formElem1" name="formElem1" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
<form action="/registration.flow" method="post" id="formElem2" name="formElem2" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
Can someone help me please?
You don't need jQuery specifically to do this. Simple javascript is fine. Call a separate function for the onSubmit of each form.
onSubmit="return validateForm1(this);"
and -
onSubmit="return validateForm2(this);"
Make sure you return true or false depending on if the form passed or failed the validation.
I recommend you the jquery validator . It's easy to use and you can do the two validations separately.