php 模态框 form表单,Bootstrap Modal 提交 form 表单

使用效果：

后台PHP代码：<?php

$first_name = $_POST['first_name'];

$last_name = $_POST['last_name'];

echo "Thank you " . $first_name . " " . $last_name . " for your submission.";

?>

HTML代码：Contact

×

Enter your name

First name: 

Last name: 

Close

Send

JS：

/* must apply only after HTML has loaded */

$(document).ready(function () {

$("#contact_form").on("submit", function(e) {

var postData = $(this).serializeArray();

var formURL = $(this).attr("action");

$.ajax({

url: formURL,

type: "POST",

data: postData,

success: function(data, textStatus, jqXHR) {

$('#contact_dialog .modal-header .modal-title').html("Result");

$('#contact_dialog .modal-body').html(data);

$("#submitForm").remove();

},

error: function(jqXHR, status, error) {

console.log(status + ": " + error);

}

});

e.preventDefault();

});

$("#submitForm").on('click', function() {

$("#contact_form").submit();

});

});

总结：

1.button 与 modal 关联是通过data-target="#contact_dialog"

2.如果是多个 button,可以共用一个modal. 通过 data-whatever (也可以传递多个参数)

3.如果想post 多个参数，可以用ajax 如下：ipget=document.getElementById('ipadd').value

other=document.getElementById('message-text').value

var postdata={}

postdata['ipaddress']=ipget

postdata['other']=other

$.ajax({

type: "POST",

url: "/auto/ipchange",

dataType: "json",

data: postdata,

success: function(data, textStatus, jqXHR){

$('#net_key .modal-header .modal-title').html("结果");

$('#net_key .modal-body').html(data.result);

$("#submitForm").remove();

},

error: function(jqXHR, status, error) {

console.log(status);

}

});

参考资料: