Передайте значение из ввода в href с помощью javascript

Question

Я пытаюсь достичь следующего сценария, когда пользователь нажимает на вход, он передает это значение в URL и проверяет радио входа, поэтому я могу отправить этот URL кому-либо.

Пока я застрял здесь :

$(document).ready(function() {
    $('input:radio[name=semester1]').change(function() {
        if (this.value == 'semester  1') {
            alert("semestar 1");
        }
        else if (this.value == 'semester  2') {
            alert("Semester 2");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="semester1" id="tab1" value="semester  1" aria-controls="semester  1">
<label for="tab1">semester  1</label>
<input type="radio" name="semester2" id="tab2" value="semester  2" aria-controls="semester  2">
<label for="tab2">semester  2</label>
<input type="radio" name="semester3" id="tab3"  value="semester  3" aria-controls="semester  3">
<label for="tab3">semester  3</label>

Идея состоит в том, чтобы иметь что-то подобное при выборе ввода

localhost/study&semester1

Может кто-нибудь помочь мне с этим?

Answer 1

Просто получите ссылку на поле привязки и передайте URL-адрес, основываясь на радио-щелчке следующим образом.

$(document).ready(function() {
    let field = document.querySelector('#field');
    let url = "localhost/study&";

    $('input:radio[name=semester1]').change(function() {
        if (this.value == 'semester  1') {
            url= url+this.value;
            field.attr('href',url )
        }
        else if (this.value == 'semester  2') {
            url= url+this.value;
            field.attr('href',url )
        }
    });
});

Answer 2

Вы можете упростить использование jquery:

$(document).ready(function() {
    $('input:radio[name=semester]').change(function() {
        const href = $("#click_here").attr("href").split(/=/)
        const link = href[0]+"="+ $(this).val()
        alert(link);
        $("#click_here").attr("href", link)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="semester" id="tab1" value="semester  1" aria-controls="semester  1">
<label for="tab1">semester  1</label>
<input type="radio" name="semester" id="tab2" value="semester  2" aria-controls="semester  2">
<label for="tab2">semester  2</label>
<input type="radio" name="semester" id="tab3"  value="semester  3" aria-controls="semester  3">
<label for="tab3">semester  3</label>

<a id="click_here" href="https://localhost/study?semester=''">click here</a>