Link to home
Start Free TrialLog in
Avatar of Kourosh Barati
Kourosh BaratiFlag for United States of America

asked on

Jquery submit form question

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?
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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.
Avatar of Kourosh Barati

ASKER

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(); ?
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!'
I gave you wrong advice.  Are you useing https://github.com/elclanrs/jq-idealforms#methods

Just use isValid and then submit the form
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

The link I gave you is the actual source
ASKER CERTIFIED SOLUTION
Avatar of Kourosh Barati
Kourosh Barati
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Like any of this, there are going to be multiple ways to the same end.  If it works... do it.
Used comments and ideas from Scott Fell.