CODEWITHSUNDEEP
javascripthtml
Rooz Far
Rooz Far

Reputation: 187

Update hidden input field value with another input field value?

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>

Upvotes: 8

Views: 51854

Answers (6)

Tomas Nekvinda
Tomas Nekvinda

Reputation: 544

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>

Upvotes: 11

ElPedro
ElPedro

Reputation: 586

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>

Upvotes: 4

ATOzTOA
ATOzTOA

Reputation: 35950

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);
}

Upvotes: 1

Emre Senturk
Emre Senturk

Reputation: 345

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

Upvotes: 1

pedak
pedak

Reputation: 91

<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

Upvotes: 0

Ryan Beaulieu
Ryan Beaulieu

Reputation: 453

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>

Upvotes: 0

Related Questions