时间戳

首页 > 解决方案 > 单选按钮的 URL 参数

javascript - 单选按钮的 URL 参数

问题描述

我正在尝试使用 URL 参数将单选按钮值从一种形式传递到另一种形式。我可以将值传递给 url，例如：.../?first-name=Joe&city=Dallas没有问题，但没有任何运气.../?donation-level=1000.000000或其他类似的变量=yes或=1等。我认为这与正确定位无线电场有关，但我还没有找到一个好的解决方案到任何地方的问题。

这是我的表格：

  (function($) {$(function () {
    
    //grab the entire query string
    var query = document.location.search.replace('?', '');
    
    //extract each field/value pair
    query = query.split('&');
    
    //run through each pair
    for (var i = 0; i < query.length; i++) {
    
      //split up the field/value pair into an array
      var field = query[i].split("=");
      
      //target the field and assign its value
      $("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]);
        
      $("input[type='radio'][name='donation-level']:checked").val(); //something like this for the radio button?

    
    }
  });})( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="donation-form-container">      
  <form id="donation-form" class="donation-form" method="post" onsubmit="event.preventDefault(); collectPayment();">
    <div class="errors hidden"></div>
        <div class="section donation">
            <h3>Make a Donation</h3>
                <div class="field radio 907264 required" >
                    <label for="907264">
                        <input id="907264" name="donation-level" class="required" type="radio" value="1000.000000"></input><span class="label">$1,000.00</span>
                    </label>
                </div>
                <div class="field radio 907265 required" >
                    <label for="907265">
                        <input id="907265" name="donation-level" class="required" type="radio" value="500.000000" maxlength="255"></input><span class="label">$500.00</span>
                    </label>
                </div>
                <div class="field radio 907266 required" >
                    <label for="907266">
                        <input id="907266" name="donation-level" class="required" type="radio" value="300.000000" maxlength="255"></input><span class="label">$300.00</span>
                    </label>
                </div>
                <div class="field radio 907267 required" >
                    <label for="907267">
                        <input id="907267" name="donation-level" class="required" type="radio" value="100.000000" maxlength="255"></input><span class="label">$100.00</span>
                    </label>
                </div>
                <div class="field radio other-option required" >
                    <label for="other-option">
                        <input id="other-option" name="donation-level" class="required" type="radio" maxlength="255"></input><span class="label">Other</span>
                    </label>
                </div>
                <div class="field tel other-amount" >
                    <input id="other-amount" name="other-amount" class="currency minimum1" type="tel" placeholder="$0.00"></input>
                </div>

        </div>


</form>
</div>

标签： javascripthtmlradio-buttonurl-parameters

解决方案

我建议使用URLSearchParams来处理从 url 修改/获取查询参数。

您需要做的是首先获取donation-level使用 urlsearchparams 的查询参数值。

然后使用 jQuery 选择器选择具有属性的所有输入name=donation-level

遍历所有输入并将输入的 val() 与捐赠级别值进行比较，如果匹配，则检查该单选按钮并保释。下面是一个例子。

var myURLString = "https://www.example.com/index.html?donation-level=1000.000000";

var url = new URL(myURLString);
// or you can do
//var url = new URL(window.location);

var params = new URLSearchParams(url.search);
var donationQuery = params.get("donation-level");

$("input[name='donation-level']").each(function(index, elem) {
  var $radio = $(elem);
  if ($radio.val() === donationQuery) {
    $radio.prop("checked", true);
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="donation-form-container">
  <form id="donation-form" class="donation-form" method="post" onsubmit="event.preventDefault(); collectPayment();">
    <div class="errors hidden"></div>
    <div class="section donation">
      <h3>Make a Donation</h3>
      <div class="field radio 907264 required">
        <label for="907264">
                        <input id="907264" name="donation-level" class="required" type="radio" value="1000.000000"></input><span class="label">$1,000.00</span>
                    </label>
      </div>
      <div class="field radio 907265 required">
        <label for="907265">
                        <input id="907265" name="donation-level" class="required" type="radio" value="500.000000" maxlength="255"></input><span class="label">$500.00</span>
                    </label>
      </div>
      <div class="field radio 907266 required">
        <label for="907266">
                        <input id="907266" name="donation-level" class="required" type="radio" value="300.000000" maxlength="255"></input><span class="label">$300.00</span>
                    </label>
      </div>
      <div class="field radio 907267 required">
        <label for="907267">
                        <input id="907267" name="donation-level" class="required" type="radio" value="100.000000" maxlength="255"></input><span class="label">$100.00</span>
                    </label>
      </div>
      <div class="field radio other-option required">
        <label for="other-option">
                        <input id="other-option" name="donation-level" class="required" type="radio" maxlength="255"></input><span class="label">Other</span>
                    </label>
      </div>
      <div class="field tel other-amount">
        <input id="other-amount" name="other-amount" class="currency minimum1" type="tel" placeholder="$0.00"></input>
      </div>

    </div>


  </form>
</div>

推荐阅读