CodeIgniter Forums
jquery modal passing post values to controller - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: jquery modal passing post values to controller (/thread-53591.html)



jquery modal passing post values to controller - El Forum - 07-30-2012

[eluser]gdawson[/eluser]
Let's begin by saying I am new to jquery. My issue is when I am using a jquery modal form, the post value is not being sent to the controller.

In the modal form, when clicking on "Submit Note", I am taken to the url in the form action, however the post value is not passed. Below is my simple code and any help is greatly appreciated.

I have been searching various postings but cannot figure this one out.

[removed]
Code:
$(function() {
                
  $( "#dialog-modal" ).dialog({
   height: 400,
                        width: 475,
   modal: true,
                        autoOpen: false,
                          buttons: {
                            "Submit Form": function() {
                                ($("input#newNote").val());
                                document.noteform.submit();
                            },
                            "Cancel": function() {
                                $(this).dialog("close");
                            }
                },
                close: function() {
                        allFields.val( "" ).removeClass( "ui-state-error" );
                }                        
            });

            $( "#create-note" )
   .button()
   .click(function() {
    $( "#dialog-modal" ).dialog( "open" );
   }
            );

HTML/php/Form:
Code:
<?php
$noteForm= array('name'  => 'noteform', 'id' => 'noteform');
?>

<button id="create-note">Add Note</button>

&lt;?= form_open('notes/addNote/', $noteForm) ?&gt;
<div id="dialog-modal" title="Add Note">

    &lt;input id="newNote" type="text" name="newNote" value="" /&gt;

&lt;?= form_close() ?&gt;



jquery modal passing post values to controller - El Forum - 07-30-2012

[eluser]WoolyG[/eluser]
Hey GDawson,

Do you expressly *have* to POST the data?

You could just grab the contents of the input and stick it across into the modal without needing a POST:


Code:
$("#create-note").click(function(){
  var input_data = $("#newNote").val();
  $("#dialog-modal").html(input_data); // Or $("#dialog-modal > p") or whatever sub-element..
});


Hope this helps
- WoolyG


jquery modal passing post values to controller - El Forum - 07-31-2012

[eluser]gdawson[/eluser]
Hi WoolyG,

Thanks for your response. I will need to POST so I can get the note value to the controller to insert into the DB.


jquery modal passing post values to controller - El Forum - 07-31-2012

[eluser]gdawson[/eluser]
I was able to get this to work. Below is the resulting code.

JS
Code:
$(function() {
  // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  $( "#dialog:ui-dialog" ).dialog( "destroy" );
  
  var note = $( "#note" ), allFields = $( [] ).add( note );
  $( "#dialog-form" ).dialog({
   autoOpen: false,
   height: 450,
   width: 450,
   modal: true,
   buttons: {
    "Add Note": function() {
     var bValid = true;
     allFields.removeClass( "ui-state-error" );
                                        
     if ( bValid ) {
                                                note.val()
                                                document.noteform.submit();            
      $( this ).dialog( "close" );
     }
    },
    Cancel: function() {
     $( this ).dialog( "close" );
    }
   },
   close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
   }
  });

  $( "#create-note" )
   .button()
   .click(function() {
    $( "#dialog-form" ).dialog( "open" );
   });
});
[removed]

HTML
Code:
<button id="create-note">Add Note</button>

<div id="dialog-form" title="Add Note">


     &lt;form action="&lt;?= base_url();?&gt;notes/addNote/" method="post" name="noteform" id="noteform"&gt;
<fieldset>
  <label for="note"></label>
                &lt;textarea type="text" cols="25" rows="10" name="note" id="note" class="text ui-widget-content ui-corner-all" &gt;&lt;/textarea>
</fieldset>
&lt;/form&gt;
</div>

Controller
Code:
newNote = $this->input->post('note');