CODEWITHSUNDEEP
javascripthtmlformstext
nescionomen93
nescionomen93

Reputation: 49

Retrieve data from form html

Hi all i have this 3 forms:

<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">

<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">

<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >

and a button

<button type="button" onclick="merge()">merge</button>

Now i want that the function merge() takes the text inserted in the first 2 forms and put the append of the 2 string in the 3rd form.

i tried something like:

<script>
function merge(){
    var r1= $('#idform1').val();
    var r2= $('#idform2').val();
    $('#idform3').val('r1+r2');}
</script>

idform1 , idform2 and idform3 are not the correct id's but it's just to be more clear. Of course it's not working , can anyone help me out ? thanks

Upvotes: 0

Views: 106

Answers (3)

Saurav Wahid
Saurav Wahid

Reputation: 401

first you know you use wrong input tag id change correct ids then change val("r1+r2") to val(r1+r2). if you use variable there not string " " quote String Quote only for when normal text you set.

and finally you use jQuery under JavaScript so add in Head tag jQuery library 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

here your full code :

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
    var r1= $('#color1').val();
    var r2= $('#color2').val();
    $('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>

Upvotes: 0

PRANAV
PRANAV

Reputation: 629

replace your code with this

<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">

<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">

<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){ 
    var r1= $('#color1').val();
    var r2= $('#color2').val();
    $('#result').val(r1+r2);}
</script>
</body>
</html>

Upvotes: 2

Anand Singh
Anand Singh

Reputation: 2363

You got every thing Just change this 

<script>
function merge(){
    var r1= $('#idform1').val();
    var r2= $('#idform2').val();
    $('#idform3').val('r1+r2');}// this line
</script>

to

<script>
function merge(){
    var r1= $('#idform1').val();
    var r2= $('#idform2').val();
    $('#result').val(r1+r2);}// to this
</script>

and if you have for more specification you can use String(yourValue) function like this $('#result').val(String(r1)+String(r2)) but here we don't really need this.

Upvotes: 0

Related Questions