javascript - 无线输入并提交pass值

Question

我正在尝试制作一个单选按钮表单，其中所选选项“123, 456”值被传递到我的提交按钮的“data-offer-id”部分。我认为这需要是 javascript，但我不知道如何做到这一点。如果可以的话请帮忙!。提前致谢

<form>
  <input type="radio" name="data-offer-id" value="123"> 123<br>
  <input type="radio" name="data-offer-id" value="456"> 456<br>
 </form> 


<button class="btn btn-success btn-large"
                    data-dismiss="learnmodal"
                    data-cleeng-trigger
                    data-action="checkout"
                    data-locale="en_US"
                    data-display-type="overlay"
                    data-offer-id="***Need Value to dynamically populate here****"
                   data-completed-callback="cleengCallbackHandler(result)">    
<span style="color: #ffffff">$9.95 / Month
</span></button>

Answer 1

这将在单击单选按钮时进行处理，以便在按下提交按钮时，该值已经存在。

// Get reference to the submit button
var sub = document.querySelector("button.btn-success");

// Get a reference to both radio buttons as an array
var radBtns = Array.prototype.slice.call(document.querySelectorAll("input[name='data-offer-id']"));


// Loop over the buttons
radBtns.forEach(function(btn){
  // Set each button to have a click event handler
  btn.addEventListener("click", function(){
    // Set the radio button's value as the id of the submit button
    sub.setAttribute("data-offer-id", btn.value);
    
    // Just for testing:
    console.clear();
    console.log(sub);
  });
});

<form>
  <input type="radio" name="data-offer-id" value="123"> 123<br>
  <input type="radio" name="data-offer-id" value="456"> 456<br>
 </form> 


<button class="btn btn-success btn-large"
                    data-dismiss="learnmodal"
                    data-cleeng-trigger
                    data-action="checkout"
                    data-locale="en_US"
                    data-display-type="overlay"
                    data-offer-id=""
                   data-completed-callback="cleengCallbackHandler(result)">    
<span style="color: #ffffff">$9.95 / Month
</span></button>