Question

我试图制作一个单选按钮，选择选项，＆＃34; 123,456＆＃34;值被传递给＆＃34; data-offer-id＆＃34;我提交按钮的一部分。我认为这需要是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

单击单选按钮时会执行此操作，以便在按下提交按钮时，该值已经存在。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

希望这会有所帮助

<!DOCTYPE html>
<html>
<body>

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

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.querySelector('input[name="offer-id"]:checked').value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

无线电输入和提交通过值

2 个答案: