How to change Input Name Attribute Value using JavaScript

Question

I have project here were in I need to change the default name attribute value when a link is clicked. Here's my form at the moment:

<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>

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

As you can see, the default name value of my input #intextbox is q and I want to change it to listingfields[1] when the Continent link is clicked.

so from:

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

to:

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

How can I do this with JavaScript?

document.getElementById('intextbox').name = "listingfields[1]"; — Lil Devil
– Lil Devil, Commented Dec 3, 2015 at 5:26

Rajender Kumar · Accepted Answer · 2015-12-03 05:41:31Z

1

Your solution is here :

<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>

answered Dec 3, 2015 at 5:41

Rajender Kumar

1667 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thereisnospoon · Accepted Answer · 2015-12-03 05:46:52Z

Check this out:

//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>

If you had just googled "change name attribute using javascript" you'd have found the answer easily. You should spend some time looking up on google before posting it as a question. I hope my snippet above does what you were expecting.

Collectives™ on Stack Overflow

How to change Input Name Attribute Value using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related