Question 248395 in Html Question posted in
Some basic documentation can be found here.

HTML Form Field Array to PHP Post using Javascript & AJAX

I have the code below and I’m doing it wrong. I need it to get the items from the form field ‘standardname[]’ and send it to PHP via ajax.

Here is my code:

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>

I think I just need help with this line:

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

I just don’t know what the correct method is.

Thanks!

Tags:

2

Answers


  1. 0 
    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>

    let me know if this works. I can’t put "standard[key]" in key of toadd array for some reason. i want key to be dynamically the one you provide in the for loop. also i don’t know what standard is, but I’m assuming it’s a string. you can look up other methods for it or change your implementation of the toadd array key.

    anyways this should work. I checked it and this is sending values to the PHP file one by one, assuming each input field has name of "standardname[]"

    Login or Signup to reply.
  2. 0

    Here’s, The complete example of form submit with ajax request.

    $('#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search