javascript - How to submit Form by Bootstrap Modal using Ajax - Stack Overflow

admin管理员组

文章数量:1289509

I'll try to be concise as possible, i am new to bootstrap and advanced javascript, basically i have used bootstrap modal to load a form in front of user to collect and save data in database. my question is how will you do that using ajax, because i have other modals also which will have different forms and i dont want to process the entire page again and again. P.S i am making this application in codeigniter

This is the form inside modal

 <section id="launch" class="modal hide fade" style="width: 800px; left: 500px;">
              <header class="modal-header" style="height: 7px; background: none repeat scroll 0% 0% rgb(87, 164, 210);">
                <h4 style="margin-bottom: 0px; margin-top: -5px; text-align: center; color: white;">Unit Details</h4>
                <button type="button" class="close" data-dismiss="modal" style="margin-top: -20px;">&times</button>
              </header>
 <?php echo form_open('setupnewblock/registerNewBlock'); ?>
<div class="modal-body" style="padding-top: 0px; padding-left: 0px; " >
 <div style="position: relative; left: 43px; margin-top: 41px; margin-left: 0px;">
                <span>Address 1</span>
                <input  type="text" placeHolder="" name="address1" style="width: 219px; height: 17px; margin-left: 20px; margin-top: 3px;" value="<?php echo set_value('address1'); ?>"/>
                <br />
                <span>Address 2</span>
                <input  type="text" placeHolder="" name="address2" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address2'); ?>"/>
                <br />
                <span>Address 3</span>
                <input  type="text" placeHolder="" name="address3" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address3'); ?>"/>
                <br />
                <br />
              </div>
 <footer class="modal-footer" style="margin-top: 475px;">
          <input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px;  height: 27px; width: 89px;" data-dismiss="modal"></input>
          <?php echo form_close(); ?>
        </footer>
      </section>

i want to submit this form using ajax

I'll try to be concise as possible, i am new to bootstrap and advanced javascript, basically i have used bootstrap modal to load a form in front of user to collect and save data in database. my question is how will you do that using ajax, because i have other modals also which will have different forms and i dont want to process the entire page again and again. P.S i am making this application in codeigniter

This is the form inside modal

 <section id="launch" class="modal hide fade" style="width: 800px; left: 500px;">
              <header class="modal-header" style="height: 7px; background: none repeat scroll 0% 0% rgb(87, 164, 210);">
                <h4 style="margin-bottom: 0px; margin-top: -5px; text-align: center; color: white;">Unit Details</h4>
                <button type="button" class="close" data-dismiss="modal" style="margin-top: -20px;">&times</button>
              </header>
 <?php echo form_open('setupnewblock/registerNewBlock'); ?>
<div class="modal-body" style="padding-top: 0px; padding-left: 0px; " >
 <div style="position: relative; left: 43px; margin-top: 41px; margin-left: 0px;">
                <span>Address 1</span>
                <input  type="text" placeHolder="" name="address1" style="width: 219px; height: 17px; margin-left: 20px; margin-top: 3px;" value="<?php echo set_value('address1'); ?>"/>
                <br />
                <span>Address 2</span>
                <input  type="text" placeHolder="" name="address2" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address2'); ?>"/>
                <br />
                <span>Address 3</span>
                <input  type="text" placeHolder="" name="address3" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address3'); ?>"/>
                <br />
                <br />
              </div>
 <footer class="modal-footer" style="margin-top: 475px;">
          <input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px;  height: 27px; width: 89px;" data-dismiss="modal"></input>
          <?php echo form_close(); ?>
        </footer>
      </section>

i want to submit this form using ajax

• javascript
• html
• codeigniter
• twitter-bootstrap

Share Improve this question Follow edited Apr 8, 2013 at 9:12 Hunain Usman asked Apr 8, 2013 at 8:48 Hunain UsmanHunain Usman 2,22855 gold badges2424 silver badges3232 bronze badges 2

• Show some of your code to be able to work on something – dzbo Commented Apr 8, 2013 at 8:56
• malsup./jquery/form – Tieson T. Commented Apr 8, 2013 at 9:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

i've got same problem, but when I tried this gist all done nicely.

you can try this code:

$(document).ready( function() {
    $('.modal form').on('submit', function(event) {
        event.preventDefault()
        $.post( $(this).attr('action'), $(this).serialize(), function(data) {
            // just try to see the outputs
            console.log(data)
            if(data.return===true) {
                // Success code here
            } else {
                // Error code here
            }
        }, 'json')
    })
});

If you want to do it very simple this should work for you:

$('input[name=save]').click(function(e) {
    e.preventDefault();

    $.post("setupnewblock/registerNewBlock", {form: $("#launch form").serialize()},  
        function(data) {
        // callback   
    });
});

Have a look at codeigniter user guide :

so your code should be ,

$attributes = array('class' => 'myform', 'id' => 'myform');
    echo form_open('setupnewblock/registerNewBlock', $attributes);

And After that you have to bind the submit function of your form to jquery function like

$(document).ready(function() {
    $("#myform").submit(function() {

        $.ajax(
                {
                    type: 'POST',
                    url: 'your url to php file',
                    data: {}, //your form datas to post          
                    success: function(response)
                    {
                        alert(response);

                    },
                    error: function()
                    {
                        alert("Failure");
                    }
                });

    });
});

本文标签： javascriptHow to submit Form by Bootstrap Modal using AjaxStack Overflow