Как изменить имя метода формы с помощью JavaScript

Question

Я новичок в JavaScript. У меня есть такая форма

<form id="frmid" action="index.php" method="get">    
    <label>Method</label>
    <input type="radio" name="typeMethod" value="POST" id="rdPost" checked="checked"  onchange="updatemethod()"/>
    <label for="rdPost">POST</label>
    <input type="radio" name="typeMethod" value="GET" id="rdGET" onchange="updatemethod()" />
    <label for="rdGET">GET</label>    
    <input type="text" name="firstName" value="" id="txtFirst" />    
    <input type="text" name="middleName" value="" id="txtMiddle" />
    <input type="text" name="lastName" value="" id="txtLast" />    
    <input type="submit" name="submit" id="txtSubmit" value="Send Information" />       
</form>

У меня есть HTML-форма с переключателем. Я пытаюсь написать функцию JavaScript updatemethod(), где, когда я выбираю переключатель, он меняется в зависимости от переключателя. Я сделал это

function updatemethod() {
    get = document.getElementById("rdGet");
    post = document.getElementById("rdPost");

    if (get.isChecked) {
        get.setAttribute("method", "GET");
    } else {
        post.setAttribute("method", "POST");
    }
}

Я пытаюсь сделать, но это не работает. Может ли кто-нибудь помочь мне

Answer 1

Вы устанавливаете атрибут с помощью переключателя. Вместо этого установите его в форме.

Решение для минимального изменения может выглядеть следующим образом.

function updatemethod() {
    const getBtn = document.getElementById("rdGet");
    const postBtn = document.getElementById("rdPost");

    if (getBtn.checked) {
        document.getElementById("frmid").setAttribute("method", "GET");
    } 
    else if (postBtn.checked) {
        document.getElementById("frmid").setAttribute("method", "POST");
    }            
}

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

Существует еще один более краткий способ сделать это, вызвав функцию и передав this.

onchange="updatemethod(this)"

Здесь this относится к элементу переключателя и теперьвам не нужно выполнять поиск в DOM-дереве.

Функция теперь

function updatemethod(elem) {    
    if (elem.checked) {
        elem.form.setAttribute("method", elem.value);
    }      
}

Однако это зависит от наличия у вас соответствующего атрибута value в html.

например

<input type="radio"  value="VALID VALUE HERE" ... />

Answer 2

Для этого вы можете использовать DOM javascript.

function updatemethod() {

    let formfrmId = document.getElementById('frmid');
    let typeMethod = document.getElementsByName('typeMethod');
    let numberRadioTypeMethod = typeMethod.length;

    for (i = 0; i < numberRadioTypeMethod; i++ ) {
        if (typeMethod[i].checked) 
            formfrmId.method = typeMethod[i].value;
    }
}

Используйте консоль браузера, она предоставит вам все свойства и функции DOM, которые вы можете использовать в javascript.