CODEWITHSUNDEEP
javascriptforms
shwareal
shwareal

Reputation: 37

Javascript change hidden field on submit

Hi I am trying to install a merchant facility onto my website and it needs to submit a value $vpc_Amount which is the amount purchased in cents.

What I need to do is multiply the amount entered by the user ($amount) by 100 to get $vpc_Amount.

I tried the following but it isn't working.

<input type="text" ID="A1" name="amount"onkeypress="process1()">
<input type="hidden" id="A2" name="vpc_Amount">

And then the javascript

function process1() {
    f1 = document.getElementById("A1").value;
    total = f1*1000;
    document.getElementById("A2").value = total;
}

What is happening is it is occasionally working but most of the time it doesn't. I know there is something wrong with the script so hence asking here.

Upvotes: 3

Views: 2053

Answers (7)

Vicky
Vicky

Reputation: 613

Use Jquery. http://jquery.com/

$(function() {
    $('#form_id').submit(function(){
        $('#form_id').find('#A2').val('New value');
        return true;
    });
});

Upvotes: 1

RobG
RobG

Reputation: 147483

Your code can be simplified by making use of the fact that form controls are available as named properties of the form baed on their name. This removes the requirement to add IDs to form controls that must have a name anyway.

Pass a reference to the control in the listener:

<input type="text" name="amount" onkeyup="process1(this)">
<input type="hidden" name="vpc_Amount">

Then use the passed reference to get the form and other controls:

function process1(element) {
    element.form.vpc_Amount.value = element.value * 100;
}

You may wish to use the change event instead to save updating the hidden field unnecessarily while the user is typing and also to catch changes that aren't based on key presses (e.g. pasting from the context menu).

You should also do some validation of the values entered so the user doesn't attempt to send the form with invalid values (noting that you must also do validation at the server as client side validation is helpful but utterly unreliable).

Upvotes: 0

Domain
Domain

Reputation: 11808

First of all, I think you should use onkeypup event and not onkeypress

<input type="text" id="A1" name="amount" onkeyup="process1()" value="" />
<input type="hidden" id="A2" name="vpc_Amount" value="" />

Javascript code -

function process1() {
    var f1 = parseFloat(document.getElementById("A1").value);
    var total = f1*100; //you said 100 so, I changed to 100
    document.getElementById("A2").value = total;
}

jQuery code for the same -

jQuery(document).ready(function($){
    $("#A1").keyup(function(){
     var total = parseFloat($("#A1").val()) * 100;
    $("#A2").val(total);
  });
});

Upvotes: 0

George Plamenov Georgiev
George Plamenov Georgiev

Reputation: 702

I will suggest to use onblur this is the best way if you want to use the build in attribute listener if you don't use jquery. Here is example:

  <!DOCTYPE html>
  <html>
  <body>

  Enter your name: <input type="text" id="fname" onblur="myFunction()">

  <p>When you leave the input field, a function is triggered which transforms the input             text to upper case.</p>

  <script>
  function myFunction() {
      var x = document.getElementById("fname");
      x.value = x.value.toUpperCase();
  }
  </script>

  </body>
  </html>

And url to the example in w3 school :) http://www.w3schools.com/jsref/event_onblur.asp

Upvotes: 0

ilsenem
ilsenem

Reputation: 13

This code should work:

document
  .getElementById('A1')
  .addEventListener('keyup', function (e) {
    document.getElementById('A2').value = parseInt(this.value) * 1000;
  })

keypress event triggers before value changes in text field and keyup after value has changed.

Basically event trigger in order:

  • keydown (onkeydown)
  • keypress (onkeypress)
  • keyup (onkeyup)

Force value to be integer or you will get NaN in some cases.

Upvotes: 0

Rakesh kumar
Rakesh kumar

Reputation: 135

Try to use onkeyup function - 

<input type="text" id="A1" name="amount" value="" onkeyup="process1();" />
<input type="hidden" id="A2" name="vpc_Amount" />

javascript function -

function process1() {
    var f1 = document.getElementById("A1").value;
    var total = (f1 * 100);
    document.getElementById("A2").value = total;
}

Upvotes: 2

Astigma
Astigma

Reputation: 71

Have you tried to use onkeyup event? It might be so that onkeypress event is triggered before the character is added to text field.

<input type="text" ID="A1" name="amount" onkeyup="process1()">

Also, I would suggest that you try to convert the value of the textfield to integer and add other input handling too. Users might enter any kind of data there and it can crash your javascript code.

Upvotes: 0

Related Questions