I am trying to find away to select all inputs within a form using jquery, where the trigger was initiated from. so for example if the button was clicked in form 1 only the inputs from form 1 would be selected, and nothing from form 2 would be selected.
<form action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
<form action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input type="button" onclick="doit()" />
</form>
Try this...
$(':button').on('click', function(){
var form = $(this).parents('form:first');
$(form).children().each(function(evt){
if($(this).attr('type') == 'text'){
alert(this.value);
}
});
});
See this Example jsFiddle
Greetings.
$('input[type=button]').click(function(){
console.log( $('input',$(this).closest('form')) )
});
http://jsfiddle.net/kR3ws/1/
Use the event target to get to the parent form and the find all inputs in that form
function doit(event){
$(event.target).parent("form").find("input")
}
for this to work you will have change your html of the anchor tag to
<input type="button" onclick="doit(event)" />
Add id fields to your buttons and forms.
<form id="form1" action="" method="POST"> <!--form 1-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn1" type="button" onclick="doit()" />
</form>
<form id="form2" action="" method="POST"> <!--form 2-->
<input type="text" />
<input type="text" />
<input type="hidden" value="87678" />
<input id="btn2" type="button" onclick="doit()" />
</form>
Then declare event like this :
$('#btn1').click(function(){
var data = $('#form1').serialize();
alert('form1 : '+data);
});
$('#btn2').click(function(){
var data = $('#form2').serialize();
alert('form2 : '+data);
});
Related
I want us javascript to submit my html form.
I try two method.
The first one is good for me.
function formSubmit() {
document.getElementById("myForm").submit()
}
<form id="myForm" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="submit" >
</form>
otherwise,the second one can not work for me
window.addEventListener("click", function(event){
event.preventDefault();
document.getElementById("myForm2").submit() }
)
});
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" value="submit" >
</form>
All i want to do is to use addeventlistner method to submit form
Here is a way to do it.
function formSubmit() {
document.getElementById("myForm").submit()
}
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault()
document.getElementById("myForm").submit()
})
<form id="myForm" action="https://google.com" method="get">
First name:
<input type="text" name="firstname" size="20">
<br /> Last name：
<input type="text" name="lastname" size="20"><br />
<br />
<button id="submitBtn" type="button" onclick="formSubmit()">Submit</button>
</form>
You can use input type like this
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="submit" value="submit" >
</form>
and submit event for related form
document.getElementById("myForm2").addEventListener("submit", function() {
console.log("submitted")
})
The Button
(this submit button is not working, and if i delete the onClick, the submit works. how can i make both, the onClick and the Submit to work.)
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
The whole Form
<form id="my-form" className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="name" value={shippingData.firstName} />
<br />
<input type="hidden" name="name" value={shippingData.lastName} />
<br />
<input type="hidden" name="name" value={shippingData.email} />
<br />
<input type="hidden" name="name" value={shippingData.address1} />
<br />
<input type="hidden" name="name" value={shippingData.zip} />
<br />
<input type="hidden" name="name" value={myJSON}></input>
<div>
<input
type="submit"
value="Make the purchase"
onClick={nextStep}
/>
</div>
</form>
The problem here is, your input button element has type submit. So when you click on it, onSubmit handler gets called. So if you need to do multiple things, you need multiple buttons, or do everything inside onSubmit
Option 1
Have 2 buttons:
<input
type="submit"
value="Make the purchase"/>
<input
type="button"
value="Go to next step"
onClick={nextStep} />
Option 2
<form id="my-form" className="contact-form" onSubmit={handleSubmit}>
const handleSubmit = () => {
nextStep()
sendEmail()
}
I am developing Universal windows 8.1 app and I have a page for creating new contact.
In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.
HTML:
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
</form>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
function OnSubmitForm()
{
alert('click');
}
});
My alert is never calls in plain HTML project neither in WinJS app. I also tried with:
<form name="myform" onsubmit="return OnSubmitForm();">
and the same.
Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?
Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!
In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of DOMContentLoaded.
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault(); //to prevent form submission
alert('click');
});
<form name="myform" id='myform'>
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
With current approach:
function OnSubmitForm() {
alert('click');
}
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
Have you tried parsley.js?
I created this fiddle to show you a quick example.
<form name="myform">
<div>
<label>
First name<br />
<input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
errorClass: 'has-error',
successClass: 'has-success'
};
</script>
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.
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()