JQuery Buttons 加上变量值填充文本表单
Posted
技术标签:
【中文标题】JQuery Buttons 加上变量值填充文本表单【英文标题】：JQuery Buttons plus variable value populate text form 【发布时间】：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 脚本来获取变量的值。你有什么建议吗。
按钮没有值。为此使用输入文本/数字
【参考方案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);我的计算工作正常。
【讨论】：
以上是关于JQuery Buttons 加上变量值填充文本表单的主要内容，如果未能解决你的问题，请参考以下文章