jquery .form.js的使用方法

1dd a form to your page. Just a normal form, no special markup required: <form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

------------------------------------------------
2Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOM is ready: <html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script>
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function() {
                alert("Thank you for your comment!");
            });
        });
    </script>
</head>
...
----------------------------------------------------
举一个小例子
<script type="text/javascript">

</script>

<form id="personal" enctype="multipart/form-data" method="post">
<input type="hidden" id="photoName" name="photoName"/>
<input type="hidden" id="updateEditType" name="editType" value="update"></input>
</form>

<p><button onclick="submit()" 修改button></p>

-----------------------------
var personal = {
url: "",
beforeSubmit: showRequest,
success:       showResponse
};

function showRequest(formData, jqForm, options) {
$('#msg').show();
return true;
}

function showResponse(responseText, statusText) {
$('#msg').html("操作完成！").hide();
alert("操作成功！");
$('#msg').hide();
                //修改id="photo"的src属性
document.getElementById('photo').src = "";
        $('#createEditType').val('update');
}

function submit(){
var photoName = document.getElementById('photoName').value;
if (photoName == "") {
alert("no,no,no,photo！");
return false;
}
$('#personal').ajaxSubmit(personalPortraitOptions);

}

jquery .form.js的使用方法

猜你喜欢