Form does not do anything when pressing Submit

Question

The form is missing an action url, since the javascript takes care of that.

I recently fixed an issue with not labeling the submit button as type=submit that caused ie 6 and 7 to not do anything when clicking on the submit..

But I recently still get complains on the form not doing anything when someone presses the submit button.

My only last guess would be that they disabled javascript... If anyone have some other point of view on this Please Take a look. 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>

script

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

Not giving the `action` in a form is only valid in HTML5. Older browsers that don't support HTML5 might not run accordingly if this attribute is missing. That also includes not submitting it. — Spokey, Sep 05 '14 at 13:29
Are you using `console` at all in your production code? That'll blow up IE. — Jack, Sep 05 '14 at 13:35
@Spokey hmm Thats a valid suggestion. I will try this but the issue is I have no idea how the error is reproduced. — vico, Sep 05 '14 at 13:44
You can try using IE developer console. It has options to view the website using older versions of IE Document. Not knowing exaclty what browser the user uses means you have to try all of them — Spokey, Sep 05 '14 at 14:00

Daniel Schmidt · Answer 1 · 2014-09-05T15:05:34.383

0

To my mind you need an action for the form to be submitted, as it's said at the w3c HTML 4 spec.

edited Sep 05 '14 at 15:05

answered Sep 05 '14 at 13:29

Daniel Schmidt

10,316
4
32
63

Nope, will submit without it. Just to itself. Not to mention OP says not to use `action` but JS instead. – putvande Sep 05 '14 at 13:31
@DanielSchmidt Why do you think so? I hope you can explain why you think so. – Regent Sep 05 '14 at 13:31
@Regent I think is written here: http://www.w3.org/TR/html401/interact/forms.html#h-17.3 Action seems to be required. – Daniel Schmidt Sep 05 '14 at 15:06

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form. - Source

To get it to work in IE6 and IE7 you need to change the button tag to instead be:

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

edited May 23 '17 at 12:29

Community

1
1

answered Sep 05 '14 at 13:36

David Sherret

82,097
24
165
160

I have already done testing on IE7 and it seems to work as is. as much issue as IE have this might not be it. – vico Sep 05 '14 at 13:42
@vico and you also tried specifying an `action` attribute to the form and it doesn't work? – David Sherret Sep 05 '14 at 14:00
I can only reproduce this issue when someone disable javascript, with the action url added it goes directly to the target page, or before hand it does nothing at all. – vico Sep 05 '14 at 14:20
@vico you could try to just attach the event to the button click rather than listen for the form submit. – David Sherret Sep 05 '14 at 14:58

Form does not do anything when pressing Submit

JSfiddle

HTML

script

2 Answers2