如何在列表中动态生成输入字段,然后从所述字段中检索文本?

时间:2013-02-12 00:50:50

标签: javascript ajax jquery

我正在填充输入字段列表,以允许用户输入多个位置。 (我已经找到了填充列表的方法,但我认为它可能不是正确的方式,因为我刚刚开始,我想我会更好地学会正确行事)。我填写这样的列表:

function addLocationBox(){
    $('#InputBoxesList').append('<li><input type="text" /><input type="button" value ="Add Location"  onclick="addLocationBox();"/></li>')
}

当用户填写完字段并在页面中稍后按下提交按钮时,我需要知道如何检索他们输入的文本。有什么建议?我是javascript的新手,所以任何其他指针也欢迎:)。

1 个答案:

答案 0 :(得分:1)

您可以使用.each()在输入之间循环。

假设您希望使用Ajax和JQuery POST输入值。只有输入,而不是textareas或选择,这样的例子更容易。

首先,您需要文本输入和字符串变量来存储数据。 在这个字符串中,我经常首先存储我提交的value。它在服务器端很有用。

var $inputs    = $("input").not("input[type=submit]"),
    submitval  = $("input[type=submit]").val(),
    datastring = "submit="+submitval;

然后使用.each()循环输入并在数据字符串中追加名称/值:

$inputs.each(function() {
  var $this = $(this),
      name  = $this.attr("name"),
      val   = $this.val();

      datastring += "&"+name+"="+val;    
});

你现在有一个数据串,你可以像这样POST,例如form.php:

$.ajax({
  type: "POST",
  data: datastring,
  url: "form.php",
  success: function(data) {
    // your success handler
  }, 
  error: function() {
    // your error handler
  }   
});

这不是一种剪切和粘贴解决方案,更像是一种通用的方法。

它不会处理textareas,复选框,选择等。
它不会处理多种形式 它不会在发布之前检查数据。

因此请谨慎使用。