form.serialize()不起作用

时间:2014-05-02 12:10:55

标签: javascript php jquery ajax

我对此问题感到震惊,我有一个名为view employee的页面,当我们点击显示所有雇员时,我为每个员工编辑按钮,下面是相应的页面

echo "<form class="form-horizontal id="update_form" name="update_form" method="POST" action="update_employee_details.php" enctype="multipart/form-data">
    <legend>Edit Employee details for '.$id.'</legend>
    <div class="control-group">
        <label class="control-label" for="emp_image">Employee Image</label>
        <div class="controls">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="fileupload-preview thumbnail" style="width: 100px; height: 100px;" id="emp_image_preview">
                    <img id="blah" src="upload/default_pic.jpg" alt="Preview" width="100" height="100" />
                </div>
                <div> <span class="btn btn-file"><span class="fileupload-new">
        </span><span class="fileupload-exists"></span>
                    <input type="file" id="emp_image" name="file" onChange="readURL(this);" />
                    </span>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="flag_id" name="flag_id" value='.$id.'>
    <div class="control-group">
        <label class="control-label" for="emp_id">Employee Id</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_id2" name="emp_id2" type="text" value="'.$id.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_fname">Firstname</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_fname" name="emp_fname" type="text" value="'.$fname.'" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_lname">Lastname</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_lname" name="emp_lname" type="text" value="'.$lname.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_username">Username</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_username" name="emp_username" type="text" value="'.$username.'" name="emp_username">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_password">Password</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_password" name="emp_password" type="password" value="'.$password.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_repassword">Re-Password</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_repassword" name="emp_repassword" type="password" value="'.$password.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_gender">Gender</label>
        <div class="controls">
            <select class="form-control" id="emp_gender" name="emp_gender">
                <option value="'.$gender.'">'.$gender.'</option>
                <option value="">-select--</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_email">E-mail</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_email" name="emp_email" type="text" value="'.$email.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_contact">Contact no</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_contact" name="emp_contact" type="text" value="'.$contactno.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_dob">Date of Birth</label>
        <div class="controls">
            <input type="text" class="input-xlarge datepicker" id="emp_dob" name="emp_dob" value="'.$dateofbirth.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_id_type">Id Card Type</label>
        <div class="controls">
            <select class="form-control" id="emp_id_type" name="emp_id_type" selected="'.$idcardtype.'">
                <option value="'.$idcardtype.'">'.$idcardtype.'</option>
                <option value="">--select--</option>
                <option value="Aadhar card">Aadhar Card</option>
                <option value="credit card issued by bank">credit Card issued by bank</option>
                <option value="Driving licence">Driving licence</option>
                <option value="Nationalize bank passbook">Nationalize bank passbook</option>
                <option value="Pan card">Pan card</option>
                <option value="Passport">Passport</option>
                <option value="Student Id Card">Student Id Card</option>
                <option value="Voters id card">Voters id card</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_id_number">Id Card Number</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_id_number" name="emp_id_number" type="text" value="'.$idcardno.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_per_address">Permanent Address</label>
        <div class="controls">
            <textarea class="input-xlarge textarea" id="emp_per_address" style="width: 310px; height: 150px">'.$peraddress.'</textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_temp_address">Temparary Address</label>
        <div class="controls">
            <textarea class="input-xlarge textarea" id="emp_temp_address" style="width: 310px; height: 150px">'.$tempaddress.'</textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_designation">Designation</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_designation" name="emp_designation" type="text" value="'.$designation.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_role">Role</label>
        <div class="controls">
            <select class="form-control" id="emp_role" name="emp_role">
                <option value="administrator">Administrator</option>
                <option value="fulltime">Fulltime</option>
                <option value="parttime">Parttime</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_department">Department</label>
        <div class="controls">
            <select class="form-control" id="emp_department" name="emp_department">
                <option value="'.$department.'">'.$department.'</option>
                <option value="">--select--</option>
                <option value="Accounts">Accounts</option>
                <option value="Event management">Event management</option>
                <option value="Software">Software</option>
                <option value="Tele-caller">Tele-caller</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_joining_date">Date of Joining</label>
        <div class="controls">
            <input type="text" class="input-xlarge datepicker" id="emp_joining_date" name="emp_joining_date" value="'.$dateofjoining.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_alloted_leaves">No of alloted leaves</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_alloted_leaves" name="emp_alloted_leaves" type="text" value="'.$allotedleaves.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_salary">Salary</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_salary" name="emp_salary" type="text" value="'.$salary.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_previous_company">Previous Company</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_previous_company" name="emp_previous_company" type="text" value="'.$salary.'">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emp_off_timing">Office Timing</label>
        <div class="controls">
            <input class="input-xlarge focused" id="emp_off_timing_in" name="emp_off_timing_in" type="text" value="'.$timing.'" placeholder="in time">
        </div>
    </div>
    <button type="submit" class="btn btn-primary" id="btn_save_changes" name="btn_save_changes" value="submit">Submit</button>
    <button type="reset" class="btn" id="btn_cancel">Cancel</button>
</form>";

我的js部分在这里

$(document).on('click', '#btn_save_changes', function (event) {

    var formValues = $('#update_form').serialize();

    alert(formValues);
    $.ajax({
        url: 'view_edit_delete/update_employee_details.php',
        type: 'POST',
        data: formValues,
        success: function (response) {
            alert(response);
        }
    }

    });

});

当我使用警报时,我变空了:-(。我尝试了一切var formValues= new FormData($(this)[0]);     但仍然没有结果

3 个答案:

答案 0 :(得分:1)

你错过了(“) 在

 <form class="form-horizontal" id="update_form"

在«form-horizo​​ntal»之后

的情况

 <form class="form-horizontal id="update_form"

表单的ID变为“update_form”(带有前导空格),$('#update_form')没有任何内容。

调试应用程序时,请不要犹豫,按F12并使用控制台手动尝试代码的简单部分。使用控制台很容易发现$('#update_form')找不到元素。然后调查它为什么会发生。

答案 1 :(得分:1)

首先请不要将您的HTML代码放在php中。

然后

<form class="form-horizontal
    <form class="form-horizontal"

关闭班级标签

并且标准不要将HTML代码与PHP混合。

用于设计使用格式良好的HTML代码并在html标签中提供动态性放置php值。它的工作很简单,使代码易于理解。

答案 2 :(得分:-1)

执行:php里面的html ... 不要:html里面的php echo语句...... 不要简单地在php中使用echo来获取html标签,为什么因为像netbeans这样的IDE不会出现错误你在php echo语句中提出的错误。这不是编码的最佳实践。或者如果你真的需要在你想要的地方使用php,你可以使用“&gt;而不是echo”..