提交表单刷新页面

时间:2014-09-14 20:17:30

标签: javascript php jquery ajax forms

我有一个index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>League of Legends Straw Poll</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1 class="text-center">Game Straw Poll</h1>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <!-- FORM -->
                        <form name="submitForm" id="submitForm" action="process.php" method="post">
                            <div class="row">   
                                <div class="col-md-12">
                                    <!-- GAME -->
                                    <select class="form-control" id="game-group" name="game" onchange="ChangeBackground();">
                                        <option selected disabled>Select your Game...</option>
                                        <option value="League_of_Legends">League of Legends</option>
                                        <option value="Heartstone">Hearthstone</option>
                                    </select>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-md-12">
                                    <!-- QUESTION -->
                                    <div class="input-group" id="question-group">
                                        <input type="text" class="form-control" name="question" id="question" placeholder="Start typing your question...">
                                        <span class="input-group-addon">
                                            <i class="glyphicon glyphicon-question-sign"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <!-- OPTIONS -->
                                <div class="form-group form-group-options col-md-12 col-sm-12 col-xs-12">
                                    <div class="input-group input-group-option col-md-12 col-sm-12 col-xs-12" id="options-group">
                                        <input type="text" name="option[]" id="option" class="form-control" placeholder="Options...">
                                        <span class="input-group-addon input-group-addon-remove">
                                            <span class="glyphicon glyphicon-remove"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <!-- CHOICE -->
                                    <div class="checkbox" id="choice-group">
                                        <label>
                                            <input type="checkbox" id="choice" name="choice" value="Yes">Allow multiple choice
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-lg pull-left" name="submit_button" id="submit_button" data-toggle="modal" data-target="#myModal">Create Poll</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Poll created</h4>
                </div>
                <div class="modal-body">
                    <p>Share it: <a href="http://gamepoll.net/<?php echo $rand_value; ?>">http://gamepoll.net/<?php echo $rand_value; ?></a></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
                    <button type="button" class="btn btn-primary">Invia</button>
                </div>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type='text/javascript' src='js/addfield.js'></script>
    <script type='text/javascript' src='js/changebackground.js'></script>
    <script type='text/javascript' src='magic.js'></script>
</body>
</html>

AJES函数到js脚本

// magic.js
$(document).ready(function() {

// process the form
$('form').submit(function(event) {

    $('.form-group').removeClass('has-error'); // remove the error class
    $('.help-block').remove(); // remove the error text

    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = {
        'game'              : $('input[name=game]').val(),
        'question'          : $('input[name=question]').val(),
        'option'            : $('input[name=option[]]').val(),
        'choice'            : $('input[name=choice]').val()
    };

    // process the form
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'process.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', // what type of data do we expect back from the server
        encode      : true
    })
        // using the done promise callback
        .done(function(data) {

            // log data to the console so we can see
            console.log(data); 

            // here we will handle errors and validation messages
            if ( ! data.success) {

                // handle errors for game ---------------
                if (data.errors.game) {
                    $('#game-group').addClass('has-error'); // add the error class to show red input
                    $('#game-group').append('<div class="help-block">' + data.errors.game + '</div>'); // add the actual error message under our input
                }

                // handle errors for question ---------------
                if (data.errors.question) {
                    $('#question-group').addClass('has-error'); // add the error class to show red input
                    $('#question-group').append('<div class="help-block">' + data.errors.question + '</div>'); // add the actual error message under our input
                }

                // handle errors for option ---------------
                if (data.errors.option) {
                    $('#option-group').addClass('has-error'); // add the error class to show red input
                    $('#option-group').append('<div class="help-block">' + data.errors.option + '</div>'); // add the actual error message under our input
                }

                // handle errors for choice ---------------
                if (data.errors.choice) {
                    $('#choice-group').addClass('has-error'); // add the error class to show red input
                    $('#choice-group').append('<div class="help-block">' + data.errors.choice + '</div>'); // add the actual error message under our input
                }


            } else {

                // ALL GOOD! just show the success message!
                $('form').append('<div class="alert alert-success">' + data.message + '</div>');

                // usually after form submission, you'll want to redirect
                // window.location = '/thank-you'; // redirect a user to another page

            }
        })

        // using the fail promise callback
        .fail(function(data) {

            // show any errors
            // best to remove for production
            console.log(data);
        });

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

});

还有一个process.php

<?php
//Include configuration file
include('includes/config.php');

//Define variables
$question=$_POST['question'];
$game=$_POST['game'];
$option=$_POST['option'];
$choice=$_POST['choice'];

//Generate random number
$rand_value=rand();

//Create temporary folder
mkdir($rand_value);

//Copy page of Ask Poll
copy('page.php', $rand_value . '/page.php');
rename($rand_value . '/page.php', $rand_value . '/index.php');

//Add data into database
mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!");
mysql_select_db($db_name) or die ("Impossibile selezionare database!");
$sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))";
mysql_query($sql1) or die ("Impossibile eseguire la query!");

//Count number of Options available
$count=count($option);

    for ($i=0; $i<($count-1); $i++)
    {
        ${$sql . $i}="INSERT INTO `" . $rand_value . "` (Question, Options, Choice) VALUES ('$question', '$option[$i]', '$choice')";
        mysql_query(${$sql . $i});
    }   
?>

但是当我发送表单时,页面会将我重定向到process.php

我不希望网站刷新页面

修改

Werner,我按照你的建议添加了preventDefault,但它不起作用:(

1 个答案:

答案 0 :(得分:1)

magic.js文件中存在语法错误。您应首先启用控制台并观察其是否有错误。

Uncaught Error: Syntax error, unrecognised expression: input[name=option[]]

这是我在按下提交按钮时可以阅读的内容,然后在此之后退出以停止提交。

问题在于您创建formData的部分。 (使用http://api.jquery.com/serialize/

实际上可以更轻松地创建

第15行有拼写错误。请注意额外的括号?即使它们位于字段名称中,也不应添加括号。我建议你使用Serialize解决方案,或者至少使用他们的ID选择字段(这就是他们的基本用途)。

$('input[name=option[]]') // Not valid
$('#option') // Better way to select a field

希望这会让你朝着正确的方向前进。