Submitting a form via jQuery...

[eluser]baazil1[/eluser]
I am trying to setup the jquery-ui dialog modal contact form. I have everything working except the submit of the form. I need the submit to access the controller to run through the send email functions I have set up.

My controller has 3 functions and depending on which form is submitted, the specific function will run. So, a user will fill out the help form and click the send button which will then proceed through the jquery validation and then eventually submit back to the controller. This is the part I cannot figure out...

The jquery code:

A button is clicked that opens up the form in a dialog modal window, once the form is filled in and the "Send Form" is clicked, the follow runs:

Code:

$("#facilityForm").dialog({
  autoOpen: false,
  height: 420,
  width: 650,
  modal: true,
  buttons: {
   "Send Form": function() {
    var bValid = true;
    allFields.removeClass( "ui-state-error" );

    bValid = bValid && checkLength( name, "username", 3, 16 );
    bValid = bValid && checkLength( email, "email", 6, 80 );

    if ( bValid ) {
     $("form#helpdeskForm").submit();
     $( this ).dialog( "close" );
    }
   },
   Cancel: function() {
    $( this ).dialog( "close" );
   }
  },
  close: function() {
   allFields.val( "" ).removeClass( "ui-state-error" );
  }
});

The form id is helpdeskForm and when Send Form is clicked, the modal window disappears (assuming $( this ).dialog( "close" ); is working). The problem is, nothing is "submited" to the controller. I need the submit to return to the cantact page and run a specific function in the controller (in this case, it needs to submit to cntact/sendHelpdeskForm so that the function runs, is able to gather the form information (from POST), and sends the email... here is the code for the sendHelpdeskForm function:

Code:

function sendHelpdeskForm () {  

$name = $this->input->post('name');
$email = $this->input->post('email');
$subject = $this->input->post('subject');
$inquiry = $this->input->post('inquiry');
  
$this->email->from('[email protected]', 'Your Name');
$this->email->to($email);
$this->email->subject($subject);
$this->email->message($inquiry);
  
if($this->email->send()) {
  $data = array('title' => 'Form Submitted', 'main_content' => 'pages/formSuccess');
  $this->load->view('template/main', $data);
}
else {
  show_error($this->email->print_debugger());
}

}

Any help? I can clarify things if needed, as I am new to codeigniter and may have gotten some lingo wrong!

Thanks for any assistance!

[eluser]limit[/eluser]
What does your post url look like? (eg your form action url?)

Also are you sure "form" is needed in front of the id? (eg:form#helpdeskForm) ID's are supposed to be unique anyway, not sure if you need form in front.

[eluser]baazil1[/eluser]
The action URL for the form is http://localhost/contact/sendFacilityForm

sendFacilityForm is a function in my contact controller that is called and performs the send email scripts.

I am not certain form is needed in front of the ID... I have seen it that way in a few examples so I went with it.

[eluser]limit[/eluser]
Unless you are using .htaccess to remove index.php, I think you need it in front of your action URL - http://localhost/index.php/contact/sendFacilityForm

[eluser]baazil1[/eluser]
Nope, have successfully removed the index.php from the URL. http://localhost/contact works perfectly as does all form logic when I strip away all jQuery code. I just cannot get the submit function in jQuery to work.

[eluser]limit[/eluser]
[quote author="baazil1" date="1327708747"]The action URL for the form is http://localhost/contact/sendFacilityForm
[/quote]

Your function says sendHelpdeskForm shouldn't it be http://localhost/contact/sendHelpdeskForm ?

[eluser]baazil1[/eluser]
Correct, i have two functions, one is sendFacilityForm and the other is sendHelpdeskForm... both will be doing slightly different actions, but essentially are the same thing...

Sorry for mixing them up!

[eluser]baazil1[/eluser]
OK, not sure why the lack of support for this, but in hopes of getting some sort of answer, I have posted each of the pages in question to pastebin so that all can be seen together:

the Contact View page: http://pastebin.com/wgpht8Gc
the Contact Control page: http://pastebin.com/rEym5Y8u
the jQuery script: http://pastebin.com/gG79TaF9

Anyone have any ideas on why the form is not submitting?

[eluser]limit[/eluser]
If you take out the JQuery markup and manually submit the form via a submit button does it work?

[eluser]baazil1[/eluser]
I discovered the bug...

Something seems to go wrong when your input button has a name of submit. I found this at StackOverflow (http://stackoverflow.com/questions/86729...-in-v1-7-1) after seeing this bug report on jQuery.com (http://bugs.jquery.com/ticket/10574)

I simply changed the name of my submit input field (which, regrettably, never should have been in their in the first place (i essentially had two submit buttons!)!) from submit to send and everything went as expected.

Appreciate your help