Nested form submitting parent form

Question

Having a problem with implementing an address finder at the moment. I have it all working on it's own, I give postcodeanywhere the postcode via json, it chucks back the addresses which I put in a select and then I give it back the chosen addresses id.

The problem comes when I integrate it into my shops checkout page. I do the address lookups via post and get in a form. When I hit the submit button for the address lookup it submits then whole shopping form as if I was going to buy something.

What I'm wondering is, if there's a better way to do it, i.e. not with forms or how to have a form within a form and only trigger the nested forms actions. I assume I could use ajax but haven't been able to get anything working and assume this would still use the form element anyway?

Answer 1

You can stop the default form sublit

$('#form').submit(function (evt) {
    evt.preventDefault();
    //do your postal code job
    $('#form').submit();
});

Answer 2

Though you can have several <form> elements in one HTML page, you cannot nest them.

You should use ajax/jquery ajax for address lookups

http://www.w3.org/MarkUp/html3/forms.html

Answer 3

You could just use event.stopPropagation() on the nested form submit handler