0

I have the following form fields to collect basic input from the user (a dollar amount).

        <tr><td><span class="qText" name="settlement">1. Amount:</span></td></tr> 
        <td><input type="hidden" class="qAns" name="settlement_t1_a">
            <input type="text" class="qAns" id="recovery_val" name="settlement_t1" oninput="formatValue('1');" required></td>

I'm trying to display a confirmation popup when the user clicks the submit button to say "verify amount is correct", and show the amount they entered in the above field "settlement_t1".

What am I doing incorrectly here?

<div class="submitDiv"><input type="submit" onclick="return confirm('Please confirm recovery amount is correct: $' + document.getElementsByName("settlement_t1")[0].value;" value="Submit Form"></div>

Everything works fine until I try to insert the element. As in, I can get it to prompt "Please confirm recovery amount is correct: $", but without the amount.

boog
  • 472
  • 1
  • 5
  • 23
  • If you press F12 to open browser developer tools and look in the console it says there is an error in your inline script. Once corrected it works as expected. – Yogi Mar 05 '21 at 18:51

2 Answers2

2

function doConfirm() {
    return confirm('Please confirm recovery amount is correct: $' + document.getElementsByName("settlement_t1")[0].value);
}

function formatValue(value) {
    return value;
}
<form method="post">
    <input type="hidden" class="qAns" name="settlement_t1_a" />
    <input type="text" class="qAns" id="recovery_val" name="settlement_t1" oninput="formatValue('1');" required />

    <div class="submitDiv"><input type="submit" onclick="return doConfirm()" value="Submit Form" /></div>
</form>
DavidW
  • 29,336
  • 6
  • 55
  • 86
  • Thanks, just what I needed. Funny how I have a GCL10 screeps empire running but can't get this dang web form to do much of anything. I appreciate it. – boog Mar 05 '21 at 18:51
0

A big part of the problem is that you are using inline event attributes, which is a 25+ year old legacy approach to event handling that just needs to die but doesn't because people see other people using it and they just copy it. Instead, separate your JavaScript from your HTML and set up events with .addEventListener().

You are also adding a click event handler to a submit button, which triggers the submit event of the form when you should be adding your code to the submit event of the form instead.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • well what I didn't mention is this is a part of a huge messy web form that consists of ~10 separate js files, ~5 php files, etc. I didn't create this form and it's probably passed through 3-4 different hands before becoming my burden. So, I just wanted a quick and simple way to satisfy the request, but yes the javascript is largely already separated. But, I'm assuming it is possible to get this to work, as it's already almost there, just need to add the amount entered into the field. – boog Mar 05 '21 at 18:45