weixin_33712987 2015-12-06 15:55 采纳率: 0%
浏览 23

Ajax提交表格

I have 'Create room' form:

<div class="contentHolder">
        <div class="row no-margin">
            <div class="col-sm-offset-3 col-sm-6 col-xs-12">
                <g:form action="save" controller="roomLocation">
                    <g:render template="form" model="[roomLocation:roomLocation]"/>
                    <div class="row form-row">
                        <div class="col-md-offset-8 col-md-4 col-xs-12">
                            <div class="form-buttons">
                                <g:submitButton name="create" style="width:100%" class="btn btn-purple" value="Create" />
                            </div>
                        </div>
                    </div>
                </g:form>
            </div>
        </div>
    </div>

that renders form of inputs:

<div class="row form-row required">
    <label class="labelStyle col-md-4 text-align-xs">Location</label>
    <div class="col-md-8">
        <input id="inputName" placeholder="Location" class="form-control" name="name" value="${roomLocation?.name}" required>
    </div>
</div>

As you can see on first form, the subbmision is made over button create, but the whole page is refreshed and i want to use ajax so that the submision is made without refreshing whole page. I am new at this, and i would appreciate any help regarding this.

  • 写回答

1条回答 默认 最新

  • weixin_33739646 2015-12-06 16:01
    关注

    the jquery code for without refreshing the page and submitting the form is

     $(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});

    assume this is your html page..

    <html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>

    if you using php for server side then 

    <?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>

    demo at here ...http://www.aorank.com/tutorial/submitformwithoutrefreshing_demo/refreshform.html

    refer this page :(open link in new tab) jquery formsubmission example

    评论

报告相同问题？

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据