I have a multiple form, contains 2 input boxes and a submit button. i have given tab order for each input. i have tab index for each input type. tab order is moving vertically than horizontally . it should go to first input box , second input box and then submit button.
Below is the code.
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
below is the js code
$('form').each(function(){
var list = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
first = list.first();
list.last().on('keydown', function(e){
if( e.keyCode === 9 ) {
first.focus();
return false;
}
});
});
its a dynamic form which is coming in loop and contains many fields. i want to give tab order for only 3 input fields.
http://jsfiddle.net/mWLtp/5/
Please help me in solving this issue.
Thank in advance.
set distinct tab index. for your case set it in 1 t0 9.
Like
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="4">
textbox2 <input type="text" tabindex="5">
<input type="button" tabindex="6" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="7">
textbox2 <input type="text" tabindex="8">
<input type="button" tabindex="9" value="submit">
</div>
</form>
jQuery Way DEMO
var index = 1;
$("form input").each(function () {
$(this).attr("tabindex", index);
index++;
});
HTML WAY Well You Can Directly Give Tabindex DEMO
<form class="monitorForm" >
<div class="monitorAdd">
textbox1 <input type="text" tabindex="1">
textbox2 <input type="text" tabindex="2">
<input type="button" tabindex="3" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="4">
textbox2 <input type="text" tabindex="5">
<input type="button" tabindex="6" value="submit">
</div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
textbox1 <input type="text" tabindex="7">
textbox2 <input type="text" tabindex="8">
<input type="button" tabindex="9" value="submit">
</div>
</form>
well, if you dont define a tabindex attribute it defaults to horizontal, you dont need any tabindex or jquery
All the tabindex=1 will be taken in order from top to bottom, no matter if you have placed them in single <div> or different. Then will come the turn of tabindex=2.
Your Solution:
Change the tabindex like 1,2,3,4,5,6.. instead of 1,2,3,1,2,3,...
Hope this helps. :)
Give to individual tabindex value,instead of override your tabindex value.
JSFIDDLE DEMO
Related
currently setting up a form to create a new order within a payment system and when I click any of the buttons within the form the form submits. Anyone know what the issue could be?
This is the code with the issue:
<form action="scripts/php/addorder.php" method="POST">
<script src="scripts/javascript/cookies.js"></script>
<script src="scripts/javascript/addproduct.js"></script>
<label>Choose Customer: </label>
<input type="text" value="" name="name" id="name" required readonly>
<button onclick ="window.open('customertable.php','popup','width=600,height=600');">Choose</button>
<br/>
<div id="products">
<label>Products: </label>
<br/>
ID: <input type="text" value=" " name="chosenproduct0" id="chosenproduct0" required readonly>
Name: <input type="text" value=" " name="chosenproduct0name" id="chosenproduct0name" required readonly>
Price: <input type="text" value=" " name="chosenproduct0price" id="chosenproduct0price" required readonly>
Quantity: <input type="number" value="1" name="chosenproduct0quantity" id="chosenproduct0quantity" required>
<button onclick ="findproduct('chosenproduct0');">Choose Product</button>
</div>
<br/>
<label>Discount: </label>
<input type="number" placeholder="0" name="discount" id="discount" step=".01" min="0">
<label>Total: </label>
<input type="number" value="0" name="total" id="total" readonly>
<button onclick="addproduct()">Add Product</button>
<br/>
<input type="submit" id="submit" value="Create New Order" class="button"/>
</form>
The default type for a <button> is submit. Explicity set it to button and it shouldn't submit the form by default:
<button type="button" onclick="addproduct()">Add Product</button>
By default, pages are refreshed/forms submitted when buttons are clicked. You can fix this by adding the attribute type="button" to your buttons.
<button type="button" onclick="myFunction()">My button</button>
Prevent using <button> element in the <Form> elements,
By default it's behavior is equivalent to <input type="submit"> element.
So Prefer this
<input type="button" value="Add Product">
I have two forms. form1's field data is sending to form2. form2 have 1 set 3 inline inputboxs and 1 reset button.when i clicked the reset button form1's go back to default state with out refresh the page.how can I do that?
**form1 **
<form id="formDrink" onclick="submit1(this.drinkname,this.drinkprice,this.drinkquantity)" >
<input type="text" id="drinkname" name="drinkname" value="{{$drink->product_name}}">
<input type="hidden" id="drinkquantity" value="0" >
<input type="text" id="drinkprice" name="drinkprice" value="{{$drink->selling_bottle}}">
</form>
form2
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="" readonly="">
<input type="text" id="drinkQuantity" name="drinkquantity" value="" readonly="">
<input type="text" id="drinkPrice" name="drinkprice" value="" readonly="">
<input type="button" id="resetForm" onclick="drinkRemover()" value="reset" />
</form>
javascript
function drinkRemover(){
$("#formDrink")[0].reset();
}
I dont know why my javascript do not work.I tryed every posible ways but i cant reset the form1's fields to its default values.
This is what the reset input type is for:
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="drinkname">
<input type="text" id="drinkQuantity" name="drinkquantity" value="drinkquantity">
<input type="text" id="drinkPrice" name="drinkprice" value="drinkprice">
<input type="reset" id="resetForm" value="reset" />
</form>
When my page loads I hide a div containing a form using
$('#popupPerson').hide();
then in the body I build a table and this popup to help insert/update/delete row data using a form that is initally hidden
<div id="popupPerson" class="popupPerson">
<form id="form_popup_person" action="person_update" method="post">
<fieldset>
<legend>Person</legend>
<label for="id">id</label> <input name="id" type="number" />
<label for="revision">revision</label> <input name="revision" type="number" /><p>
<label for="lastName">lastName</label> <input name="lastName" type="text" />
<label for="firstName">firstName</label> <input name="firstName" type="text" /><p>
<label for="street">street</label> <input name="street" type="text" />
<label for="city">city</label> <input name="city" type="text" /><p>
<label for="county">county</label> <input name="county" type="text" />
<label for="state">state</label> <input name="state" type="text" />
<label for="postalCode">postalCode</label> <input name="postalCode" type="text" /><p>
<label for="birthDate">birthDate</label> <input name="birthDate" type="text" />
<label for="email">email</label> <input name="email" type="text" />
<label for="status">status</label> <input name="status" type="text" /><p>
<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" class="cancel" value="Cancel" />
<button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
<button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
<button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button> <!-- makes ALL BUTTONS DISAPPEAR -->
<button type="button" class="cancel" onClick="$(this).hide();">hide button</button> <!-- makes the BUTTON ITSELF DISAPPEAR -->
</fieldset>
</form>
</div>
and some js so that if a row in the table is clicked this fires and makes the div visible
$('#popupPerson').show();
I want to add a "Cancel" button to the form that simply closes/hides the div - no submitting, no resetting.
you can simply write like
<button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>
I would use this: <button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button> which closes the containing .popupPerson, incase you ever need more than one on a page.
Alternatively, you can put this in a script:
$(function(){
$(document).on('click','.popupPerson .cancel', function(){
$(this).closest('.popupPerson').hide();
// Do whatever else you want here, like eat the event (stopPropegation, etc).
});
});
And this is the element:
<a class="cancel">parent parent hide button</a>
So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method
I want to add attribute checked=true with multiple inputs like this:
<form id="students" method="post">
<div class="row">
<input id="aa" name="a[]" value="Smith" type="text" class="a1" >
<input id="bb" name="b[]" value="Alen" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" disabled="disabled" >
</div>
<div class="row">
<input id="aa" name="a[]" value="" type="text" class="a1" >
<input id="bb" name="b[]" value="" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="Bill" type="text" class="a1" >
<input id="bb" name="b[]" value="Mark" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="" type="text" class="a1" >
<input id="bb" name="b[]" value="" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<div class="row">
<input id="aa" name="a[]" value="Kell" type="text" class="a1" >
<input id="bb" name="b[]" value="Keith" type="text" class="b1" >
<input id="save" name="save[]" value="" type="checkbox" class="ab" >
</div>
<input type="submit" value="submit" id="submitbutton" class="insert" onclick="checkform()"/>
</form>
And each line input has no value I add attribute checked=false of checkbox. How I do. Who can help me? thanks.
This is javaScript :
<script type="text/javascript">
function checkform() {
var myForm = document.forms.students;
var myControls = myForm.elements['a[]'];
for (var i = 0; i < myControls.length; i++) {
if(myControls[i].value==""){
$(".ab").attr("checked", true); //check input had value then
}
}
}
</script>
Your question says: "... I add attribute checked=false..."
But your code says:
$(".ab").attr("checked",true); //not false like the question says
Please tell me that's not it ;)
What about something like this? Check out this JSFiddle.
You can swap them around if I misunderstood and you want inputs with something in them to be checked and not vice versa.
In the fiddle I changed it so that the button click is handled by jquery instead of the onClick() attribute of the input.
function checkform() {
var myForm = document.forms.students;
$(myForm).find('input[name="a[]"], input[name="b[]"]').filter(function(){
if(!$.trim(this.value)){
$(this).siblings('.ab').prop('checked', true)
}else{
$(this).siblings('.ab').prop('checked', false)
}
});
}
I also updated it to check both a[] and b[].
Additionally, I removed the myControls variable since you don't need it here.