Jquery 获取表单字段值

我使用一个 jquery 模板在同一页面上动态生成多个元素

<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>

我想使用 Jquery 在提交时处理表单。如果出现问题，我还希望将表单值恢复为它们以前的值。我的问题是 如何使用 Jquery 获取输入框的值？例如，我可以通过执行

var something = $(#DynamicValueAssignedHere).children(".something").html();

以类似的方式，我希望能够检索文本框的值

var text = $(#DynamicValueAssignedHere).children(".formdiv").findnext('input[name="FirstName"]').val();

但似乎没什么效果

392885 次浏览
小开

它可以比你正在做的事情简单得多。

HTML:

<input id="myField" type="text" name="email"/>

JavaScript:

// getting the value
var email = $("#myField").val();


// setting the value
$("#myField").val( "new value here" );
小开
最佳答案

必须使用 value attribute才能得到它的值

<input type="text" name="FirstName" value="First Name" />

试试

var text = $('#DynamicValueAssignedHere').find('input[name="FirstName"]').val();
小开

如果您知道输入的 id，那么您只需要使用以下命令:

var value = $("#inputID").val();
小开 
var textValue = $("input[type=text]").val()

这将得到所有文本框的所有值。你可以使用像孩子、第一个孩子等方法来磨合。比如形式 $(‘ form [ name = form1] input [ type = text ]’) 更容易为目标元素使用 ID，但是如果它是纯动态的，那么可以获得所有输入值，然后使用 JS 循环。

小开

另一种方法，不搜索字段 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;
小开 

$("form").submit(function(event) {
    

var firstfield_value  = event.currentTarget[0].value;
     

var secondfield_value = event.currentTarget[1].value;
     

alert(firstfield_value);
alert(secondfield_value);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" >
<input type="text" name="field1" value="value1">
<input type="text" name="field2" value="value2">
</form>

小开

你可以试试这些台词:

$("#DynamicValueAssignedHere .formdiv form").contents().find("input[name='FirstName']").prevObject[1].value
小开

您可以通过以下方法获得任何输入字段值 $('input[fieldAttribute=value]').val()

这里有一个例子

displayValue = () => {


// you can get the value by name attribute like this
  

console.log('value of firstname : ' + $('input[name=firstName]').val());
  

// if there is the id as lastname
  

console.log('value of lastname by id : ' + $('#lastName').val());
  

// get value of carType from placeholder
console.log('value of carType from placeholder ' + $('input[placeholder=carType]').val());


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formdiv">
<form name="inpForm">
<input type="text" name="firstName" placeholder='first name'/>
<input type="text" name="lastName" id='lastName' placeholder='last name'/>
        

<input type="text" placeholder="carType" />
<input type="button" value="display value" onclick='displayValue()'/>
        

</form>
</div>


提交答案