I am using a jquery template to dynamically generate multiple elements on the same page. Each element looks like this
<div id ="DynamicValueAssignedHere">
<div class="something">Hello world</div>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="FirstName" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
I would like to use Jquery to process the form on submit. I would also like to revert the form values to their previous values if something should go wrong. My question is How can I get the value of input box using Jquery? For example, I can get the value of the div with class "something" by doing
var something = $(#DynamicValueAssignedHere).children(".something").html();
In a similar fashion, I want to be able to retrieve the value of the textbox. Right now, I tried
var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();
but it doesn't seem to be working
This question is related to
javascript
jquery
$("form").submit(function(event) {_x000D_
_x000D_
var firstfield_value = event.currentTarget[0].value;_x000D_
_x000D_
var secondfield_value = event.currentTarget[1].value; _x000D_
_x000D_
alert(firstfield_value);_x000D_
alert(secondfield_value);_x000D_
event.preventDefault(); _x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<form action="" method="post" >_x000D_
<input type="text" name="field1" value="value1">_x000D_
<input type="text" name="field2" value="value2">_x000D_
</form>
_x000D_
An alternative approach, without searching for the field html:
var $form = $('#' + DynamicValueAssignedHere).find('form');
var formData = $form.serializeArray();
var myFieldName = 'FirstName';
var myFieldFilter = function (field) {
return field.name == myFieldName;
}
var value = formData.filter(myFieldFilter)[0].value;
if you know the id of the inputs you only need to use this:
var value = $("#inputID").val();
var textValue = $("input[type=text]").val()
this will get all values of all text boxes. You can use methods like children, firstchild, etc to hone in. Like by form $('form[name=form1] input[type=text]') Easier to use IDs for targeting elements but if it's purely dynamic you can get all input values then loop through then with JS.
You can try these lines:
$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value
You can get any input field value by
$('input[fieldAttribute=value]').val()
here is an example
displayValue = () => {_x000D_
_x000D_
// you can get the value by name attribute like this_x000D_
_x000D_
console.log('value of firstname : ' + $('input[name=firstName]').val());_x000D_
_x000D_
// if there is the id as lastname_x000D_
_x000D_
console.log('value of lastname by id : ' + $('#lastName').val());_x000D_
_x000D_
// get value of carType from placeholder _x000D_
console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());_x000D_
_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="formdiv">_x000D_
<form name="inpForm">_x000D_
<input type="text" name="firstName" placeholder='first name'/>_x000D_
<input type="text" name="lastName" id='lastName' placeholder='last name'/>_x000D_
_x000D_
<input type="text" placeholder="carType" />_x000D_
<input type="button" value="display value" onclick='displayValue()'/>_x000D_
_x000D_
</form>_x000D_
</div>
_x000D_
It can be much simpler than what you are doing.
HTML:
<input id="myField" type="text" name="email"/>
JavaScript:
// getting the value
var email = $("#myField").val();
// setting the value
$("#myField").val( "new value here" );
Source: Stackoverflow.com