I have a form with two buttons one should submit the form and other should add a dropdown menu each time I click it.(If I click it two times two dropdowns should appear).
Here is my form:
<form name="form1" action="anotherfile.jsp">
<input type="text" name="box1">
<input type="text" name="box2">
<input type="submit" name="Add_dropdown">
<input type="submit" name="Submit_form">
</form>
i think this should work:
<form name="form1" action="anotherfile.jsp">
<input type="text" name="box1">
<input type="text" name="box2">
<input type="button" id="add_dd">
<span id="cont"></span>
<input type="submit" name="Submit_form">
</form>
<script>
ddBtn = document.getElementById("add_dd");
ddBtn.addEventListener("click",function(){
c = document.getElementById("cont");
dd = "<select name='dd'><option>1</option><option>2</option></select>";
c.innerHTML += dd;
}
</script>
Related
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>
I have a page with multiple forms on it. Each form has two submit buttons and one hidden input field which contains an ID.
When the user clicks one of the submit buttons, I need to send the value of the clicked submit button along with the value of the hidden input field with the form submission.
Here is an example of what my page looks like:
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<script>
$(document).on("submit", "#options", function(e) {
e.preventDefault();
console.log(this.submitted) // gets the value of the submit button
});
</script>
Currently I can only send the value of the clicked submit button with the form submission and not the value of the hidden input field. While I am aware that I could use onclick="this.form.submited=this.previousElementSibling.value;" to get the ID, this would mean I cannot get the value of the clicked submit button.
Use $(this) to to get the hidden input of the current form, and you can't use the same id for multiple elements, change your id to class="options".
var val = $(this).find('input:hidden').val());
$(document).on("submit", ".options", function(e) {
e.preventDefault();
console.log($(this).find('input:hidden').val()) // gets the value of the submit button
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form class="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form class="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
Give an id say hiddenInput to the hidden input box. To access the value you can use $(.hiddenInput).val();. To access the value on the server side, you can access it using req.query.id()
You can use val():
var value = $('input[name="input-name"]').val();
Edit:
If you want to use more than one input with the same name, use it like this:
$('input[name="input-name"]').forEach(function($in) {
var value = $in.val();
});
Try this:
$(document).ready(function() {
$("input[type='submit']").click(function(event) {
event.preventDefault();
var id = $(this).parent().find("input[name='id']").val();
var action = $(this).data("action");
console.log("action: " + action + ", id: " + id);
});
});
<html>
<body>
<form id="options1">
<input type="hidden" name="id" value="104">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<form id="options2">
<input type="hidden" name="id" value="44">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<form id="options3">
<input type="hidden" name="id" value="39">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Just a simple find will fetch you the required data.
$(document).on("submit", "form", function(e) {
alert($(this).find('input[type="hidden"]').val())
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>
All you need is this:
<form>
<input type="hidden" name="id" value="104">
<input type="submit" name="action" value="Delete">
<input type="submit" name="action" value="Reply">
</form>
Clicking the Reply button yields:
id=104&action=Reply
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 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
I've got a short question colegues! Here it is: is this the fastest script way to change the input field's value when some of the 3 buttons are clicked? Here is the script:
<form name="viewtype" action="javascript:alert(document.viewtype.option.value);">
<input name="option" type="hidden" value="" />
<input name="" type="button" onclick="document.viewtype.option.value='0';"/>
<input name="" type="button" onclick="document.viewtype.option.value='1';"/>
<input name="" type="button" onclick="document.viewtype.option.value='2';"/>
<input name="" type="submit"/>
</form>
I'd do it like so:
HTML:
<form name="viewtype">
<input type="hidden" name="option">
<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="submit">
</form>
JavaScript:
var form = document.forms.viewtype,
buttons = form.querySelectorAll( '[type="button"]' );
[].forEach.call( buttons, function ( button ) {
button.onclick = function () {
form.elements.option.value = this.value;
};
});
form.onsubmit = function ( e ) {
e.preventDefault();
alert( this.elements.option.value );
};
Live demo: http://jsfiddle.net/9B7du/1/