使用不同的名稱獲取多個文本輸入字段的值？

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公司的答案去;）