dongwh1992
dongwh1992
2017-05-17 04:19

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

已采纳

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • duanduji2986 duanduji2986 4年前

    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>
    
    点赞 评论 复制链接分享
  • dongrao9454 dongrao9454 4年前

    The form is working. However in the page source the value assigned to the variable can not be seen. It will be good if you parseInt(splitFields[1]) before assigning.

    Check the following code. I changed the method to GET and action="xyz.php" (Somefile). When you click on Submit you'll see the parameters of GET request in the URL Box of your browser. There the hidden value is being set.

    <form action="xyz.php" method="get" 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>
    

    I hope this helps you !

    点赞 评论 复制链接分享
  • dongliushui2001 dongliushui2001 4年前

    Change your code to this and it will work in IE also :

    HTML :

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

    Javascript :

    function ReadForm() {    
       var selectedValue = 0;
       if(document.getElementById('item100').checked) 
            selectedValue = document.getElementById('item100').value;
       if(document.getElementById('item200').checked) 
            selectedValue = document.getElementById('item200').value;
       console.log(selectedValue);           
    }
    

    https://jsfiddle.net/emilvr/v32e6vc8/

    点赞 评论 复制链接分享

相关推荐