I realise this has been asked a myriad of times in the past - though I have looked through 4 or 5 of these threads and for the life of me I cannot figure out what is causing my form to redirect! Please help!

Here is my form submission function: Every time I select an option from my element, the form fires off and (successfully) posts to form.php, though it also redirects even though I've included event.preventDefault(); Can you spot anything that may be blocking this?

<script type="text/javascript">
$(document).ready(function(){
   $('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
});

});

function select(){
    error(0);

    $.ajax({
        type: "POST",
        url: "form.php",
        data: $('#quote_form').serialize(),
        dataType: "json",
        cache: false,
        success: function(data)
        {
            $("#graph_var_1").html(data.message1);
            $("#graph_var_2").html(data.message2);
            $("#graph_var_3").html(data.message3);
            $("#graph_var_4").html(data.message4);
        }

    });

}


function result(act,txt)
{
    if(txt) $('#subcategory').html(txt);
}
</script>

EDIT: I was mucking around with it before posting (trying to get it to work) and must have missed the (e) (event) inconsistency - though I have changed it back and still no luck. Any ideas?

HTML:

<form id="quote_form" name="quote_form" method="post" action="form.php">
                    <label>Quarterly Power Bill Value</label>
                    <select name="bill_value" id="bill_value" size='1' onChange='this.form.submit();'>
                        <option value="200">200</option>
                        <option value="250">250</option>
                        <option value="300">300</option>
                        <option value="350">350</option>
                        <option value="400">400</option>
                        <option value="450">450</option>
                        <option value="500">500</option>
                        <option value="550">550</option>
                        <option value="600">600</option>
                        <option value="650">650</option>
                        <option value="700">700</option>
                        <option value="750">750</option>
                        <option value="800">800</option>
                        <option value="850">850</option>
                        <option value="900">900</option>
                        <option value="950">950</option>
                        <option value="1000">1000</option>
                        <option value="1050">1050</option>
                        <option value="1100">1100</option>
                        <option value="1150">1150</option>
                        <option value="1200">1200</option>
                        <option value="1250">1250</option>
                        <option value="1300">1300</option>
                        <option value="1350">1350</option>
                        <option value="1400">1400</option>
                        <option value="1450">1450</option>
                        <option value="1500">1500</option>
                        <option value="1550">1550</option>
                        <option value="1600">1600</option>
                        <option value="1650">1650</option>
                        <option value="1700">1700</option>
                        <option value="1750">1750</option>
                        <option value="1800">1800</option>
                        <option value="1850">1850</option>
                        <option value="1900">1900</option>
                        <option value="1950">1950</option>
                        <option value="2000">2000</option>
                        <option value="2050">2050</option>
                        <option value="2100">2100</option>
                        <option value="2150">2150</option>
                        <option value="2200">2200</option>
                        <option value="2250">2250</option>
                        <option value="2300">2300</option>
                        <option value="2350">2350</option>
                        <option value="2400">2400</option>
                        <option value="2450">2450</option>
                        <option value="2500">2500</option>
                        <option value="2550">2550</option>
                        <option value="2600">2600</option>
                        <option value="2650">2650</option>
                        <option value="2700">2700</option>
                        <option value="2750">2750</option>
                        <option value="2800">2800</option>
                        <option value="2850">2850</option>
                        <option value="2900">2900</option>
                        <option value="2950">2950</option>
                        <option value="3000">3000</option>
                    </select><br />
                    <label>Approx Power Usage between 8am to 4pm</label>
                    <select name="peak_usage" id="peak_usage" size='1' onChange='this.form.submit();'>
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                        <option value="40">40%</option>
                        <option value="50">50%</option>
                        <option value="60">60%</option>
                        <option value="70">70%</option>
                        <option value="80">80%</option>
                        <option value="90">90%</option>
                        <option value="100">100%</option>
                    </select><br />

                </form>

Console: only shows a couple of missing image errors, nothing else.

SOLUTION: Turns out this was being caused by the way my form was submitting. I replaced the OnClick calls with a submit button - and it worked.

I realise this has been asked a myriad of times in the past - though I have looked through 4 or 5 of these threads and for the life of me I cannot figure out what is causing my form to redirect! Please help!

Here is my form submission function: Every time I select an option from my element, the form fires off and (successfully) posts to form.php, though it also redirects even though I've included event.preventDefault(); Can you spot anything that may be blocking this?

<script type="text/javascript">
$(document).ready(function(){
   $('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
});

});

function select(){
    error(0);

    $.ajax({
        type: "POST",
        url: "form.php",
        data: $('#quote_form').serialize(),
        dataType: "json",
        cache: false,
        success: function(data)
        {
            $("#graph_var_1").html(data.message1);
            $("#graph_var_2").html(data.message2);
            $("#graph_var_3").html(data.message3);
            $("#graph_var_4").html(data.message4);
        }

    });

}


function result(act,txt)
{
    if(txt) $('#subcategory').html(txt);
}
</script>

EDIT: I was mucking around with it before posting (trying to get it to work) and must have missed the (e) (event) inconsistency - though I have changed it back and still no luck. Any ideas?

HTML:

<form id="quote_form" name="quote_form" method="post" action="form.php">
                    <label>Quarterly Power Bill Value</label>
                    <select name="bill_value" id="bill_value" size='1' onChange='this.form.submit();'>
                        <option value="200">200</option>
                        <option value="250">250</option>
                        <option value="300">300</option>
                        <option value="350">350</option>
                        <option value="400">400</option>
                        <option value="450">450</option>
                        <option value="500">500</option>
                        <option value="550">550</option>
                        <option value="600">600</option>
                        <option value="650">650</option>
                        <option value="700">700</option>
                        <option value="750">750</option>
                        <option value="800">800</option>
                        <option value="850">850</option>
                        <option value="900">900</option>
                        <option value="950">950</option>
                        <option value="1000">1000</option>
                        <option value="1050">1050</option>
                        <option value="1100">1100</option>
                        <option value="1150">1150</option>
                        <option value="1200">1200</option>
                        <option value="1250">1250</option>
                        <option value="1300">1300</option>
                        <option value="1350">1350</option>
                        <option value="1400">1400</option>
                        <option value="1450">1450</option>
                        <option value="1500">1500</option>
                        <option value="1550">1550</option>
                        <option value="1600">1600</option>
                        <option value="1650">1650</option>
                        <option value="1700">1700</option>
                        <option value="1750">1750</option>
                        <option value="1800">1800</option>
                        <option value="1850">1850</option>
                        <option value="1900">1900</option>
                        <option value="1950">1950</option>
                        <option value="2000">2000</option>
                        <option value="2050">2050</option>
                        <option value="2100">2100</option>
                        <option value="2150">2150</option>
                        <option value="2200">2200</option>
                        <option value="2250">2250</option>
                        <option value="2300">2300</option>
                        <option value="2350">2350</option>
                        <option value="2400">2400</option>
                        <option value="2450">2450</option>
                        <option value="2500">2500</option>
                        <option value="2550">2550</option>
                        <option value="2600">2600</option>
                        <option value="2650">2650</option>
                        <option value="2700">2700</option>
                        <option value="2750">2750</option>
                        <option value="2800">2800</option>
                        <option value="2850">2850</option>
                        <option value="2900">2900</option>
                        <option value="2950">2950</option>
                        <option value="3000">3000</option>
                    </select><br />
                    <label>Approx Power Usage between 8am to 4pm</label>
                    <select name="peak_usage" id="peak_usage" size='1' onChange='this.form.submit();'>
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                        <option value="40">40%</option>
                        <option value="50">50%</option>
                        <option value="60">60%</option>
                        <option value="70">70%</option>
                        <option value="80">80%</option>
                        <option value="90">90%</option>
                        <option value="100">100%</option>
                    </select><br />

                </form>

Console: only shows a couple of missing image errors, nothing else.

SOLUTION: Turns out this was being caused by the way my form was submitting. I replaced the OnClick calls with a submit button - and it worked.

• javascript
• php
• jquery
• forms

Share Improve this question Follow edited Jul 22, 2014 at 5:47 Tainted asked Jul 22, 2014 at 5:18 TaintedTainted 33711 gold badge55 silver badges1717 bronze badges 6

• Could you supply your form html code? – Darren Commented Jul 22, 2014 at 5:22
• Weird how the existing answers and the question do not line up. I am guessing there was a stealth edit to the question. – epascarello Commented Jul 22, 2014 at 5:24
• Set preserve console on page navigation and see if there are errors in the console. – epascarello Commented Jul 22, 2014 at 5:25
• @epascarello yeah sorry I was trying to reply to the answers and they all came so fast - struggling to keep up haha. – Tainted Commented Jul 22, 2014 at 5:27
• Why are you calling submit and not just a function that does the Ajax call? – epascarello Commented Jul 22, 2014 at 5:29

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

here is the mistake, your parameter name is e while you are using event when calling preventDefault():

 $('#quote_form').submit(function(e) {
-----> event.preventDefault();    ^
                                  |
                                  |

change it to match the parameter name:

 $('#quote_form').submit(function(event) {
    event.preventDefault();

or:

 $('#quote_form').submit(function(e) {
    e.preventDefault();

or another way:

 $('#quote_form').submit(function() {
        select();
        return false;
});

Try this:

$('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
});

instead of:

$('#quote_form').submit(function(e) {
    event.preventDefault();//error event is undefinded
    select();
});

Update

If you add onclick="this.form.submit()" its submitting form and firing jquery submit event. I found a solution:

remove onclick from select and add click event in document.ready, also remove error(0) its giving error error not defined.

$("#peak_usage").change(function(){
    $('#quote_form').submit();
});

You can also set:

<select name="peak_usage" id="peak_usage" size='1' onchange="$('#quote_form').submit();">
                                                              ^^^^^^^^^^^^^^^^^^^^^^^^

Reason: Because this.form will give you the form of the form element. and $('#quote_form') gives you form object.

DEMO

Either try to change the event to e

$('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
}

Or change the button type of quote_form to button from submit and give click event on that like

$('#quote_form').click(function() {
    select();
}

You have parameter variable e and using event inside function. So change parameter variable to event or make e.preventDefault()

$(document).ready(function(){
   $('#quote_form').submit(function(event) {// (e) change to (event)
    event.preventDefault();
    select();
});