jQuery获取表单字段值

74

我正在使用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获取输入框的值？例如，我可以通过执行“ something”类来获得div的值

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

我希望以类似的方式检索文本框的值。现在，我尝试了

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

但它似乎不起作用

javascript jquery

— 若昂·皮门特尔·费雷拉
source

3

一次，普通的javascript可能更简单：$('input')[0].form.FirstName.value将访问该字段的值

— cnlevy 2015年

139

您必须使用value attribute以获得其价值

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

尝试-

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

— 迪帕克
source

7

@curiouspanda：只是一个提示。如果“名称”值是唯一的，则无需使用$（'＃DynamicValueAssignedHere'）。只需直接使用$（'input [name =“ FirstName”]'）。val（）即可。我仍然更喜欢使用id处理组件。

— davidbuzatto 2012年

3

@davidbuzatto-名称值不是唯一的。只有最外面的div的ID是唯一的。尽管Dipaks解决方案有效。

这是一些信息和一个小提琴dipaksblogonline.blogspot.in/2018/05/…–

— Dipak

51

它比您正在做的事情要简单得多。

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

我无法为该字段使用ID，因为我的页面可以包含具有相同元素的多个表单（我正在使用jquery中继器模板）

@curiouspanda：好的，所以您可以使用Dipaks的方法进行此操作。即使使用转发器模板，我认为您也可以使用唯一的ID，也许可以为每个字段集组件ID设置一个前缀。

— davidbuzatto 2012年

@curiouspanda动态ID有共同点吗？

— 2012年

这应该是答案。更干净。

— 外行猫

如果我应该从另一页的表单中获取值怎么办？

— 丽娜（Lina）2014年

10

一种替代方法，无需搜索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;

— 卢卡斯（Lucas Moeskops）
source

2

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

展开摘要

— 米兰·克鲁斯纳
source

1

尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。也请尽量不要在代码中添加解释性注释，因为这会降低代码和解释的可读性！

— 再见StackExchange，

1

如果您知道输入的ID，则只需使用以下命令：

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

— 塞韦里亚诺
source

1

var textValue = $("input[type=text]").val()

这将获取所有文本框的所有值。您可以使用诸如child，firstchild等之类的方法进行磨练。就像通过表单$（'form [name = form1] input [type = text]'）一样，使用ID轻松定位元素，但是如果它是纯动态的，则可以获取所有内容输入值，然后使用JS循环。

— 亚历克斯·雷诺兹
source

0

您可以尝试以下行：

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

— 用户名
source

0

您可以通过以下方式获取任何输入字段值 $('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>

展开摘要

— NuOne
source