PHP / jQuery不能仅在文本输入中在DB中更新吗？

Question

在我的表单中，用户可以使用以下Javascript更改值。 但是当他们单击“ X2赌注”时，它不会更新PHP中的赌注。例如，如果我输入1，它就可以工作。 如果单击X2，它将显示2，但在数据库中插入1。

谢谢。

<form action="./php/bet_process.php" method="POST" class="form betForm">
    <center>
        Balance: <span class="balance"></span> | Total Bets: <span
            class="total"></span> | Total Profit: <span class="profit"></span>
    </center>
    <hr />
    <span id="betResult"></span>
    <p class="field">
        <input type="text" id="bet" class="large" placeholder="Amount"
            name="bet" style="width: 250px;"> <span>
            <button id="x2bet">X2 Bet</button>
        </span>

    </p>
    <p class="field">
        <input id="chance" name="chance" class="large" type="text"
            placeholder="Chance" value="49.5">
    </p>
    <p class="field">
        <input id="pay" name="payout" class="large" type="text"
            placeholder="Payout">
    </p>
    <p class="field">
        <input id="profit" name="profit" class="large" type="text"
            placeholder="Profit">
    </p>
    <p class="field">
        <input type="submit" value="Bet" class="large" style="width: 360px;"
            id="betBtn">
    </p>
</form>

JavaScript的：

$('#x2bet').click(function () {
    $('#bet').val(parseFloat($('#bet').val()) * 2);
});


$(document).ready(function(){

  function updateValues() {
    // Grab all the value just incase they're needed.
    var chance = $('#chance').val();
    var bet = $('#bet').val();
    var pay = $('#pay').val();
    var profit = $('#profit').val();

    // Calculate the new payout.
    pay = (100-1)/chance;


    // Calculate the new profit.
    profit = bet*pay-bet;

    // Set the new input values.
    $('#chance').val(chance);
    $('#bet').val(bet);
    $('#pay').val(pay);
    $('#profit').val(profit);
  }


  $('#chance').keyup(updateValues);
  $('#bet').keyup(updateValues);
  $('#pay').keyup(updateValues);
  $('#profit').keyup(updateValues);


});

PHP代码：

    <?php
include_once('db.php');
session_start();

echo '
<link rel="stylesheet" href="./css/styles.css" type="text/css" />
<script src="./plugins/loader.js" type="text/javascript"></script>
';

$updated_amount_loss = $_POST['bet'];
$updated_amount_win = $_POST['profit'];

    $selectBalance = $db->prepare("SELECT `balance` FROM `users` WHERE `uid` = :uid");

        $selectBalance->execute(array(':uid' => $_SESSION['uid']));

            $balanceRow = $selectBalance->fetch();

                $userBalance = $balanceRow['balance'];

                    if(isset($_POST['bet'], $_POST['chance'], $_POST['payout'], $_POST['profit']) &&
                        $userBalance >= 0 &&
                        $_POST['bet'] >= 0 &&
                        $_POST['bet'] <= $userBalance &&
                        strlen($_SESSION['client']) == 6) {

                            if($_SESSION['roll'] < $_POST['chance']) {

                                    echo '<p class="message valid">You won!  You rolled a ' . $_SESSION['roll'] . ' out of 100.<span class="close">X</span></p>';

                                        $result = 'Win';

                                            if($_POST['bet'] > 0) {

                                                $updateBalanceWin = $db->prepare("UPDATE `users` SET `balance` = `balance` + :balance WHERE `uid` = :uid");
                                                    $updateBalanceWin->execute(array(':uid' => $_SESSION['uid'], ':balance' => $updated_amount_win));
                                                $insertBetWin = $db->prepare("INSERT INTO `bets`(`uid`, `result`, `amount`, `multiplier`, `time`, `roll`, `actual_amount`) 
                                                                                      VALUES (:uid, :result, :amount, :multiplier, :time, :roll, :actual_amount)");
                                                    $insertBetWin->execute(array(

                                                        ':uid'              => $_SESSION['uid'],
                                                        ':result'           => $result,
                                                        ':amount'           => $_POST['bet'],
                                                        ':multiplier'       => $_POST['payout'],
                                                        ':time'             => date("F j, Y, g:i a"),
                                                        ':roll'             => $_SESSION['roll'],
                                                        ':actual_amount'    => $updated_amount_win

                                                        ));

                                    }

                            }

                            else {

                                    echo '<p class="message invalid">You lost! You rolled a ' . $_SESSION['roll'] . ' out of 100.<span class="close">X</span></p>';

                                        $result = 'Loss';

                                            if($_POST['bet'] > 0) {

                                                $updateBalanceLoss = $db->prepare("UPDATE `users` SET `balance` = `balance` - :balance WHERE `uid` = :uid");
                                                    $updateBalanceLoss->execute(array(':uid' => $_SESSION['uid'], ':balance' => $updated_amount_loss));
                                                $insertBetLoss = $db->prepare("INSERT INTO `bets`(`uid`, `result`, `amount`, `multiplier`, `time`, `roll`, `actual_amount`) 
                                                                                      VALUES (:uid, :result, :amount, :multiplier, :time, :roll, :actual_amount)");
                                                    $insertBetLoss->execute(array(

                                                        ':uid'          => $_SESSION['uid'],
                                                        ':result'       => $result,
                                                        ':amount'       => $_POST['bet'],
                                                        ':multiplier'   => $_POST['payout'],
                                                        ':time'         => date("F j, Y, g:i a"),
                                                        ':roll'         => $_SESSION['roll'],
                                                        ':actual_amount'    => $updated_amount_loss

                                                        ));

                                    }


                            }

                        $_SESSION['roll'] = rand(0, 10000)/100;
                        $_SESSION['client'] = rand(100000, 999999);
                        $secret = 123;
                        $_SESSION['server'] = hash('sha512', $_SESSION['roll'] . $_SESSION['client'] . $secret);

                    }


?>

Answer 1

您在onclick方法中缺少parseInt和setter方法。 当前，您只获得文本框的值并将其相乘。 您需要将其放回文本框中，如下所示：

 $('#bet').val(multipliedValue);

您已完成onclick如下所示：

 <button id="changeBet" onclick="$('#bet').val(parseInt($('#bet').val())*2);">X2 Bet</button>

但是， onclick在许多方面都是不好的：

1. 很难在DOM中看到。
2. HTML和JS之间没有分离的关注点
3. 您需要将其添加到每个HTML标签中
4. 其中包含多个语句将使DOM看起来（对某些人）不可读等。

取而代之的是，为什么不使用jQuery？

$("#changeBet").click(function() {       
   $('#bet').val(parseInt($('#bet').val())*2);
});

您也可以使用普通的JS：

var button = document.getElementById("changeBet");
button.onclick = function () {
    var input = document.getElementById("bet")
    input.value *= 2;
}

Answer 2

您确实不应该像这样将jQuery放入HTML内。 确实很难阅读，并且可能会使需要维护此代码的一些可怜的程序员绊倒。

您要做的是调用一个不同的函数，该函数将更新该值：

<button onclick="someFunc()">X2 Bet</button>

然后在JavaScript代码中 （这意味着在<script>标记中，您将嵌入实际的函数

function someFunc(){
    var theValue = $('#bet').val(); 
    // convert the value into a number
    var theNumber = parseInt( theValue );
    $('#bet').val( theValue * 2 );
}

---

更好的是，根本不要使用onclick方法！ 给您的按钮一个id属性，并附加一个点击处理程序：

<button id="x2bet">X2 Bet</button>

// this is exactly the same as "$(document).ready(function(..."
$(function(){
    $("#x2bet").on('click', function(){
        var theValue = $('#bet').val(); 
        // convert the value into a number
        var theNumber = parseInt( theValue );
        $('#bet').val( theValue * 2 );
    });
});

Answer 3

我可以看到你在那里尝试过

<button onClick="$('#bet').val()*2;">X2 Bet</button>

但这并没有满足您的要求，因为在该行中，您没有为id为bet的输入分配任何新值。 这应该可以解决问题：

<button onClick="$('#bet').val(parseInt($('#bet').val()) * 2);">X2 Bet</button>

当您使用.val（） jQuery函数进行赋值时，必须将新值作为参数传递。

我还建议将JavaScript与HTML分开，

<button id="x2bet">X2 Bet</button>

而在JavaScript中

$('#x2bet').click(function () {
    $(this).val(parseInt($(this).val()) * 2);
});

Answer 4

不是$('#bet').val($('#bet').val()*2); 足够？ 代码上没有任何反应，因为您没有将新值分配回#bet对象。因此您应该将代码更改为此。

Answer 5

请记住，您需要type="button"否则按钮会默认提交表单，因为您可以使用<button type="button" onClick="$('#bet').val($('#bet').val()*2);">X2 Bet</button> 。 最佳实践是为此调用一个函数。

在这里演示