Радиовход и передача проходного значения

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

2 ответа

Решение

Это будет обработано, когда переключатель будет нажат, чтобы к моменту нажатия кнопки подтверждения значение уже было.

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

Источник

Надеюсь, это поможет

<!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>
Источник
Другие вопросы по тегам