单选输入并提交通过值答案

【问题标题】：Radio input and submit pass value单选输入并提交通过值
【发布时间】：2017-12-13 09:53:59
【问题描述】：

我正在尝试制作一个单选按钮表单，其中选择的选项“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>

【问题讨论】：

标签： javascript java forms radio

【解决方案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>

【讨论】：

非常感谢您的快速回复。不幸的是，我不得不稍微改变我的问题来完成这项工作。如果我可以让它工作，我愿意支付几美元。再次感谢
@RobbieMiranda 答案已更新以反映您编辑的 HTML。它真的不会改变解决方案。只有对元素的引用不同。
现在试试。谢谢
使用您更新的代码，我无法触发按钮。如果我手动将值添加到按钮代码中，它将触发。 javascript 是否需要位于标题或与按钮相同的代码部分？再次感谢
@RobbieMiranda 所有这些 JavaScript 都应该在一个脚本标签中，该标签在正文元素关闭之前插入到文档中。从运行我的代码可以看出，它确实有效。

【解决方案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>

【讨论】：

感谢您的快速响应！我想试试这个但需要转换成这个按钮代码...
感谢我尝试过，但遇到了一些问题。