Update hidden input field value with another input field value?

Question

I am trying to update one hidden input field with another visible input field using javascript...

but my code doesn't work for some reason!!

This is my javascript:

<script language="javascript">
    function process1() {
        document.getElementById("sum_total").value = (document.getElementById("my-item-price").value);
    }
</script>

And This Is My form code:

<form><input name="A1" type="text" class="A1" id="A1"/></form>

<form><input type="hidden" id="A2" name="A2" value="process1() "/></form>

Update

<script language="javascript"> 
    function process1() { 
        document.getElementById("sum_total").value = (document.getElementById("my-item-price").value); 
    } 
</script>

No `input` has the ID of `sum_total` or `my-item-price`, try changing those to `A1` and `A2` — Andy, Feb 05 '13 at 14:21
sorry, I forgot to update the javascript code. This is my javascript but still doesn't work!! — Rooz Far, Feb 05 '13 at 14:21
yes, sorry. i've changed it to A1 and A2 but still doesn't work!! — Rooz Far, Feb 05 '13 at 14:22
I can't even edit the question now!! I have changed the IDs accordingly but still didn't work!! — Rooz Far, Feb 05 '13 at 14:23
@ Back in a Flash, the idea is to show whatever value is in one input (A1) into another input (A2). — Rooz Far, Feb 05 '13 at 14:24
@Andy, I did change the IDs in my file but still didn't work. any suggestions? — Rooz Far, Feb 05 '13 at 14:25

Tomas Nekvinda · Answer 1 · 2013-02-28T16:10:06.607

10

The code you have is bad. You haven´t got ids you are looking for in javascript.

Try this:

 <script language="javascript">
 function process1(showed) {
    document.getElementById("A2").value = showed.value;
}
</script>

<form><input name="A1" type="text" class="A1" onChange="process1(this)"/></form>

<form><input type="hidden" id="A2" name="A2" value="5" /></form>

edited Feb 28 '13 at 16:10

answered Feb 05 '13 at 14:25

Tomas Nekvinda

524
1
5
15

1

Fix the typo in `onChange`. – ATOzTOA Feb 05 '13 at 14:35

score 4 · Answer 2 · answered Feb 05 '13 at 14:35

I think the most reliable will be to use onKeyUp rather than onChange or mouse events (onBlur etc.). The following updates the hidden field as each character is entered (I have un-hidden A2 so you can see what is happening).

<html>
<head>
<script language="javascript">
function process1() {
    document.getElementById("A2").value = (document.getElementById("A1").value);
    }

</script>
</head>
<body>
<form><input name="A1" type="text" class="A1" id="A1" onKeyUp="process1()" /></form>
<form><input id="A2" name="A2" value="" /></form>
</body>
</html>

your suggestion was clear and helpful. Thank you for your help bud. — Rooz Far, Feb 05 '13 at 14:56

ATOzTOA · Answer 3 · 2013-02-05T14:32:36.580

1

Try this: Live Demo

HTML

<form><input name="A1" type="text" class="A1" id="A1"/></form>

<form><input type="hidden" id="A2" name="A2" value=""/></form>

<button onClick="process1();">Update</button>

JS

function process1() { 
    document.getElementById("A2").value = document.getElementById("A1").value; 

    alert(document.getElementById("A2").value);
}

edited Feb 05 '13 at 14:32

answered Feb 05 '13 at 14:24

ATOzTOA

34,814
22
96
117

plz delete this answer, the asker stated in comments that it's a typo and should be fixing it by now – Zathrus Writer Feb 05 '13 at 14:25
guys I already said I've changed the IDs in my file accordingly but didn't work!! the above code is a mistake! – Rooz Far Feb 05 '13 at 14:27
@ATOzTOA, it doesnt say anything. and i did try your Live Demo but that brings up a pop-up which is not what I am after! – Rooz Far Feb 05 '13 at 14:43
@RoozFar The pop-up is displaying the value of the hidden input element. If the popup shows the value you entered, then your data is copied over. – ATOzTOA Feb 05 '13 at 14:50

score 1 · Answer 4 · answered Feb 05 '13 at 14:31

1

You should bind an event to update the value. For example onkeyupevent document.getElementById("A1").onkeyup=function() { document.getElementById("A2").value = this.value };

answered Feb 05 '13 at 14:31

Emre Senturk

345
5
13

score 0 · Answer 5 · answered Feb 05 '13 at 14:26

0

I changed the value to blank and gave the input an onmouseout (you can use another type if you want) to execute the function and swap values.

<script language="javascript">
function process1() {
document.getElementById("A2").value = document.getElementById("A1").value;
}

</script>
</head>

<body>



And This Is My form code:

<form><input name="A1" type="text" class="A1" id="A1"/></form>

<form><input type="text" id="A2" name="A2" value="" onmouseout="process1()" /></form>

answered Feb 05 '13 at 14:26

Ryan Beaulieu

453
3
15

Thank you, I did try the onfocous mouse events and it didn't work so I thought the issue might be from elese where!! The A2 input is hdden so I can't use mouse events! or can I? – Rooz Far Feb 05 '13 at 14:37

score 0 · Answer 6 · answered Feb 05 '13 at 14:27

<script language="javascript">
function process1() {
    document.getElementById("A1").value = (document.getElementById("A2").value);
}
</script>
And This Is My form code:
<form><input name="A1" type="text" class="A1" id="A1"/></form>

<form><input type="hidden" id="A2" name="A2" value="process1() "/></form>
<div onClick="process1()">doit</div>

does work

Update hidden input field value with another input field value?

6 Answers6

Linked