如何使用JavaScript更改输入名称属性值

Question

我是js编程的新手，我在这里有个项目，点击链接后，我需要更改默认名称属性值。 此刻是我的表格：

<form id="searchform" action="" method="GET">
            <input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
            <input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
            <div class="search-filter">
                Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
            </div>
        </form>

======================

如您所见，我的输入#intextbox的默认名称值为q ，当我单击Continent链接时，我想将其更改为listingfields [1] 。

来自：

<input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">

至：

<input id="intextbox" maxlength="150" size="20" value="" name="listingfields[1]" type="text" placeholder="Insert your keyword here..">

如何使用JavaScript做到这一点？ 感谢您将来的帮助。 干杯!

Answer 1

您的解决方案在这里：

<form id="searchform" action="" method="GET">
    <input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here..">
    <input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit">
    <div class="search-filter">
        Search By: <a id="FilterByContinent" onclick="changename();" >Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a>
    </div>
</form>

<script>
function changename(){
    document.getElementById('intextbox').name = "listingfields[1]";
}
</script>

Answer 2

看一下这个：

 //getting the name attribute before: var currentName = document.getElementById("intextbox").name; document.getElementById("intentBoxName").innerHTML = currentName; //Now for changing the name attribute of input, //first add an Event Listener to the continent link: var continentLink = document.getElementById("FilterByContinent"); continentLink.addEventListener("click", function() { document.getElementById("intextbox").name = "listingfields[1]"; //Just for showing the change in the name attribute: var newName = document.getElementById("intextbox").name document.getElementById("intentBoxName").innerHTML = newName; }); 

 <form id="searchform" action="" method="GET"> <input id="intextbox" maxlength="150" size="20" value="" name="q" type="text" placeholder="Insert your keyword here.."> <input id="wpbdmsearchsubmit" class="submit wpbdp-button wpbdp-submit" value="Search" type="submit"> <div class="search-filter"> Search By: <a id="FilterByContinent">Continent</a> | <a id="FilterByCountry">Country</a> | <a id="FilterByFlag">Flag</a> </div> </form> <br/> <br/> <h5> Name Attribute: </h5> <div id="intentBoxName"></div> 

如果您刚刚用Google搜索“使用javascript更改名称属性”，就可以轻松找到答案。 在发布问题之前，您应该花一些时间在Google上查找。 我希望上面的代码片段能达到您的期望。