CODEWITHSUNDEEP
javascriptphpjqueryforms
Dylan Fitzgerald
Dylan Fitzgerald

Reputation: 13

Append input field value to url on button click

I'm very new to coding, so please forgive me if this is a dumb question.

I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.

This is what I have for the input field:

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

This is what I have for the button:

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

And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.

$("#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");
                });
        }
    })

I also got some decent results using a PHP method:

<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>

This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:

<!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>

Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.

Thanks!

Upvotes: 1

Views: 1257

Answers (1)

FlokiTheFisherman
FlokiTheFisherman

Reputation: 234

First of all, you have several issues with your code.

Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.

And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.

Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.

Hope it helps!

Upvotes: 1

Related Questions