ajax передать данные формы на другую страницу php

Question

Привет, ребята Мне нужна помощь У меня есть форма на одной php-странице, и я хочу использовать ajax для перехода на другую страницу php, которая обновит мою БД, а затем вернет результаты.

<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); 
    }); 
} 

При нажатии на сохранить, но экран освежают, но оленья кожа обновить БД с информацией, отредактированные на форме. Пожалуйста, помогите поблагодарить вас.

Answer 1

Закрываете ли вы форму? вы не указали тег </form>. Кроме того, почему бы вам просто не сериализовать форму, чтобы получить все значения, а не использовать js для получения каждого значения, но не забудьте указать каждому вводу имя.

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

а затем в AJAX;

data: formData; 

также для наклеек - вы должны связать их с идентификатором входа (для чтения с экрана и доступность:

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

Answer 2

Добавить event.preventDefault(); в конце вашей функции