JQuery Buttons 加上变量值填充文本表单答案

【问题标题】：JQuery Buttons plus variable value populate text formJQuery Buttons 加上变量值填充文本表单
【发布时间】：2021-10-17 14:06:37
【问题描述】：

我正在努力获得一个带有 3 个按钮的简单表单，以将它们的值添加到变量中并将结果输出到文本框中。我已经尝试了几件事，但没有运气，请如果有人能告诉我我做错了什么。

<body>
    
      $curr_price = 4000; 
    
        
    <br>
    <hr/><form>
        <input type="text" name="result_test" id="result-c" value=""> 
        <input type="reset" value="Reset">
        <br>
        
        <input class="btn" type="button" name="value1" value=" 500" id="btnone" title="your-tooltip-here">
        <input class="btn" type="button" name="value1" value="1000" id="BtnTwo">
        <input class="btn" type="button" name="value2" value="1500" id="BtnThree">
    </form>
    
    
</body>
 <script>

    $('.btn').on('click', function(e) {

        e.preventDefault();

        // Get val of btn
        let a = parseInt( $( this ).val() );

        // Get val of form imput
        var b = parseInt('<?=$curr_price; ?>');

        // Sanity check on b to make sure we are working with a number
        if ( isNaN( b ) )
            b = 0;

        // Do the addition and place value in form input
        $( '#result-c' ).val( a + b );

    });



    </script

【问题讨论】：

$curr_price = 4000; ?为什么这没有包含在 PHP 标签中？另外，为什么你需要在 PHP 值的前端代码中进行“健全性检查”？
嗨@RokoC.Buljan。我也尝试将它包装在 PHP 标记中，结果相同。如果我删除健全性检查，它会在文本字段中返回带有变量名称的按钮的值。例如 1000$curr_price。我只是不知道如何获取 jQuery 脚本来获取变量的值。你有什么建议吗。
按钮没有值。为此使用输入文本/数字

标签： jquery forms calculation

【解决方案1】：

包装成 PHP 标记
导入 jQuery 库

index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <?php
    $curr_price = 4000;
    ?>

    <hr />

    <form>
        <input type="text" name="result_test" id="result-c" value="">
        <input type="reset" value="Reset">
        <br>

        <input class="btn" type="button" name="value1" value=" 500" id="btnone" title="your-tooltip-here">
        <input class="btn" type="button" name="value1" value="1000" id="BtnTwo">
        <input class="btn" type="button" name="value2" value="1500" id="BtnThree">
    </form>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $('.btn').on('click', function(e) {

        e.preventDefault();

        // Get val of btn
        let a = parseInt($(this).val());

        // Get val of form imput
        var b = parseInt('<?= $curr_price; ?>');

        // Sanity check on b to make sure we are working with a number
        if (isNaN(b))
            b = 0;

        // Do the addition and place value in form input
        $('#result-c').val(a + b);

    });
</script>

</html>

【讨论】：

谢谢@Roko，但这正是我的问题。您发布的代码只返回按钮的值，而不是计算结果。
@RoelfKeulder 那么当我点击按钮时会发生什么？总是加？（目前它用新的 4000+button 值替换旧值）
那么，PHP的$curr_price是4000，按这个顺序点击按钮后应该是什么结果：1、2、3、2、1？ @RoelfKeulder
$curr_price 是一个变量，因此对于不同的产品它是不同的，我只使用 4000 作为示例，按钮值是 1500、1000 和 500。因此，如果您在我的示例中按下按钮 1 1500 的值和我的 $curr_price 值在那个阶段是 4000 文本框中的结果应该是值 5500 的计算，这是在那个阶段的变量 $curr_price 的计算 4000 + 1500 按钮的值.如果单击按钮 2，它应该是 4000 + 1000，它应该在文本框中显示 5000，当按下按钮 3 时，它应该显示 4000 + 500。
您所描述的正是上述工作原理。 @RoelfKeulder。似乎您没有在 PHP 服务器上运行上述内容 - 因为它使用 PHP 标签。打开终端，运行php -S localhost:8080（从 index.php 文件所在的文件夹）并在浏览器中访问 localhost:8080。看？它有效。

【解决方案2】：

@cloned 我认为按钮值不是问题，而是它没有正确导入脚本的变量值。如果我必须将脚本中的最后一个更改为 'code' $('#result-c').val(a + 4000);我的计算工作正常。

【讨论】：