使用不同的名称获取多个文本输入字段的值？

Question

我有一个带有文本输入字段和选项的表单，用户可以在其中添加多个文本输入字段（http://prntscr.com/1dikv3）此屏幕截图将显示它的外观。

现在，当曾经使用JS的字段的名称是动态的添加一个新的领域说默认字段的值为领域和新增加的领域将是有field_2，field_3等等...

现在我想获取这些字段的所有值并插入到数据库中。我不知道如何使用数组或循环获取所有这些不同的命名输入字段的值？

这里是我的JS代码：

$(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents p').size() + 1; 

    $('#addScnt').live('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      return false; 
    }); 

    $('#remScnt').live('click', function() { 
      if(i > 2) { 
        $(this).parents('p').remove(); 
        i--; 
      } 
      return false; 
    }); }); 

如果有人能请指导我，我应该心存感激。

谢谢

Answer 1

除非你需要从彼此区分不同的领域，使用所有的同名称，[]后缀。这将导致PHP将它们视为$ _POST数组中的数组。您也可以从每个新字段中删除ID。 ID应该是唯一的，并且在这种情况下，您无论如何都无法使用它们。

所以你的函数变为：

$(function() { 
var scntDiv = $('#p_scents'); 

$('#addScnt').live('click', function() { 
     $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt[]" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
     return false; 
}); 

$('#remScnt').live('click', function() { 
     if(i > 2) { 
       $(this).parents('p').remove(); 
       i--; 
     } 
     return false; 
}); });' 

在你的PHP脚本，您现在可以在$_POST['p_scnt']

Answer 2

你可以给所有的输入一个特定的类吗？如果是这样的话：

var answers = {}; 
$(".theClass").each(function() { 
    var fieldName = $(this).prop("name"); 
    answers[fieldName] = $(this).val(); 
}); 

现在你有一个输入名称和答案的对象。

如果你不能给他们上课，你可以使用$("input[type='text']").each(...，但我不知道你在页面上是否有其他文字输入。如果你这样做，也许你可以把它们放在一个具有某种类的div中，并使用$(".myDiv").find("input[type='text']").each(...

Answer 3

当然，当你知道内容将被复制时不要使用ID。简而言之，将它们改为课程。

标记

$（'。p_scents'）//使用类

代码

$(function() { 
    var scntDiv = $('.p_scents'); 
    var i = $('#p_scents p').size() + 1; 

    $('#addScnt').live('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      return false; 
    }); 
}); 

Answer 4

正如Mike W的回答中指出，也确保，如果输入名称相同，请确保在名称后包含[]，以便将它们作为数据数组收集。

---

如果所有的输入是一种形式，那么我建议使用类似$.ajaxForm。这个插件使得使用表单极其简单。它还包含ajax，这意味着你完全控制之前，之后和之间的一切。

一个基本的例子：

$('#myFormID').ajaxForm({ 
    target: '#outputID', // this would be an element where you might want the echoed data to display, such as "Success!" or "ERROR 404" // this is not required 
    beforeSubmit: function(formData, jqForm, options) { 
     // if you return false, the form will not submit, so you can validate form here 
     var $return = true; 
     // formData is an array of your input and textarea values 
     // you can manipulate this object or make a straight call like: 
     // also, try using `console.log(formData); return false;` 
     // and look to make sure the form data being submitted is as you want it 
     $("#myFormID input[type=text]").each(function(i) { 
      if (somethingIsWrong) { 
       $return = false; 
      } 
     }); 
     return $return; 
    }, 
    success: function(response, status, xhr, $form) { 
     // response is of course what your back end echoes back 
     console.log(response); 
     alert(status); 
    } 
}) 

同样，那该多好jQuery插件是http://malsup.com/jquery/form/

Answer 5

如果我理解正确的话，你想PHP遍历所有这些字段访问这些字段作为一个数组存储它？试试这个：

foreach($_REQUEST as $name=>$value) { 
    if(strncmp($name, "p_scnt_", 7) == 0) { 
     ... do something with $value ... 
    } 
} 

或者，你可以用它仅仅排在迈克W公司的答案去;）