-1

I have 2 buttons on a form.

One button is used to move to the next screen (hiding a div and show another) and the other button should be used to submit the form.

The second button should validate and submit the form.

For validation I'm using jQuery Validation Plugin with floating Qtyp to show float messages.

Currently the first button NEXT validates that the fields are not empty, then go to the next step, but the SEND button does nothing.

This is the code that I have, I watch it to understand the idea: FIDDLE

In summary:

Button NEXT: confirms that the fields are not empty then hide the tab1 and show tab2 (it already does).

Button SEND: confirms once again that the fields are not empty and then send the form to a page process.php (I do not know how to do this)

How could I? Please review the link to understand.

Greetings!

Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
Nacho Sarmiento
  • 463
  • 3
  • 8
  • 17
  • 1
    You must include the code in the question itself. – Sparky Dec 26 '13 at 17:35
  • Although I think [you could do it better with multiple form elements](http://stackoverflow.com/questions/20683351/how-can-i-do-a-conditional-success-check-with-the-jquery-validation-plugin/20688216#20688216), your jsFiddle is working fine for me. Clicking "send" redirects to the form action, `procesar.php`, then the page does nothing only because jsFiddle has no access to this file. – Sparky Dec 27 '13 at 04:50
  • Sparky, I'm trying your solution. The problem is that when I press the next button, load form 2 a second and returns to show the Form 1 (as if the page will reload). I check and I don't find that I can be doing wrong. – Nacho Sarmiento Dec 27 '13 at 17:10
  • The only button that is `type="submit"` is the button on the last `form`. – Sparky Dec 27 '13 at 17:12
  • I did not post an answer to your question, only my link as a suggestion, because your question is so poorly written. The jsFiddle you posted appears to be working as expected with your "send" button correctly firing the form action. – Sparky Dec 27 '13 at 17:15
  • Still same problem. In fact, the data are sent via GET (in the url I listed: name = & last_name = + Nacho Sarmiento). I will create a new Fiddle and give you the link. – Nacho Sarmiento Dec 27 '13 at 17:18
  • Again, I guess you didn't get the hint... **I am not answering your question in its present form.** Once you follow the posting rules and edit/fix your question, I will be happy to post an answer below. Carefully read and follow items 2 & 3 listed on [this page](http://stackoverflow.com/help/on-topic) for guidance. – Sparky Dec 27 '13 at 17:27

1 Answers1

-2

I have tried to do the thing for you, here's what i have done.

http://fiddle.jshell.net/9sgKz/10/

I have captured which submit button is clicked i.e Next or Send and accordingly either hide tab1 and show tab2 or submit the form.

Hope this helps you in acheiving what your upto.

Sunil Verma
  • 2,490
  • 1
  • 14
  • 15
  • 1
    It works, but the problem is that the page freezes for a few seconds (as if processing something) before performing the action (including the mouse pointer freezes). What could happen? – Nacho Sarmiento Dec 26 '13 at 16:02
  • Please show your code in the answer itself. Answers should be self contained. Also, your code is worse than OP's as you absolutely do not ever put the `.validate()` method inside of click handlers. `.validate()` is only how you _initialize_ the plugin not test the form. – Sparky Dec 26 '13 at 17:40
  • Sparky i dont think it is necessary to put ".validate" inside click handlers that is upto your requirement.. also have a look here http://jqueryvalidation.org/validate/ which says submitHandler (default: native form submit) : "Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated." and that is what i have done. – Sunil Verma Dec 27 '13 at 06:23
  • Yes, I missed the closing brackets on your `click` handler (next time please click the "TidyUp" button). However, your approach with the `click` handler is totally unnecessary. As you already pointed out in the docs, the `submitHandler` only fires when the form is valid and only after clicking the button, so there's really no need to manually check to see if the button has been clicked once. If you examine the OP's jsFiddle, it's already working just like yours without all that. And again, the code belongs in your posting _along with_ your jsFiddle, not in a jsFiddle alone. – Sparky Dec 27 '13 at 17:10