<form>
<input tabindex="1" required>
<input tabindex="2" required>
<input>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input tabindex="5" required>
<button type="button" tabindex="6"></button>
<button type="submit" tabindex="7"></button>
</form>
Here I have a form with some input fields and two button at the end of the form... and I am using tabindex attribute to focus them in order... now on tab key down I need to focus the first input field with tabindex="1" after release focus from the submit button as like as the form focus input field of tabindex="3" after releasing focus from input field of tabindex="2"... How can I do that...??
please don't use any jQuery... only javascript or html...
Black Cobra's answer works, unless you're using your id attributes for something (which I was). It's easy enough to edit his code to work for anyone though:
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
</button>
</form>
I just changed this:
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
to this:
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
It's not dynamic, but it's really easy. If you want dynamic, see here.
Finally, I have solved my problem... with HTML and a little javascript it can be done easily... means loop focus of input fields inside a form...
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
</button>
</form>
Here I skip the tabindex="1" and start with tabindex="2"... then I add 2 more attribute in the submit button... onFocus & onBlur... moreover, I am using the id attribute to memory the primary or real tabindex number of the submit button... when the user will focus on the submit button, javascript will change its tabindex from 8 to 1... now if the user hit the tab button the form will try to find out the element that have the next tabindex... means the first input field... again, when the focus will leave the submit button, javascript will retrieve its real tabindex from its id... means the tabindex will be changed from 1 to 8... in this way the focus will keep looping inside the form...
Live Demo
Related
I have a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.
I have an HTML form that has a submit button. I want this button to be disabled when it is clicked. But I also want the form to get submitted.
I am not using ajax request to submit the form. The PHP script that handles the form takes a long time. So some users just click it after a few seconds and the form gets submitted twice which leads to two rows with the same data in the database.
Here's what I tried so far
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" onclick="$(this).attr('disabled', true);" value="Submit" />
</form>
The onclick event on submit button disables the button but it also don't let the form to be submitted. But I want the form to be submitted and also want the button to be disabled.
You May try the below code
onclick="this.disabled=true;this.form.submit();this.value='Submiting...';"
If you're using jQuery, then here's a fully-jQuery, unobtrusively handled version which would work.
If you were to give your form an ID, you could make it handle that form specifically - this example will handle all forms on your page.
$(function() {
$("form").submit(function(event) {
$(this).find('input[type="submit"]').prop("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="xyz.php">
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="text" name="fields[]" />
<input type="submit" value="Submit" />
</form>
Note that you should use .prop() rather than .attr() to set properties such as "disabled"
(see http://api.jquery.com/attr/).
I have 2 forms. I want when button is clicked to show another form on first form position. So just to replace that form.
Form 1
<div id="right">
<form id="contact" class="visible" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</form>
</div>
Form 2
<div id="form2">
<form id="contact2" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</div>
jQuery
$("#contact-submit").on("click", function() {
$("#contact").removeClass("visible");
$("#form2").addClass("visible");
});
So for some reason this is not working. Please help me to solve this. I tried to set opacity:0; of first form but it doesn't work. And please let me know which libary is should use.
Here is my example: http://codepen.io/anon/pen/PzKaPa
EDIT: So I looked at your pen and fixed it so it works: http://codepen.io/anon/pen/OXjEQd
It looks like you'll need to do a couple of things, one of which you might have already: first, place your jquery in a ready function (and make sure you've linked a jquery version in your head tag)--
$(function(){
// your code
});
Then, in your click handler, add a preventDefault():
$('#contact-submit').on('click',function(e){
e.preventDefault();
// rest of code
});
e.preventDefault() keeps your submit button from doing it's default action--submitting the form. This lets you perform other actions with the button. If you don't include this, the very first thing that will happen when your button is clicked is form submission, and you'll not get to any of the other code inside your click event.
This also assumes you have a .visible class defined in your css. If not, you'll need to add that as well, or instead of using addClass and removeClass, you'll need to change the display property on the form directly:
$('#contact').css('display','none');
$('#form2').css('display','block');
Unless you have defined the class visible somewhere else (and have set the CSS defaults for your forms to be hiddne, adding or removing it will have no effect.
Instead, I'd recommend you directly change the display property of the two:
$("#form2").css("display", "none"); // so it's initially invisible
$("#contact-submit").on("click", function() {
$("#contact").css("display", "none");
$("#form2").css("display", "");
});
This will directly alter the style attribute on each element, causing them to hide or show. Using css("display", "") will remove the setting.
You might also look into the hide and show methods in jQuery as they can do the same thing, only with a nice animation.
Unless you have specific CSS that applies to elements with or without the class 'visible', removing and adding that class to the elements will do nothing.
You may want to try
$("#contact-submit").on("click", function() {
$("#contact").toggle();
$("#form2").toggle();
});
to toggle form visibility, and you can initially apply visibility on the forms using CSS or built-in jQuery classes.
This input tag is disabled but I want to submit this form value.
<input type="text" name="quantity" value="400" class="field left" disabled />
Please help me about this tag. Thanks in advance.
Try using readonly instead of disabled
<input type="text" name="quantity" value="400" class="field left" readonly />
If you still want it grayed out, you can set a background color:
<input type="text" name="quantity" value="200" style="background-color: #f0f0f0;" readonly />
Use hidden field.
<input type="hidden" name="quantity" value=400>
Disabled one can be there too, just remove the name attribute.
<input type="hidden" name="quantity" value=400>
<input type="text" value="400" class="field left" disabled>
Take hidden field
<input type="hidden" name="quantity" value="400" class="field left"/>
So it will not be visible and it will also be submitted in the form
Use read-only and hidden to do this as disabled values cannot be submitted.If you do not want the user to edit the values ,then use a text element instead and read its value along the form using onsubmit attribute of form tag.
I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.
I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/