序列化ajax生成的HTML表單

Question

我正在通過AJAX請求生成HTML表單，並將其添加到我現有的HTML文檔中。 單擊保存數據鏈接后，如何序列化生成的表單。

我已經嘗試過下面的代碼，但無法正常工作。

碼：

$(document).on("click", '#save_data', function(event) {         

    // Gather all the form fields
    var form_fields = $("#data_form").serialize();      

    //post form data via ajax  
    $.ajax({

        type: "POST",
        url: "<?php echo site_url('agromet/save_data'); ?>",            
        data: form_fields,
        success: function(data){

        //add success function 


        },
        error: function(xhr,err){
             console.log(xhr.responseText);             
        }

    });



});

Ajax生成的形式：

<form id="data_form">
   <input name = "state_id" id = "state_id" type="text" value =  "">
   <input name = "station_id" id = "station_id" type="text" value =  "">
   <br/><p><a id="save_data" class="btn">Save Data</a>  </p>
</form>

Answer 1

請嘗試一下，我會在評論中添加詳細信息

JavaScript：

<script type="text/javascript">
    function postdatas() {
        $.ajax({
            type: 'POST', //Send type 
            url: '<?php echo site_url('agromet/save_data'); ?>', //Your URL
            data: $('#data_form').serialize(), //Selected form for serialize
            success: function (answer) {
                $("#result").html(answer) //here return from send url
            }
        })
    }
</script>

HTML：

<form id="data_form" name="data_form">
   <input name="state_id" id="state_id" type="text" value =  "">
   <input name="station_id" id="station_id" type="text" value =  "">
   <br/>
   <p>
   <button type="button" onclick="postdatas();" class="btn btn-primary">Gönder</button> <!-- here added onclick tag for submit the form -->
   <br><span id="result"></span>
   </p>
</form>