JQuery 양식 제출 질문?

Question

저는 JQuery를 처음 접했고 사용자가 변경 사항을 제출할 때 다음 텍스트를 어떻게 표시 할 수 있는지 궁금합니다. <p>Your changes have been saved.</p>? 이 메시지를 표시하도록 내 코드를 수정하려면 어떻게합니까?

JQuery 스크립트.

$(function() { 

$(".save-button").click(function() { 
    $.post($("#contact-form").attr("action"), $("#contact-form").serialize(), function(html) { 
     $("div.contact-info-form").html(html); 
    }); 
    return false; // prevent normal submit 
}); 

}); 

여기에 html이 있습니다. 콜백 함수에서

<div id="contact-info-form" class="form-content"> 

<h2>Contact Information</h2> 
<form method="post" action="index.php" id="contact-form"> 
<fieldset> 
<ul> 
<li><label for="address">Address 1: </label><input type="text" name="address" id="address" size="25" class="input-size" value="<?php if (isset($_POST['address'])) { echo $_POST['address']; } else if(!empty($address)) { echo $address; } ?>" /></li> 
<li><label for="address_two">Address 2: </label><input type="text" name="address_two" id="address_two" size="25" class="input-size" value="<?php if (isset($_POST['address_two'])) { echo $_POST['address_two']; } else if(!empty($address_two)) { echo $address_two; } ?>" /></li> 
<li><label for="city_town">City/Town: </label><input type="text" name="city_town" id="city_town" size="25" class="input-size" value="<?php if (isset($_POST['city_town'])) { echo $_POST['city_town']; } else if(!empty($city_town)) { echo $city_town; } ?>" /></li> 
<li><label for="state_province">State/Province: </label> 
<?php 

echo '<select name="state_province" id="state_province">' . "\n"; 
    foreach($state_options as $option) { 
    if ($option == $state_province) { 
     echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; 
    } else { 
     echo '<option value="'. $option . '">' . $option . '</option>'."\n"; 
    } 
    } 
echo '</select>'; 

?> 
</li> 

<li><label for="zipcode">Zip/Post Code: </label><input type="text" name="zipcode" id="zipcode" size="5" class="input-size" value="<?php if (isset($_POST['zipcode'])) { echo $_POST['zipcode']; } else if(!empty($zipcode)) { echo $zipcode; } ?>" /></li> 

<li><label for="country">Country: </label> 
<?php 

echo '<select name="country" id="country">' . "\n"; 
    foreach($countries as $option) { 
    if ($option == $country) { 
     echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n"; 
    } 
    else if($option == "-------------") { 
     echo '<option value="' . $option . '" disabled="disabled">' . $option . '</option>'; 
    } 
    else { 
     echo '<option value="'. $option . '">' . $option . '</option>'."\n"; 
    } 
    } 
echo '</select>'; 

?> 
</li> 

<li><label for="email">Email Address: </label><input type="text" name="email" id="email" size="25" class="input-size" value="<?php if (isset($_POST['email'])) { echo $_POST['email']; } else if(!empty($email)) { echo $email; } ?>" /><br /><span>We don't spam or share your email with third parties. We respect your privacy.</span></li> 

<li><p>Changes have been saved</p><input type="submit" name="submit" value="Save Changes" class="save-button" /> 
    <input type="hidden" name="contact_info_submitted" value="true" /> 
<input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li> 
</ul> 
</fieldset> 

</form> 

</div> 

Answer 1

:

$.post($("#contact-form").attr("action"), $("#contact-form").serialize(), function(html) { 
    $("div.contact-info-form").html(html); 
    $('.yourConfirmationDiv').html('<p>Changes saved!</p>'); 
}); 

Answer 2

당신은 당신이 오류 및 대기 시간 등의 많은 이벤트를 처리 할 수있는 $.ajax를 사용할 수 있습니다. 양식 위를 표시하려면

$.ajax({ 
    url: $("#contact-form").attr("action"), 
    type: "POST", 
    data: $("#contact-form").serialize(), 
    success: function(html){ 
     $("div.contact-info-form").html(html); 
     // Add saved message to DOM 
    } 
    error: function(error){ 
     // Handle error 
    } 
}); 

Answer 3

, 그냥 이렇게 :

$(function() { 
    $(".save-button").click(function() { 
    $.post($("#contact-form").attr("action"), $("#contact-form").serialize(), 
     function(html) { 
     $("div.contact-info-form") 
       .html("<p>Your changes have been saved.</p>" + html); 
     }); 
     return false; // prevent normal submit 
    }); 
});