Параметры URL для радиокнопок

Question

Я пытаюсь передать значения переключателей из одной формы в другую, используя параметры 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>

Answer 1

Я бы предложил использовать 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>