如何使用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，我想將其更改爲listingfields [1]單擊Continent鏈接時。

所以從：

<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上查找。我希望我上面的代碼片斷能夠滿足你的期望。