如何使用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

您可以为此使用 javascript DOM。

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 中使用