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 Unity发布gzip压缩的webgl之后让浏览器可以正常显示画面
  • ¥15 有没有人知道这种提示怎么关?现在不做ts项目了不知道咋关了,求解,现在我以前的js项目都是这种提示了
  • ¥15 为什么mysql做了碎片化处理data_free还是很高
  • ¥15 single positional indexer is out-of-bounds
  • ¥15 LSTM 模型数据量需要多少?
  • ¥15 mysql数据抓包开发报表
  • ¥15 linux系统下安装office打不开
  • ¥20 rsync脚本分发错误,文件不齐全
  • ¥15 labview顺序结构与时间延时
  • ¥15 脚本求解,源于数据库脚本变量筛选。