<form>
First Name:
<INPUT type="text" ><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="textarea">
</FORM>
<FORM action="file.php" method="post" name=form1>
<INPUT type="submit" value="Submit">
</FORM>
https://jsfiddle.net/674brq05/
Not sure I understand your question, but you can get the form information from JS:
<form onsubmit="myFunc()">
Enter name: <input type="text" id="name">
<input type="submit">
</form>
The above does so the function "myFunc()" runs on submit.
And then the JS:
function myFunc() {
var name = document.getElementById('name');
alert(name.value);
return false; // Return false to cancel the submit
}
Way to take two form tag for submitting one form:
Try this:
HTML:
<form id="myForm" action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
JAVASCRIPT:
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
Related
Myself I am beginner and at learning stage. I would like to pass input details from one page (test1.html) to next page textarea (test2.html). attaching both html files.
test1.html(first page)
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function () {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit'>Submit</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
test2.html(second page)
<html>
<body>
<form method="get" action="test1.html">
<fieldset class="fieldset-auto-width">
<legend><b><font color="#0000FF">Your Bookings Are..!</font color></b></legend>
<textarea cols="35" rows="19" id="Requirement1" ></textarea>
<script type="text/javascript">
var mySharedData = localStorage.getItem('mySharedData1');
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
</script>
</fieldset>
</form>
</body>
</html>
function(){
Requirement1.value =Requirement1.value+document.getElementById('mySharedData1').innerHTML+this.value+", ";
}
This should be:
function getValue() {
var value = localStorage.getItem('mySharedData1');
document.getElementById('Requirement1').innerHTML = value;
}
You have to give a name to the function in both html pages, and actually use the onclick attribute of your button Submit. I wrote on one page only
<html>
<body>
<form method="post" action="test2.html">
<label><b>Customer Name</b></label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function giveMeOneName() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onclick="giveMeOneName()">
Submit
</button>
<input type="checkbox" checked="checked"> Remember me
</body>
</html>
You need to create a function and invoke that function on click submit.
<form>
<label>
<b>Customer Name</b>
</label>
<input type="text" placeholder="Enter Customer Name" name="cname" id="cname" required>
<script>
function setValue() {
localStorage.setItem('mySharedData1', document.getElementById('cname').value);
}
</script>
<button type="submit" name='submit' id='submit' onClick="setValue()">Submit</button>
<input type="checkbox" checked="checked"> Remember me
I want to increment the form number once the user had submitted the form successfully. Is there any way to increment it through JavaScript or jQuery.
<form action="">
form no:1<br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="">Submit</button>
</form>
I would suggest something like this:
$(function () {
$("form").submit(function () {
$.post("url", $(this).serialize(), function () {
$("#count").text(parseInt($("#count").text() + 1);
});
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
form no: <span id="count">1</span><br>
First name:<br>
<input type="text" name="firstname" value ="">
<br>
Last name:<br>
<input type="text" name="lastname">
<button type="submit" onclick="increment();">Submit</button>
</form>
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/
I have a HTML form:
<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
<input type="hidden" name="txt1" id="txt1">
<input type="hidden" name="txt2" id="txt2">
<input type="hidden" name="txt3" id="txt3">
<input type="submit" name="submit" value="Submit">
</form>
<input type="button" value="Submit form" onclick="MyFunction();">
I am submitting the form after filling the values in 3 hidden fields in the form in following function.
function MyFunction()
{
var isValid="";
$.post('ServletURL',{action: "getData"}).done(function(data)
{
$.each(data, function(index, text)
{
if(index==0)
isValid=text;
if(isValid=="OK")
{
if(index==1)
$("#txt1").val(text);
if(index==2)
$("#txt2").val(text);
if(index==3)
{
$("#txt3").val(text);
alert("Before form submit...");
document.getElementById('myForm').submit();
alert("Form is submited.");
}
}
});
});
}
MyFunction() is working perfectly, except that it is not submitting the form. I can see the alert alert("Before form submit...");, but can't see the second alert alert("Form is submited.");.
Then I have removed following submit button from the form which was unnecessary:
<input type="submit" name="submit" value="Submit">
Then the code is working fine, and form is getting submitted.
My question is that why form was not getting submitted when there was submit element in the form?
The reason is that the name of your submit button was submit. All the inputs in a form become properties of the form element, so document.getElementById('myForm').submit is the <input> element, not a function.
If you change it to
<input type="submit" name="somethingElse" value="Submit">
then it will work.
Change your html to: You have a form element with the name submit. Just rename it to othar(i have renamed it to sumit2).
<form name="myForm" method="post" id="myForm" action="ACTION_URL_HERE">
<input type="hidden" name="txt1" id="txt1">
<input type="hidden" name="txt2" id="txt2">
<input type="hidden" name="txt3" id="txt3">
<input type="submit" name="submit2" value="Submit">
</form>
<input type="button" value="Submit form" onclick="MyFunction();">
Hello all i have below jquery function to enable submit only if the input has 1 or more values but i have the same many input and submit button on my page the jquery function is wrking fine for 1st form but it doesnt work for other forms.
Script:
$(function ()
{
$("#textbox").bind("change keyup", function ()
{
if ($("#textbox").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
HTML:
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" id="textbox" name="textbox" />
<input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>
When I type anything in 1st textbox the submit button getting activated and working fine but if i add any values in second or third text box the submit button is not getting activated.
Because you can add only one element with id="textbox" on the same page.
Add some class name to inputs (e.g. "textbox"), and change selector '#textbox' to '.textbox' on event binding:
$(function ()
{
$(".textbox").bind("change keyup", function ()
{
if ($(this).val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
Just use class instead of id as you cannot have more than one element with same id.
Also, you need to use $(this) inside the event handler to access the changed element.
Try this:
<script type="text/javascript">
$(function () {
$(".textbox").bind("change keyup", function () {
if ($(this).val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
});
});
</script>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>
<form action="http://localhost/" method="post" accept-charset="utf-8">
<input type="text" class="textbox" name="textbox" />
<input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>
First of all , you are using the same ID's for more div in html and this is NO good. Id's are unique.
Use a class instead. Otherwise it won't work with classes neither , you should try using 3 different divs or $.each() function or recogninizing on keyup()