简体   繁体   中英

How to get multiple field entry in mysql database from jquery and html fields from php

I have created a field in Html and jquery that can expand basically I made it for customer care centers so that they can put on the pin codes where they want to work on. Now I have created a field in Html and jquery that can expand by clicking a plus button now I want to insert individual data for individual field in MySQL database using PHP how can I do that.

<div class="input_fields_container">
      <div><input type="text" name="product_name[]">
           <button class="btn btn-sm btn-primary add_more_button">Add More Fields</button>
      </div>
    </div>

this is my jquery code

 <script>
    $(document).ready(function() {
    var max_fields_limit      = 10; //set limit for maximum input fields
    var x = 1; //initialize counter for text box
    $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
        e.preventDefault();
        if(x < max_fields_limit){ //check conditions
            x++; //counter increment
            $('.input_fields_container').append('<div><input type="text" name="product_name[]"/><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field
        }
    });  
    $('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>  

this is my output if you want to get a better idea of what I am trying to say my page

It is just a traditional way... $_POST['product_name'];

First enclose all your inputs under a form, along with a submit button.

Then, have an ajax call as follows:

$(myform).submit(function(){
    $.ajax({
        type: 'post',
        url: "your/url",
        data: new FormData(myform),
        contentType: false,
        processData: false,
        success: function(){.
             //your code
        }
    });
});

In php, you can access the request inputs with $_POST['product_name'] .

Even if you choose to do it without AJAX, the inputs can be accessed in the same way.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM