使用 Javascript 和 AJAX 将 HTML 表单字段数组发送到 PHP Post

Question

我有下面的代码，但我做错了。我需要它从表单字段“standardname[]”获取项目并通过 ajax 将其发送到 PHP。

这是我的代码：

function standardSave() {
        //get the data from the form field-its a text input array
        var names=document.getElementsByName('standardname[]');
        
        //for each item in the array
        for(key=0; key < names.length; key++)  {        
            
            //combine the items in this 'toadd' array
            var toadd = { "standard[key]" : "names[key].value" };
        
        //send to PHP via ajax
        $.ajax({
            type: "post",
            url: "draftsave.php",
            data: toadd,
            success: function(result) {
            }
        });
        
        //empty the var
        var toadd = [];
    };
    </script>

我想我只需要这行的帮助：

var toadd = { "standard[key]" : "names[key].value" };

我只是不知道正确的方法是什么。

谢谢！

Answer 1

这是使用ajax请求提交表单的完整示例。

$('#saveName').on('submit',function(event){ // form on submit event
    event.preventDefault(); 
  event.stopImmediatePropagation()
  event.stopPropagation()
  // above functions are for stop propogation
  var form = $(this).serialize(); // get data of form
    $.ajax({
    type: "post",
    url: "draftsave.php",
    data: form,
    success: function(result) {
        if(result.status == true){
            console.log("Form submitted successfully");
        }
    }
    });
 });

input {
  padding : 10px;
  margin : 5px;
  
}
button {
background-color: #C2FBD7;
border-width: 0;
box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0;
color: #008000;
cursor: pointer;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 0.8em;
height: 3em;
padding: 0 25px;
transition: all 200ms;
}

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<form id="saveName">
  <input type="text" name="standardname[]" value="" placeholder="Enter Name"><br>
  <input type="text" name="standardname[]" value="" placeholder="Enter Name"><br>
  <input type="text" name="standardname[]" value="" placeholder="Enter Name"><br>
  <input type="text" name="standardname[]" value="" placeholder="Enter Name"><br>
  <input type="text" name="standardname[]" value="" placeholder="Enter Name"><br>
  <button type="submit" >Submit</button>
</form>

Answer 2

form action="javascript:void(0)" onsubmit="standardSave()">

        <input type="text" name="standardname[]">
        <input type="text" name="standardname[]">
        <input type="text" name="standardname[]">
        <input type="text" name="standardname[]">
        <button type="submit">Submit</button>

    </form>
    <script>
        function standardSave() {
            console.log('i got called')
            //get the data from the form field-its a text input array
            var names=document.getElementsByName('standardname[]');
            
            //for each item in the array
            for(key=0; key < names.length; key++)  {        
                    
                //combine the items in this 'toadd' array
                var toadd = { "standard[]" : names[key].value };
                console.log("key: ", key)
                console.log(toadd)
                    

                //send to PHP via ajax
                $.ajax({
                    type: "post",
                    url: "draftsave.php",
                    data: toadd,
                    success: function(result) {
                        console.log('i should be working now bro')
                    }
                });
                
                //empty the var
                var toadd = [];
            };
        }
    </script>

让我知道这是否有效。由于某种原因，我无法将“standard[key]”放入 toadd 数组的键中。我希望 key 是您在 for 循环中动态提供的 key。我也不知道标准是什么，但我假设它是一个字符串。您可以查找其他方法或更改 toadd 数组键的实现。

无论如何这应该有效。我检查了一下，这是将值一一发送到 PHP 文件，假设每个输入字段的名称为“standardname[]”