尝试使用JavaScript解析将值应用于隐藏的输入变量

Question

I'm using a JavaScript function to get the amount to post. The only way I can get the amount is to parse the item_name input variable from the form. It works on Chrome, not on IE. By the way, it hooks to PayPal using PHP and MySQL.

function ReadForm(obj1) {
  var holeObjectValue = obj1.item_name.value;
  var splitFields = holeObjectValue.split("$");
  obj1.amount.value = splitFields[1];
}

<form action="" method="post" name="form1" target="_self">
  <input name="item_name" type="radio" onclick="ReadForm(this.form, false);" value="Please Select from above $ 100" checked="checked" />Please Select from above $ 100<br />
  <input name="item_name" type="radio" onclick="ReadForm(this.form, false);" value="Please Select from above $ 200" checked="checked" />Please Select from above $ 200<br />
  <input name="amount" type="hidden" value="" />
  <input type="submit" value="submit" />
</form>

</div>

Answer 1

There are a few things going wrong. In:

  var holeObjectValue = obj1.item_name.value; 

since there are two radio buttons with the same name, that returns a NodeList which doesn't have a vlaue property. To get the value of the selected radio, you can loop over the radios or use a selector:

var selected = obj1.querySelector('input[name=item_name]:checked');

In your markup you have made both radio button checked. It is the nature of radio buttons that only one can be checked at a time, so remove the checked attribute from one of them.

Lastly, you should not need to parse the value to get what you want, so make the value "200" or whatever, e.g.

<input name="item_name"  type="radio" onclick="ReadForm(this.form, false);"
  value="200">Please Select from above $ 200<br>

However, many browsers in use don't support such complex selectors so a looping solution is more compatible (and not a lot to write), so:

function ReadForm(obj1) {
  var radios = obj1.item_name;
  var holeObjectValue = null;

  for (var i = 0, iLen = radios.length; i < iLen; i++) {
    if (radios[i].checked) {
      holeObjectValue = radios[i].value;
      break;
    }
  }

  if (!holeObjectValue) return;
  obj1.amount.value = holeObjectValue;
}

<form action="" method="post" name="form1" target="_self" 
  onsubmit="return false"> <!-- prevent submit for testing -->
  <input name="item_name" type="radio" onclick="ReadForm(this.form, false);"
   value="100" checked>Please Select from above $ 100<br>
  <input name="item_name" type="radio" onclick="ReadForm(this.form, false);"
   value="200" >Please Select from above $ 200<br>
  <input name="amount" value=""> <!-- show for testing -->
  <input type="submit">
</form>

The last issue you have is that one radio is selected by default, but the value isn't written to the amount field if the user doesn't click on the radio. I'll leave that for you to solve.

</div>