按提交时,表单不执行任何操作

时间:2014-09-05 13:24:10

标签: javascript jquery html forms

表单缺少一个动作网址,因为javascript负责处理。

我最近解决了一个问题,即没有将提交按钮标记为type=submit,在点击提交时导致ie 6和7 not do anything ..

但是,当有人按下提交按钮时,我最近仍然抱怨表单没有做任何事情。

我唯一的猜测是他们禁用了javascript ... 如果有人对此有其他观点请看看。 Could be old Browsers issue, could be code issue..

的jsfiddle

http://jsfiddle.net/wn21av2y/1/

HTML

<form id="form1" name="form1" method="post" style="transition: 3s height; overflow: hidden;">
    <table width="100%" border="0" cellspacing="2" cellpadding="5">
        <tbody>
            <tr>
                <td width="25%" align="right">Practitioner's Full Name<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="name" type="text" required="" pattern=".{3,}">
                </td>
            </tr>
            <tr>
                <td width="25%" align="right">Type<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <select name="type" required="">
                        <option value="MD">MD</option>
                        <option value="OD">OD</option>
                        <option value="OTHER">OTHER</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">Street Address<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="address" type="text" required="" pattern=".{3,}">
                </td>
            </tr>
            <tr>
                <td align="right">City<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="city" type="text" required="" pattern=".{3,}">
                </td>
            </tr>
            <tr>
                <td align="right">State<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <select name="state" id="state" required="">
                        <option value="AL" selected="">Alabama</option>
                        <option value="AK">STATES</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">Zip<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="zip" type="text" placeholder="12345-1234" required="" pattern="(\d{5}([\-]\d{4})?)">
                </td>
            </tr>
            <tr>
                <td align="right">Phone<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="phone" type="text" required="" placeholder="123-456-7890" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
                </td>
            </tr>
            <tr>
                <td align="right">Email<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="email" type="email" required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </td>
            </tr>
            <tr>
                <td align="right">Signature ( Type Name )<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="sig" type="text" required="" pattern=".{3,}">
                </td>
            </tr>
            <tr>
                <td align="right">Today's Date<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input type="text" class="datepicker date1" required="">
                </td>
            </tr>
            <tr>
                <td align="right">State License Number<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input name="lic_numb" type="text" required="" pattern=".{3,}">
                </td>
            </tr>
            <tr>
                <td align="right">License Exp. Date<span style="color:red;">*</span>
                </td>
                <td style="text-align: left">
                    <input type="text" class="datepicker date2" required="">
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <input name="check1" type="checkbox" value="" required=""><span style="color:red;">*</span>
                </td>
                <td style="text-align: left">My signature certifies that
                    <br>1) The information provided</td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <input name="check2" type="checkbox" value="" required=""><span style="color:red;">*</span>
                </td>
                <td style="text-align: left">I verify that the recipient is eligible to receive samples.<br>
                </td>
            </tr>
            <tr>
                <td width="25%" align="right">&nbsp;</td>
                <td style="text-align: left">
                    <button type="submit" class="submits">Submit</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

脚本

jQuery(function($) {
            $(".datepicker").datepicker({
                numberOfMonths: 3,
                showButtonPanel: true
            });
            $("#form1").submit(function() {
                var url = "example.com/process.php"; // the script where you handle the form input.
                $.post(url, {
                    name: $("input[name='name']").val(),
                    type: $("select[name='type'] option:selected").text(),
                    address: $("input[name='address']").val(),
                    city: $("input[name='city']").val(),
                    state: $("select[name='state'] option:selected").text(),
                    zip: $("input[name='zip']").val(),
                    phone: $("input[name='phone']").val(),
                    email: $("input[name='email']").val(),
                    sig: $("input[name='sig']").val(),
                    date: $(".date1").datepicker("getDate"),
                    lic_numb: $("input[name='lic_numb']").val(),
                    lic_date: $(".date2").datepicker("getDate"),
                    code: 'tEH4s'
                }).done(function(data) {
                    $(".result").html(data);
                    $('input').val('');
                    $('#form1').css("height", "0");
                });
                return false; // avoid to execute the actual submit of the form.
            });
        });

2 个答案:

答案 0 :(得分:0)

在我看来,你需要对提交的表单采取行动,正如w3c HTML 4 spec.

所说的那样。

答案 1 :(得分:0)

  

需要注意的一个重要问题:在包含&lt; button /&gt;的表单中元素,当&lt; button /&gt;时,IE6和IE7不会提交表单。单击元素。另一方面,其他浏览器将提交表单。 - Source

要使其在IE6和IE7中正常工作,您需要将button标记更改为:

<input type="submit" class="submits" value="Submit" />