在按钮单击时将输入字段值附加到 url答案

【问题标题】：Append input field value to url on button click在按钮单击时将输入字段值附加到 url
【发布时间】：2018-10-11 00:38:24
【问题描述】：

我对编码很陌生，所以如果这是一个愚蠢的问题，请原谅我。

我正在处理一项任务，我必须向现有的引导 HTML 文档添加功能和样式。其目的是允许人们通过输入金额或单击使用设定金额填充字段的按钮将美元金额输入到输入字段中。我的指示之一是更新捐赠提交按钮，以便将所选捐赠金额附加到“/thank-you”网址。

这是我的输入字段：

<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>

这就是我的按钮：

 <button id="donateBtn" type="submit" action="/thank-you" 
 method="get">DONATE<span class="metric-amount"></span></button>

我在想 jQuery 看起来应该是这样的，尽管提交功能目前没有给我任何可见的结果。

$("#donateBtn").click(function() {
        if (!$.isNumeric($("#other-amount").val())) {
            $("#dataWarning").show();
            $(".metric-amount").hide();
            $(".metric-message").hide();
        } else {
                $("#amountSend").submit(function() {
                    var url = "/thank-you";
                    $(".metric-amount").appendTo("url");
                });
        }
    })

使用 PHP 方法我也得到了一些不错的结果：

<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>

<script>
$("#donateBtn").click(function() {
        if (!$.isNumeric($("#other-amount").val())) {
            $("#dataWarning").show();
            $(".metric-amount").hide();
            $(".metric-message").hide();
        } else {
            $("#amountSend").submit();
            }
        });
</script>

这将打开我设置的 PHP 文件（/thank-you.php，我将它存储在与我的主要 HTML 文档相同的根文件夹中），但浏览器给我的只是原始 HTML 代码PHP 文件。这是我在 PHP 文件中的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>

</body>
</html>

无论如何，我想我想知道我是否走在正确的轨道上？我应该追求 jQuery 还是 PHP 方法？我什至可以只使用 jQuery 来做到这一点吗？我已经看过一些关于这个主题的帖子，但我想我会做一个新的，因为我看到的都是相当模糊的，我没有两次看到相同的答案，我不确定就结果的视觉确认而言，我完全理解我想要完成的工作。

谢谢！

【问题讨论】：

标签： javascript php jquery forms

【解决方案1】：

首先，您的代码有几个问题。

第一个：你那里的公式编码错误，表单标签需要有action和method 属性，而不是提交按钮。

最重要的是，提交按钮需要在表单标签中，如果没有，它就没有这种效果。

第二个：如果您要将公式提交到 php 文件并在那里处理请求，您需要该文件在服务器（本地或任何）。 PHP 是一种服务器语言，如果你直接在浏览器中打开文件，它会显示它里面的代码，并且不起作用。

希望对你有帮助！

【讨论】：