表单 - 同步请求并在提交时显示 div

Question

我正在制作一个yahtzee类型的双人骰子游戏。要开始游戏，用户输入 2 个名称并提交，这应该开始游戏并显示骰子区域。我做了很多试验和错误，但我无法提交表单、获取输入并显示游玩区。

.HTML：

    <div id="top_area">
    <div id="new_game_form">
        <form action="http://examples.funwebdev.com/process.php" method="post" name="new_game">
            Player 1:
            <br>
            <input type="text" name="player1">
            <br> Player 2:
            <br>
            <input type="text" name="player2">
            <br>
            <input id="newGameSubmit" type="submit" value="Start Game">
        </form>
    </div>
    <div id="player_turn">
        Please enter player names and load a new game!
    </div>
    <div id="player_scores">
        Current Score
    </div>
</div>
<div id="play_area">
    <div class="play_div" id="game_board">
        <a class="diceimage" id="dice1"></a>
        <a class="diceimage" id="dice2"></a>
        <a class="diceimage" id="dice3"></a>
        <a class="diceimage" id="dice4"></a>
        <a class="diceimage" id="dice5"></a>
    </div>
    <div class="play_div" id="submit_move">
        <form class="play_div" action="http://examples.funwebdev.com/process.php" method="post" name="submit_move">
            <input type="submit" value="Roll the dice!" onclick="rollDice()">
        </form>
    </div>
    <div id="submit_score">
        <form action="">
            <select name="Score">
                <option value="2OfAKind">Two of a kind</option>
                <option value="3OfAKind">Three of a kind</option>
                <option value="4OfAKind">Four of a kind</option>
                <option value="5OfAKind">Five of a kind</option>
                <option value="fullHouse">Full house</option>
            </select>
            <input type="submit" value="Submit your score">
        </form>
    </div>
</div>

JavaScript：

$(document).ready(function () {
    //game setup
    $("#new_game").on("submit", newGameListener);
});

function newGameListener(e) {
    e.preventDefault();
    setUpUsers();
    $(".play_area").show(); 
}

我也试过：

$(document).ready(function () {
     $("#new_game").submit(function (event) {
        var newGameData = {
            "player1": $("input[name=player1]").val(),
            "player2": $("input[name=player2]").val()
        };
        $.ajax({
                type: "POST",
                url: "http://examples.funwebdev.com/process.php",
                data: formData,
                dataType: 'json',
                encode: true
            })
            .done(function (data) {
                (".play_area").show();
            });
        event.preventDefault();
    });
});

和：

$(document).ready(function () {
    $("#newGameSubmit").click(function () {
            event.preventDefault();
            var player1 = $("#player1").val();
            var player2 = $("#player2").val();
            $.ajax({
                type: "POST",
                url: "http://examples.funwebdev.com/process.php",
                data: dataString,
                cache: false,
                success: function () {
                    (".play_area").show();
                }
            });
        }
        return false;
   });
});

我

怀疑我对表单名称的使用可能是错误的(我应该使用 id 代替吗？# 对吗？等等(，但我已经玩过了，但仍然无法得到它。

Answer 1

我尝试修改您的最后一种方法。我希望一旦您使用以下修改后的代码更新它，它就会起作用：

在您的 HTML 中; play_area是赋予<div>元素的id。因此，要处理它JQuery，我们需要使用#而不是点。喜欢$("#play_area").show();

.CSS：

#play_area{
  display:none;
}

Jquery：

$(document).ready(function () {
    $("form[name=new_game]").submit(function (e) {
         return false;
    });
    $("#newGameSubmit").click(function (event) {
      event.preventDefault();
      var player1 = $("#player1").val();
      var player2 = $("#player2").val();
      var newGameData = {
        "player1": player1,
        "player2": player2
      };
      $.ajax({
        type: "POST",
        url: "http://examples.funwebdev.com/process.php",
        data: newGameData,
        cache: false,
        success: function () {
          $("#play_area").show();
        }
      });
   });
});

我也创建了一个小提琴;但它不起作用，因为我们无法从jsfiddle.net内到您的funwebdev.com域进行跨域 Ajax 调用。但你可以参考它：

http://jsfiddle.net/vijayP/bkvw95jn/2/

Answer 2

修复了表单未提交的问题。检查以下代码。!!

    <script>
    jQuery(document).ready(function($) {
        $("#new_game").submit(function() {
            var newGameData = {
                "player1": $("input[name=player1]").val(),  
                "player2": $("input[name=player2]").val()
            };
                $.ajax({
                    type: "POST",
                    url: "http://examples.funwebdev.com/process.php",
                    data: newGameData,
                    dataType: 'json',
                    encode: true,
                    success: function(data) {
                       (".play_area").show();
                        alert(data); 
                    }
                });
            return false;
        });
    });
</script>
</head>
<body>
<div id="top_area">
    <div id="new_game_form">
        <form action="#" method="post" id="new_game" name="new_game">
            Player 1:
            <br>
            <input type="text" name="player1">
            <br> Player 2:
            <br>
            <input type="text" name="player2">
            <br>
            <input id="newGameSubmit" type="submit" value="Start Game">
        </form>
    </div>
    <div id="player_turn">
        Please enter player names and load a new game!
    </div>
    <div id="player_scores">
        Current Score
    </div>
</div>
<div id="play_area">
    <div class="play_div" id="game_board">
        <a class="diceimage" id="dice1"></a>
        <a class="diceimage" id="dice2"></a>
        <a class="diceimage" id="dice3"></a>
        <a class="diceimage" id="dice4"></a>
        <a class="diceimage" id="dice5"></a>
    </div>
    <div class="play_div" id="submit_move">
        <form class="play_div" action="http://examples.funwebdev.com/process.php" method="post" name="submit_move">
            <input type="submit" value="Roll the dice!" onclick="rollDice()">
        </form>
    </div>
    <div id="submit_score">
        <form action="">
            <select name="Score">
                <option value="2OfAKind">Two of a kind</option>
                <option value="3OfAKind">Three of a kind</option>
                <option value="4OfAKind">Four of a kind</option>
                <option value="5OfAKind">Five of a kind</option>
                <option value="fullHouse">Full house</option>
            </select>
            <input type="submit" value="Submit your score">
        </form>
    </div>
</div>