How do I get a handle to a dynamically-generated field name in javascript?

Question

I have a series of fields created dynamically based on database records. They will be named cardObject1, cardObject2, and so on for as many rows as necessary. I'm now trying to access a specific cardObject field in a function where the number is passed in, but am getting an error message.

The field looks like this:

<input name="cardObject241" value="2,$25.00,1" type="hidden">

The js code I'm using looks like this:

function deleteFromCart(id){
  if (confirm("Are you sure you want to delete this item from your cart?")){
    var voucherNbr = document.getElementById("voucherNbr").value;
    var cardObjectArray = document.getElementById("cardObject"+id).value.split();
    var amtToDelete = cardObjectArray[1];
    alert("need to delete " + amtToDelete); 
  }

}

And the error I'm getting is

document.getElementById("cardObject" + id) is null

on this line:

 var cardObjectArray = document.getElementById("cardObject"+id).value.split(); 

How can I get a handle to the cardObject field that ends with the number passed in as the id param?

Answer 1

您需要添加一个与名称属性同名的id =“”属性。

<input id="cardObject241" name="cardObject241" value="2,$25.00,1" type="hidden">

Answer 2

Firstly, your input field needs an id as well as a name, so it would look like this:

<input name="cardObject241" id="cardObject241" value="2,$25.00,1" type="hidden">

Secondly, if you have an object that may or may not exist, it's always a good idea to check for existence before you start manipulating properties:

var tempObj=document.getElementById("cardObject"+id)
if(tempObj) {
    var cardObjectArray = tempObj.value.split();
    ...do your stuff with cardObjectArray....
}

Answer 3

您可以使用document.getElementsByName()或（跨浏览器返回石器时代）

document.forms[formIndexOrName].elements["cardObject" + id].value.split(",")