CODEWITHSUNDEEP
jquery-ui
ChrisJ
ChrisJ

Reputation: 477

Writing form data in a jquery-ui modal popup box to a database

I have the script shown below that displays a list of records from a database with a button when clicked triggers a jquery modal box with a form that allows someone to enter data.
When you click on the button on the modal form the data is written to the database via a php script.

My problem is that the php script is not being executed (see the javascript under the first script.
The alert(data) pops up with word null.

At the moment, the php file has following: echo json_encode("php script goes here");

Any help would appreciated.

Thanks
Chris

HEADER INFO

<script type="text/javascript" src="newRequest.js"></script>    
<script type="text/javascript">

$(document).ready(function() {
    $("#requestForm").dialog({
        autoOpen: false,
        height: 500,
        width: 500,
        modal: true
    });

    $("#projreq").click(function(event) {
        event.preventDefault();
        $("#requestForm").dialog("open")
    });

    checkFormData();
}); //end of ready​​​

BODY INFO

<div id="jobList"> 

<form>  

<?php

$query = 'SELECT project_name,submit_date,status,cost FROM requests';  

while ($results->fetch())  
  {  
    echo $project_name  
    echo $submit_date 
    echo $status  
    echo $cost  
   }  
   echo  '<input type="submit" name="projreq" id="projreq" value="Submit a project request"/>';  
 ?>  
</form>  
</div>

MODAL POPUP 

<div id="requestForm" title="New Request Form" style="display: none;" >  
    <form  method="" action=""  name=requestFormData id=requestFormData>  

    <table>  
        <tr>  
            <td>First Name: input type=text name = firstName id=firstName> </td>  
            <td>Last Name: input type=text lastName = name id=lastName> </td>  
        </tr>  
        <tr>
            <td>  
            <button name="newprojreq" id="newprojreq" >Submit request Form</button>  
            </td>
        </tr>
    </table>  

    </form>  
</div>

JAVASCRIPT (newRequest.js) USED TO WRITE DATA FROM MODAL POPUP TO DATABASE

functionData() {

    $("#newprojreq").click(function() {
        data = $("#requestFormData").serialize();
        alert(data);

        $.ajax({
            URL: 'writeFormData.php',
            //url: 'test1.txt',
            data: 'data',
            dataType: 'json',
            success: function(data) {
                alert(data);
            }
        });
    });

} //end of  checkFormData​

Upvotes: 1

Views: 4446

Answers (1)

jk.
jk.

Reputation: 14435

url should be lowercase or it will not work.

Change this:

$.ajax({
   URL: 'writeFormData.php',

To this:

$.ajax({
    url: 'writeFormData.php',

Here is a tut on .ajax and .post: jQuery.ajax and jQuery.post Form Submit Examples with PHP

Upvotes: 1

Related Questions