如何通過Bootstrap Modal使用Ajax提交表單

我會盡量簡潔，我是bootstrap和高級javascript的新手，基本上我使用bootstrap模式在用戶面前加載表單以收集和保存數據在數據庫中。我的問題是你將如何使用Ajax，因爲我有其他模式也將有不同的形式，我不想一次又一次地處理整個頁面。 PS 我是笨進行申請如何通過Bootstrap Modal使用Ajax提交表單

這裏面模態形式

<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>

我想用ajax

來源

2013-04-08 Hunain Usman

展示一些你的代碼，以便能夠在東西 – Dmonix 2013-04-08 08:56:10

http://malsup.com/jquery/form/工作 – 2013-04-08 09:13:48

我有同樣的問題，但是當我嘗試這個gist都做得很好。

你可以試試這個代碼：

$(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') 
    }) 
});

來源

2013-06-05 05:43:42

如果你想做到這一點很簡單這應該提交此表爲您提供：

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

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

來源

2013-04-08 09:38:07 Dmonix

看一看笨user guide：

使你的代碼應該是，

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

之後，你有你的表單提交功能結合到jQuery函數像

$(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"); 
        } 
       }); 

    }); 
});

來源

2013-04-08 14:10:26

如何通過Bootstrap Modal使用Ajax提交表單

回答

相關問題