How do I combine values from radio and input box and open an url on button click?

user_9800149 0
Viewed 77

I have two radio options and one input number box and on click of button, I should open url that is combination of those values. The URL ought to be something like salpra.mno.com for button click. I'm familiar with on click function but struggling to combine them.

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

function css html jquery javascript
3 Answers

$("#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"/>

user_121339340

Whenever you change the input value, the href value changes.

$('#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>

user_132661430

Use form submit to your advantage here.

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>

user_46650
Related