We help IT Professionals succeed at work.

Jquery submit form question

418 Views
Last Modified: 2016-09-09
I have downloaded a step form in jquery that works perfect for me. The only part I am stuck with is the submission part. Here is the script:

<script>

    $('form.idealforms').idealforms({

      silentLoad: false,

      rules: {
        'email': 'required email',
        'password': 'required pass',
        'confirmpass': 'required equalto:password',
       
        'hobbies[]': 'minoption:2 maxoption:3',
        'phone': 'required phone',
        'zip': 'required zip',
        'options': 'select:default',
      },

      errors: {
        'username': {
          ajaxError: 'Username not available'
        }
      },

      onSubmit: function(invalid, e) {
        e.preventDefault();
        $('#invalid')
          .show()
          .toggleClass('valid', ! invalid)
          .text(invalid ? (invalid +' invalid fields') : 'All good!');
      }
    });



    $('form.idealforms').find('input, select, textarea').on('change keyup', function() {
      $('#invalid').hide();
    });

    $('form.idealforms').idealforms('addRules', {
      'comments': 'required minmax:50:200'
    });

    $('.prev').click(function(){
      $('.prev').show();
      $('form.idealforms').idealforms('prevStep');
    });
    $('.next').click(function(){
      $('.next').show();
      $('form.idealforms').idealforms('nextStep');
    });

  </script>

With this script when all requirements are met I get the message  'All good!'. But instead of that I want the form to be submitted.

The form tag is : <form action="untitled1.asp" method="post" class="idealforms" novalidate autocomplete="off">




How can I have it to submit the form?
Comment
Watch Question

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
https://api.jquery.com/submit/

.submit() can submit the form
$('form.idealforms').submit();

Open in new window


Just add that to your logic in your current jquery code where you want to submit.

Author

Commented:
in this section:

onSubmit: function(invalid, e) {
        e.preventDefault();
        $('#invalid')
          .show()
          .toggleClass('valid', ! invalid)
          .text(invalid ? (invalid +' invalid fields') : 'All good!');

Where do you add that $('form.idealforms').submit(); ?
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I am not crazy about this, but the last line is a condition https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

It reads like, If invalid, add invalid code else write out, "All good".  So in place of 'All Good!'
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I gave you wrong advice.  Are you useing https://github.com/elclanrs/jq-idealforms#methods

Just use isValid and then submit the form
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
I just did a test with your code.

onSubmit: function(invalid, e) {
        e.preventDefault();
        $('#invalid')
          .show()
          .toggleClass('valid', ! invalid)
          .text(invalid ? (invalid +' invalid fields') : 'All good!');
        
        if(!invalid){
         $('form.idealforms').submit();
        }
      }

Open in new window


Also, from their code
$('form').idealforms({
  onSubmit: function(invalid, e) {
    e.preventDefault();

    if (invalid) {
      alert(invalid +' fields!');
    } else {
      $.post('save.php', this.$form.serialize(), function(response) {  
        // do something with response
      }, 'json');
    }    
  }
});

Open in new window

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
The link I gave you is the actual source
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Like any of this, there are going to be multiple ways to the same end.  If it works... do it.

Author

Commented:
Used comments and ideas from Scott Fell.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.