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);
    }      
}

但这取决于您在html中具有适当的value属性。

例如

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

如何使用JavaScript更改表单的方法名称

2 个答案: