Javascript related input-button text change

Question

I have product name(in paragraph), text form and button. The products have id's as follows p1,p2... The input types have id's as follows i1,i2...After typing something in the form and clicking submit I want this to change the default product text. I have the following function which works only for one set(paragraph,form and button). The problem is that this product function works only for p1,i1 I want it to fork for p1,i1,p2,i2 and etc.

 function product(id){
            var userInput = document.getElementById("i1").value;
            document.getElementById("p1").innerHTML = userInput;
        }

The function call is as follows:

<button type='button' onclick='product()'>Name product</button>

You can use a very little jQuery for this.

bhagyas
– bhagyas

2011-06-22 06:38:21 +00:00
Commented Jun 22, 2011 at 6:38 — bhagyas
– bhagyas, Commented Jun 22, 2011 at 6:38

paul · Accepted Answer · 2011-06-22 06:29:19Z

3

what you need is to pass the index to the function:

function product(id) {
    var userInput = document.getElementById("i"+id).value;
    document.getElementById("p"+id).innerHTML = userInput;
}

your html would look like:

<button type='button' onclick='product(1)'>Name product</button>

hope this helps.

answered Jun 22, 2011 at 6:29

paul

1514 bronze badges

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

Comments

Ibu · Accepted Answer · 2011-06-22 06:29:54Z

1

you can use a loop to set make all the changes

function product(){
   for (var i=0;i < totalNumberofItems;i++){
      var userInput = document.getElementById("i"+i).value;
      document.getElementById("p"+i).innerHTML = userInput;
   }
}

That is if you want the button to update all the fields

answered Jun 22, 2011 at 6:29

Ibu

44k14 gold badges82 silver badges109 bronze badges

Collectives™ on Stack Overflow

Javascript related input-button text change

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related