Javascript Jquery 获取表单字段值

Jquery get form field value

提问by Dipak

I am using a jquery template to dynamically generate multiple elements on the same page. Each element looks like this

我正在使用 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>

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

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

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

但它似乎不起作用

回答by Dipak

You have to use value attributeto get its value

你必须使用value attribute来获取它的价值

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

try -

尝试 -

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

回答by davidbuzatto

It can be much simpler than what you are doing.

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

HTML:

HTML：

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

JavaScript:

JavaScript：

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

// setting the value
$("#myField").val( "new value here" );

回答by Lucas Moeskops

An alternative approach, without searching for the field html:

另一种方法，无需搜索字段 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;

回答by Severiano

if you know the id of the inputs you only need to use this:

如果您知道输入的 ID，您只需要使用它：

var value = $("#inputID").val();

回答by Alex Reynolds

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.

这将获得所有文本框的所有值。您可以使用诸如 children、firstchild 等方法来磨练。例如通过 form $('form[name=form1] input[type=text]') 更容易使用 ID 来定位元素，但如果它是纯动态的，您可以获得所有然后使用 JS 循环输入值。

回答by Milan Krushna

$("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>

回答by user3563774

You can try these lines:

您可以尝试以下几行：

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

回答by NuOne

You can get any input field value by $('input[fieldAttribute=value]').val()

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

here is an example

这是一个例子

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>