如何组合来自单选和输入框的值并在按钮单击时打开一个 url？答案

【问题标题】：How do I combine values from radio and input box and open an url on button click?如何组合来自单选和输入框的值并在按钮单击时打开一个 url？
【发布时间】：2021-03-24 05:11:40
【问题描述】：

我有两个单选选项和一个输入数字框，单击按钮时，我应该打开由这些值组合而成的 url。 URL 应该类似于 salpra.mno.com 用于单击按钮。我熟悉点击功能，但很难将它们结合起来。

<form>
    <input type="radio" id="sal1" name="sal" value="075">
    <label for="sal1">001</label><br>

    <input type="radio" id="sal2" name="sal" value="076">
    <label for="sal2">100</label><br>

    <input type="radio" id="sal3" name="sal" value="077" checked>
    <label for="sal3">101</label>
  </form><br>

 <form>
    <input type="radio" id="pra1" name="pra" value="CS">
    <label for="pra1">CA</label><br>


    <input type="radio" id="pra2" name="pra" value="DP" checked>
    <label for="pra2">DA</label><br>
  </form>

<form>
<input type="number" id="mno" class="mno" name="mno" min="1" max="5555">
</form>
<a href="#" class="mbutt">add</a>

【问题讨论】：

实际输出？
为什么要使用多个form 元素？到目前为止，您是否尝试过 JavaScript/jQuery 中的任何内容？可以分享一下代码吗？
如果您的 HTML 与您在问题中提到的内容相匹配会有所帮助。
结果应该类似于 www.001CA.1234.com
检查@SarojBhattarai 答案

标签： javascript html jquery css function

【解决方案1】：

$("#add").click(function(){
var sal = $('input[name="sal"]:checked').val();
var pra = $('input[name="pra"]:checked').val();
var mno = $("#mno").val();
alert(sal+pra+"."+mno+"."+"com");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="radio" id="sal1" name="sal" value="001">
    <label for="sal1">001</label><br>

    <input type="radio" id="sal2" name="sal" value="100">
    <label for="sal2">100</label><br>

    <input type="radio" id="sal3" name="sal" value="101" checked>
    <label for="sal3">101</label>
  </form><br>

 <form>
    <input type="radio" id="pra1" name="pra" value="CS">
    <label for="pra1">CA</label><br>


    <input type="radio" id="pra2" name="pra" value="DP" checked>
    <label for="pra2">DA</label><br>
  </form>

<form>
<input type="number" id="mno" class="mno" name="mno" min="1" max="5555">
</form>

<input type="button" id="add" name="add" value="ADD"/>

【讨论】：

【解决方案2】：

每当您更改输入值时，href 值都会更改。

$('#tmpForm').children('input').change(function() {
    var sal = $('input[name=sal]:checked').val();
    var pra = $('input[name=pra]:checked').val();
    var mno = $('#mno').val();
    $('.mbutt').attr('href', '//www.' + sal + pra + '.' + mno + '.com');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<form id="tmpForm">
    <input type="radio" id="sal1" name="sal" value="075">
    <label for="sal1">001</label><br>

    <input type="radio" id="sal2" name="sal" value="076">
    <label for="sal2">100</label><br>

    <input type="radio" id="sal3" name="sal" value="077" checked>
    <label for="sal3">101</label><br>

    <input type="radio" id="pra1" name="pra" value="CS">
    <label for="pra1">CA</label><br>

    <input type="radio" id="pra2" name="pra" value="DP" checked>
    <label for="pra2">DA</label><br>

    <input type="number" id="mno" class="mno" name="mno" min="1" max="5555">
</form>
<a href="#" class="mbutt">add</a>

【讨论】：

这是我正在寻找的确切解决方案。谢谢一百万。

【解决方案3】：

在这里使用表单提交对您有利。

document.getElementById("urlBuilder").addEventListener("submit", function(e){
  e.preventDefault();
  this.action =`https://www.${this.sal.value}.${this.pra.value}.${this.mno.value}.com`
  console.log(this.action);
  //this.submit();
})

<form id="urlBuilder" method="get" action="">
    <input type="radio" id="sal1" name="sal" value="075">
    <label for="sal1">001</label><br>

    <input type="radio" id="sal2" name="sal" value="076">
    <label for="sal2">100</label><br>

    <input type="radio" id="sal3" name="sal" value="077" checked>
    <label for="sal3">101</label>
    <br>


    <input type="radio" id="pra1" name="pra" value="CS">
    <label for="pra1">CA</label><br>


    <input type="radio" id="pra2" name="pra" value="DP" checked>
    <label for="pra2">DA</label><br>

    <input type="number" id="mno" class="mno" name="mno" min="1" max="5555">
    <br>
    <button type="submit">Submit</button>
</form>

【讨论】：