向mysql添加空记录的Javascript代码

Question

I have a short problem. Here is my form layout:

    <form class="form-inline" action="javascript:addRecord();" method="GET">
    <div class="row">
        <div class="form-group col-lg-4">
            <div class="form-group col-lg-6">
                <label for="konu">Konu:</label> 
                <input class="form-control " type="text" name="konu" required="required" placeholder="Bir konu yazın"/>
            </div>                                                                          
        </div>                                                        
    </div>  
    <br>                          
    <div class="form-group col-lg-5 ">
        <button type="submit" class="btn btn-default">Kaydet</button>  
    </div>                            
</form>

    <div id="add-record-div" class="alert alert-success" hidden="hidden">
         <strong>RECORD INSERTED</strong>    
    </div>

And my javascript code:

function addRecord() 
{                   
    $.post('add.php', function(data) 
    {    
        trHTML += 
        '<tr><td>' + value.id + 
        '</td><td>' + value.konu + 
        '</td><td>' + value.aciklama + 
        '</td><td>' + value.giris_tarih + 
        '</td><td>' + value.degistirilme_tarih + 
        '</td><td>' + value.ad_soyad + 
        '</td><td>' + value.email + 
        '</td></tr>';     
    });

    getLastRecord();       
    $('#add-record-div').show('slow').delay('1000'); 
    $('#add-record-div').hide('slow');                                                  
}

Databse insert looks like this: http://i.stack.imgur.com/fDiiC.jpg My problem is this function adds only empty rows to mysql. ' giris_tarih ' and 'degistirilme_tarih' are date values. Those are being added correctly but other columns are always empty. There is no problem with add.php page. If I only write: form class="form-inline" action="add.php" it works perfectly. But I couldn't get it worked with javascript function.

Answer 1

You have mismatched actions in your markup and script, and also your data is pointing to value which is not part of the object returned from your add.php (you set your ajax response to the variable data , therefore you must use data.propName... ). I also corrected your table formatting a bit and used jQuery like the rest of your module.

function addRecord() 
{                   
    $.get('add.php', function(data) 
    {    


        $('#your-table').append('<tr>' + data.id + '</td>'
        + '<td>' + data.konu + '</td>'
        + '<td>' + data.aciklama + '</td>'
        + '<td>' + data.giris_tarih + '</td>'
        + '<td>' + data.degistirilme_tarih + '</td>'
        + '<td>' + data.ad_soyad +  '</td>'
        + '<td>' + data.email + '</td>'
        + '</tr>');

    getLastRecord();       
    $('#add-record-div').show('slow').delay('1000'); 
    $('#add-record-div').hide('slow');                                                  
}