从表单传输数据并使用Ajax保存数据

时间:2018-07-18 13:49:56

标签: jquery html ajax forms

我目前在使用jQuery和Ajax时遇到问题–也许您可以帮我。...

我打算做什么: 我有一个编辑按钮。如果按下此按钮,则该按钮下方应显示一个新表格。 按下提交按钮后,我想将表单中的数据写入数据库(使用ajax)。

目前适用: -如果按下了编辑按钮,则在按钮下方显示表单 -如果我按下“提交”按钮,则将数据保存在数据库中(带有固定值)

问题: 但是我不能用已提交的数据在数据库中写数据:

        var edit-phone = jQuery("#edit-phone-number").val();
        var edit-language = jQuery("#edit-language").val();




function edit_data_db($phone_id){

var phone_id    = $phone_id;
var id_element = "row_" + phone_id;
var edit_btn = "edit_" + phone_id;


$( "<tr><td class='form-edit-data' colspan='4'><h3>Update Data</h3></br><form><lable>Phone Number</lable><input type='text' name='edit-phone-number' id='edit-phone-number' placeholder='Phone number' required> </br> </br><lable>Language</lable><input type='text' name='edit-language' id='edit-language' placeholder='Language' required></br> </br><button class='button' type='submit' name='senden' id='edit-submit'>Submit</button></form></td></tr>" ).insertAfter( "#"+id_element );

jQuery("#edit-submit").click(function( ){

        //Form Data - Problem
        var edit-phone = jQuery("#edit-phone-number").val();
        var edit-language = jQuery("#edit-language").val();

        console.log(edit-language);
        console.log(edit-phone);            

            jQuery.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl,
            data: {
                    action: 'edit_data_db', 
                    'phone-id':"80", 
                    'edit-phone-number':"4", 
                    'edit-language':"1"
                    },
            dataType:"json",    
            success: function(data){
                jQuery('.messageDiv').html(data.message);



            },
            error: function(data){
                console.log(data);
            }
        });

        return false;

});
};

0 个答案:

没有答案