Change value of input when user types in new value, else have default value

Question

How do I change the value of a hidden input field to be what the user types in the <input>?

Input Fields

 <input
     type="number"
     id="custom-donation-amount"
     placeholder="50.00" onfocus="(this.value == '50.00') && (this.value = '')"
       onblur="(this.value == '') && (this.value = '50.00')"


 />

and the hidden one:

<input id="paypal_value" type="hidden" name="amount" value="">

Jquery

<script type="text/javascript">
    if (!$('#custom-donation-amount').val()) { 
        ($("#paypal_value").val("50.00")) && ($("#custom-donation-amount").val("50.00"));
    }

    else $("#custom-donation-amount").change(function(){
  $("#paypal_value").val($("#custom-donation-amount").val())
});

Explain what (this.value == '50.00') && (this.value = '') is supposed to mean since this.value = '' will always be true (you are assigning a value with this, not comparing a value). — Scott Marcus
– Scott Marcus, Commented Mar 8, 2016 at 2:22
I think he is using short-circuiting as a shortcut for if-then - that is, I believe his code would be more easily read as if (this.value == '50.00') {this.value = ''} — Chris O'Kelly
– Chris O'Kelly, Commented Mar 8, 2016 at 2:46

Jonathan Safa · Accepted Answer · 2016-03-08 04:41:25Z

1

Delegate the input event on the number <input> then just assign a variable to it's value then assign that variable to the hidden <input>.

Use the console to see the hidden <input> attain the number <input>'s value. Added an <output> to conveniently test hidden <input>'s value.

Snippet

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>input to input</title>
</head>

<body>
  <input type="number" id="inp1" min="50.00" placeholder="50.00" value="50.00" onfocus="(this.value == '50.00') && (this.value = '')" onblur="(this.value == '') && (this.value = '50.00')"/>
  <br/>
  <label for="inp2">Value of Hidden Input:</label>
  <output id="out1"></output>
  <input id="inp2" type="hidden" name="inp2" value="">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(function() {
      $('#inp1').on('input', function(e) {
        var input = $('#inp1').val();
        $('#inp2').val(input);

        // See the results in devtools or...
        console.log('inp2: ' + $("#inp2").val());

        // On the page itself.
        $('#out1').html($('#inp2').val());
      });
    });
  </script>
</body>

</html>

edited Mar 8, 2016 at 4:41

Jonathan Safa

18118 bronze badges

answered Mar 8, 2016 at 2:35

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jonathan Safa Over a year ago

this works great. However, if the user submits it now, without there being a value on #inp1, the user submits a blank value on submission. May I add my original code back in there: onfocus="(this.value == '50.00') && (this.value = '')" onblur="(this.value == '') && (this.value = '50.00')"

zer00ne Over a year ago

I don't see why not, sure let's give it a try. That was on the input I believe.

Jonathan Safa Over a year ago

I did add the value field back to the answer, that worked for me.

zer00ne Over a year ago

Just approved it, every improvement is a step forward.

Jonathan Safa Over a year ago

I must have made a mistake. This is not passing through the value to PayPal unless the user inputs. It is not just accepting the value.

|

ash__939 · Accepted Answer · 2016-03-08 02:49:54Z

0

I hope you want to show the default value if user do not enter anything (or less than the default amount to the text box).

$(document).ready(function(){
    $(".input_amt").on("focus", function(){
        $(this).val(parseFloat($(this).attr('placeholder')).toFixed(2));
        $("#paypal_value").val('');
    });
    $(".input_amt").on("blur", function(){
        $(this).val(parseFloat($(this).val()).toFixed(2));
        if(parseFloat($(this).val()) >50)
        {
            $("#paypal_value").val(parseFloat($(this).val()).toFixed(2));   
        }
        else
        {
            $(this).val(parseFloat('50.00').toFixed(2));
            $("#paypal_value").val(parseFloat('50.00').toFixed(2));
        }
    });
});

Add the class input_amt to the user input text box

answered Mar 8, 2016 at 2:49

ash__939

1,5872 gold badges12 silver badges22 bronze badges

5 Comments

Jonathan Safa Over a year ago

Hey @av_ajesh is ".input_amt" the input value with the id id="custom-donation-amount"?

Jonathan Safa Over a year ago

Sorry, I just saw your last statement.

Jonathan Safa Over a year ago

this is changing the value of the form input to "50.00" everytime. The user is no longer able to input their own value here.

ash__939 Over a year ago

@JonathanSafa: I make it to force the user to enter minimum donation 50.00 or higher

Jonathan Safa Over a year ago

Oh that does make sense. Thank you for your help!

Collectives™ on Stack Overflow

Change value of input when user types in new value, else have default value

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related