type=submit issue

[davidandrew]

Hi Guys

On the basket page I removed type=submit from the checkout input form element as I have an onClick event running some javascript to submit the form. If i don't remove type=submit I get JS error saying document.myForm.submit() is not a function.

Problem:

My update button when clicked refreshes the screen to show checkout page with the updated amount.

Any insight much appreciated

D

[NormanRouxel]

My update button when clicked refreshes the screen to show checkout page with the updated amount.I'm confused. That's exactly what I'd expect the Update button to do.

As to the JS. Do you mean document.myForm.onsubmit()

Without you posting the Form tag, the submit code and any supporting JS it's hard to help.

[davidandrew]

Hi Norman

Thanks for replying. It was late and I was tired last night so let me clarify.

I want to do some validation on my basket form.

To call the validation function I add an onClick event to my checkout button.

(The form tag is dynically generated and I can't add a onsubmit to it)

In the JS I am using document.myform.submit(); to submit the form if validation passes.

In order to stop the form submiting when checkout button is clicked I have removed type=submit from the button.

Reasons for removeing type=submit are:

1) stop the button click submitting the form irrespective of the JS result.
2) So the JS can take care of the form submission if the condition was true.
3) I get an JS error message of 'document.myform.submit(); is not a function'.

When I action the code all works as expected. If validation true the form submits, otherwise the form dosn't submit.

input buttons in form:

<input name="ACTION" value="Update" type="submit">
<input name="ACTION" value="Return to the catalog" type="submit">
<input name="ACTION" value="Checkout Now" onclick="myFunction()"></td>

When "checkout now" is clicked myFunction() is called.

function myFunction() {
do some stuff;
if (conditional test is false) {
alert("show this message");
} else {
document.myform.submit(); // submits the form
}
}

The problem is when "update" is clicked.

Instead of updating the quantity and showing the basket page, the page refreshes and shows the checkout page with the updated amount, like an update and checkout combined.

[NormanRouxel]

The problem with your approach is that the form has several submit buttons. You will need to submit only the button in question programatically. Try this:

1) Restore the type="submit" to that button.

2) Change your JS in the button to return the result of the function.

<input type="submit" name="ACTION" value="Checkout Now" onclick="return myFunction()"></td>


3) Change the JS to return true / false as appropriate.

function myFunction() {
do some stuff;
if (conditional test is false)
{
alert("show this message");
return false; // inhibit click
}
return true; // allow click
}

[davidandrew]

Thanks Norman!

Got it working now.