单选按钮的URL参数

Question

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

这是我的表格：

＆＃13;

＆＃13;

  (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 );

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

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

的所有输入

循环遍历所有输入并将输入的val（）与捐赠级别值进行比较（如果匹配），然后检查该单选按钮并保释。以下是一个例子。

＆＃13;

＆＃13;

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;
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;