Jquey UI form submit

JavaScript
1

Hi guys,

Im really new to jquery and whilst ive been able to muddle through with my project so far i seem to have hit a wall with this issue.

Basically im trying to submit a form contained within a Jquery UI dialog. But i cant seem t get the submit button to actually submit.

This is the code for the form:


<div id="popupform">
      <form action="create_repair.php" method="POST" name="createrepairform" id="createrepairform" enctype="multipart/form-data">
            <input type="text" name="name" />
            <input type="text" name="email" />
      </form>
</div>

This is the jquery code:



$(function() {
      $( \\"#popupform\\" ).dialog({
             width: 500,
             modal: true,
             buttons: {
                 \\"Submit\\": function() {
                      $('#createrepairform').submit();
                      $(this).dialog('close');
              },

                \\"Close\\": function(){
                     $(this).dialog('close');
               }
            }
         })
    });

Basically when the submit button is click all that happens is the dialog is closed. Nothing gets passed to the php script waiting for it. I know the php script works OK because if i add a submit button in the html form that submits the data fine.

If anyone could point me in the right direction i would be gratefully.

Thanks.

2

Are you referring to Ajax form submit. So after they click submit there is not page refresh? If so here is how I did it. http://www.visibilityinherit.com/code/jquery-ajaxsubmit.php. If your talking about submitting a form in a light box popup then your better off housing your form on another page and calling via the popup. Getting that working correct with all the validation on my project was probably the longest and hardest I have ever stared blankly at my computer. I understand your pain.

3

Instead of calling $(‘#createrepairform’).submit(); you could post the data of the form manually using the jQuery $.ajax method, you will then be able to show the results / errors within the dialog window:


$.ajax({
    url: 'urltophpscript',
    data: {
        'field1': $('#field1').val()
    },
    success: function(data) {
          $('#popupmessage').html(data).show();
    }
});

This link http://api.jquery.com/jQuery.ajax/ should have everything you need.

Hope this helps.