ajax to pass form data to another php page

Question

Hi guys I need help I have a form on one php page and want to use ajax to pass to another php page that will update my DB then return the results.

   <form name="profile" class="profile">
        <table>
            <tbody>
                <tr>
                    <td><lable>First Name: </lable><input type="text" class="input1" id="fname" name="fname" value="<?php echo $fname[0]; ?>" /></td>
                    <td><lable>Last Name: </lable><input type="text" class="input1" id="lname" name="lname"  value="<?php echo $fname[1]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>Email: </lable><input type="text" class="input1" id="email" name="email"  value="<?php echo $fname[2]; ?>" /></td>
                    <td><lable>Phone: </lable><input type="text" class="input1" id="phone" name="phone"  value="<?php echo $fname[3]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>Address 1: </lable><input type="text" class="input1" id="add1" name="add1"  value="<?php echo $fname[4]; ?>" /></td>
                    <td><lable>Address 2: </lable><input type="text" class="input1" id="add2" name="add2"  value="<?php echo $fname[5]; ?>" /></td>
                </tr>
                <tr>
                    <td><lable>City: </lable><input type="text" class="input1" id="city" name="city"  value="<?php echo $fname[6]; ?>" /></td>
                    <td><lable>State: </lable><input type="text" class="input1" id="state" name="state"  value="<?php echo $fname[7]; ?>" /></td>
                    <td>zip: </lable><input type="text" class="input1" id="zip" name="zip"  value="<?php echo $fname[8]; ?>" /></td>    
                </tr>
                <tr>
                    <td><lable>Occupation: </lable><input type="text" class="input1" id="job" name="job"  value="<?php echo $fname[9]; ?>" /></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Save" onclick="profileSave();" /></td>
               </tr>
           </tbody>
       </table>

Ajax

function profileSave() {
    var fname = $('#fname').val();      var phone = $('#phone').val();      var city = $('#city').val();
    var lname = $('#lname').val();      var add1 = $('#add1').val();        var state = $('#state').val;
    var email = $('#email').val();      var add2 = $('#add2').val();        var zip = $('zip').val;

    var request = $.ajax({
        url: "save_profile.php",
        type: "post",           
        data: {fname: fname, lname: lname, email: email, phone: phone, add1: add1, add2: add2, city: city, state: state, zip: zip}
    });

    request.done(function(msg) {
        $("#profile").html(msg);            
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });
}

When you click the save but the screen refreshes but doesnt update the db with the information that was edited on the form. Please help thank you.

Answer 1

Are you closing the form? you have not shown the </form> tag. Also - why dont you simply serialize the form to get all the values - rather than using js to get each value, but dont forget to give each input a name.

var formData = $('[name=profile]').serialize();

and then in the AJAX;

data: formData;

also for your labels - you should tie them to the id of the input (for screen readers and accessibility:

<label for="fname">First Name: </label>
<input type="text" class="input1" id="fname"....

Answer 2

Add event.preventDefault(); at the end of your function