I have the following dynamically generated HTML
<div id="1">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
<div id="2">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
The outer divs have different IDs but the form names are the same. I am using Jquery to perform some validation when the form is submitted. However, when the second form is submitted, I always get the values of the first form.
$(document).ready(function () {
$('form[name="inpForm"]').live('submit', function () {
alert($('input[name="FirstName"]').val());
return false;
});
});
How can I modify myJquery to find the "FirstName" element that matches the current form where the submit was triggered?
Thanks
Add some context:
alert($(this).find('input[name="FirstName"]').val());
Use this (the form-element) as context-argument:
alert($('input[name="FirstName"]',this).val());
Related
I have a multiple forms in a page and i would like to get the elements of a specific form. For example:
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
How to get the value of message of form id=2...... Thanks in advance
Just use attribute selectors
$('form[id=2]') // get the form with id = 2
.find('input[name=message]') // locate the input element with attribute name = message
.attr("value"); // get the attribute = value
You really shouldn't use raw numbers for ids, let's rename those to form_1 and form_2, then your jquery selector would be:
$("#form_2 [name='message']").val();
Simply query the input from the id of the form you'd like
console.log($('#2 input').val());
//more specific
console.log($('#2 input[name="message"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
You can use jQuery, or you can use basic JavaScript to return the message value. With basic JS, you would have to give your form a name, but then could return the message value.
Code:
function getValue() {
var message = document.forms["form_name"]["message"].value;
}
You would then have to return the function when the form is submitted
<form class="form" name="form_name" onsubmit="return getValue()">
I have html that has tile view and each tile has some info with button. I want to check the value of an input hidden field and if the value is not in array defined raise an alert.
html
<div class="box" style="width:30%%">
<div class="boxInner">
<form id="form_myws" method="POST">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>
</div>
</div>
javascript
<script type="text/javascript">
$('#submit').click(function(){
var state_list=["AVAILABLE","IMPAIRED","INOPERABLE",];
var curr_state=$(this).find("input[type='hidden'][name='state']");
console.log(curr_state.val());
if (jQuery.inArray(curr_state.val(),state_list)<0){
alert("submission is allowed only with AVAILABLE,IMPAIRED,INOPERABLE states.");
}
});
It is not generating any alert. How to achieve that?
var curr_state=$(this).find("input[type='hidden'][name='state']");
change it to
var curr_state=$(this).closest('form').find("input[type='hidden'][name='state']");
also add
return false;
inside if statement so it won't submit form.
If you want to subvert submit you need to do:
$('#submit').click(function(e){
// this:
e.preventDefault();
// more code
// .. or better
return false;
});
You can contain these responses in if --> then constructs but you need to do one or the other to prevent a form from submitting. If you're not using a form, don't use submit!
You can also access the hidden input value like this:
$('#form_myws > input[name="state"]').val();
Working snippet:
var val = $('#form_myws > input[name="state"]').val();
$('body').append(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_myws">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>
in your case:
var curr_state=$(this).find("input[type='hidden'][name='state']");
$(this) get the button element you selected , you can't find any childen nodes via find() So you should select the hidden input correctly like:
var curr_state=$($(this).parent()[0]).prev()[0];
or like this:
var curr_state=$($(this).parent()[0]).siblings('[name="state"]')[0];
I know how to submit a form from outside the form, for example:
<form action="Get?id_sec=120" method="post" id="form15" name="form15" style="display:none"></form>
<input type="submit" class="finish-button primary-button button" border="0" value="Limpar pedido" form="form15" onclick="javascript:document.form15.submit();" />
But I want to put a tag with a reference to the form with javascript too, because command form="example" doesn't work in Internet Explorer.
example:
<input class="input-cep" name="pr001" id="cepfrete" type="text" form="form15"/>
or
<input type="radio" name="tipofrete" value="4" form="form15">`
How can I do that?
Hey Vince, thanks, this works. Very useful help! I need just one other thing. How can I put an input and select in the same form in jQuery?
example:
<input type="text" data-form="dataForm" name="external-input-2">
<Select id="selectField_1" name="selectField_1" data-form="dataForm" >
<option value="52" data-form="dataForm">A</option>
</Select>
To submit a form from outside the form:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
jQuery
$('#submitTheForm').on('click', function() {
$('#theForm').submit();
});
To include external inputs in the form submission:
HTML
<form id="theForm">...</form>
<button id="submitTheForm">Click to Submit</button>
<input type="text" data-form="theForm" name="external-input-1">
<input type="text" data-form="theForm" name="external-input-2">
jQuery
You can append the external inputs as hidden inputs to the form:
$('#submitTheForm').on('click', function() {
var form = $('#theForm');
$('input[data-form="theForm"]').each(function() {
var input = $(this);
var hidden = $('<input type="hidden"></input>');
hidden.attr('name', input.attr('name'));
hidden.val(input.val());
form.append(hidden);
});
form.submit();
});
I'm not sure that I can completely understand your question but if you are asking how to submit a form externally in different situations, her is my answer.
For the future, just put an id on the form like this.
<form id="form15"></form>
Then to submit this form from anywhere, all you have to do is call the following javascript line in an onclick, a function, etc.
document.getElementById("form15").submit();
I am doing a web application using javascript and html that has a form containing a text field, button. When I enter a number in that text field and submit by clicking on that button, text areas are generated dynamically. Once my form is submitted some text areas are created but if I am not satisfied with existing text areas then again I enter some value with out refreshing page. But the text field value entered previously prevails showing the new text areas below the existing text areas on the page.
So, how do I clear the value with out refreshing the page.
<div>
<html>
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
</div>
</html>
<javascript>
var num_q=document.getElementById('numquest').value;
//code for dynamic creation
</javascript>
try this:
Using jQuery:
You can reset the entire form with:
$("#myform")[0].reset();
Or just the specific field with:
$('#form-id').children('input').val('')
Using JavaScript Without jQuery
<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">
function submitForm() {
// Get the first form with the name
// Hopefully there is only one, but there are more, select the correct index
var frm = document.getElementsByName('contact-form')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}
You can set the value of the element to blank
document.getElementById('elementId').value='';
Assign empty value:
document.getElementById('numquest').value=null;
or, if want to clear all form fields. Just call form reset method as:
document.forms['form_name'].reset()
you can just do as you get that elements value
document.getElementById('numquest').value='';
<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>
<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}
</script>
You can use this script where every you want.
It will clear all the fields.
let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));
HTML
<form id="some_form">
<!-- some form elements -->
</form>
and jquery
$("#some_form").reset();
I believe it's better to use
$('#form-id').find('input').val('');
instead of
$('#form-id').children('input').val('');
incase you have checkboxes in your form use this to rest it:
$('#form-id').find('input:checkbox').removeAttr('checked');
.val() or .value is IMHO the best solution because it's useful with Ajax. And .reset() only works after page reload and APIs using Ajax never refresh pages unless it's triggered by a different script.
I had that issue and I solved by doing this:
.done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
I added this code after my script as I used jQuery. Try same)
<script type="text/JavaScript">
$(document).ready(function() {
$("#feedback").submit(function(event) {
event.preventDefault();
$.ajax({
url: "feedback_lib.php",
type: "post",
data: $("#feedback").serialize()
}).done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
});
});
</script>
<form id="feedback" action="" name="feedback" method="post">
<input id="name" name="name" placeholder="name" />
<br />
<input id="surname" name="surname" placeholder="surname" />
<br />
<input id="enquiry" name="enquiry" placeholder="enquiry" />
<br />
<input id="organisation" name="organisation" placeholder="organisation" />
<br />
<input id="email" name="email" placeholder="email" />
<br />
<textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
<br />
<button id="send" name="send">send</button>
</form>
You can assign to the onsubmit property:
document.querySelector('form').onsubmit = e => {
e.target.submit();
e.target.reset();
return false;
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit
I have a form within a SimpleModal modal, but when I try to use serialize with jQuery, the form data is always blank. The form serialize works outside of the modal, so theres something preventing the serialize from grabbing the form data. This is the code I am using:
<div id="address_form" style="display:none">
<div id="contact-area">
<form id="address_form" action="submit" method="POST">
<label for="Street">Street:</label>
<input type="text" name="Street" id="street" />
<input type="submit" name="submit" class="submit-button" />
</form>
</div>
</div>
$("#address_form").submit(function(){
var data = $(this).serialize();
alert(data)
return false;
});
You have two elements with the id of address_form. Change the id on the DIV with that id and it will work.