CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Vineeth Chitteti
Vineeth Chitteti

Reputation: 1574

Form value is null in chrome extension

JS newbie here. I have searched all over stackoverflow before posting this question, please comment on the question if it is a duplicate and need to be removed.

I'm creating a form in google chrome extension which takes an input and logs it in the console when the submit button is pressed.

I'm able to fetch the element(by Id), but there is no value in it even after I'm clicking the submit button after entering the zip code. Here is the code:

document.addEventListener('DOMContentLoaded', function() {
    var zipCode = document.getElementById("zipCode");

    console.log("Zip Code is: " + zipCode.id);
    console.log("Zip Code value: " + zipCode.value);
}, false);


<body style="width:320px;height:580px;">
    <form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
        <h3>Zip Code</h3>
        <input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
        <input type="submit" id="button" value="  Tap" style="font-family: 'Open Sans'" name="Submitted zip code">
    </form>
</body>

The console output is:

Zip Code is: zipCode
Zip Code value:

Upvotes: 1

Views: 564

Answers (2)

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

When the submit button is pressed the page is reloaded so there is no value in

<input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

at the time you try to get it ("DOMContentLoaded"). If you want to get the value after the submit button is pressed you need to get it from the url where it is being stored as values after the ?

First your form field needs a name attribute:

<input type="text" id="zipCode" name="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">

and then you can get the passed values using the URL object:

var url = new URL(location.href);
var zipCode = url.searchParams.get("zipCode");

Upvotes: 1

xianshenglu
xianshenglu

Reputation: 5309

guess you want this,you can get the value only after the button have been clicked;

document.addEventListener('DOMContentLoaded', function() {
  var zipCode = document.getElementById("zipCode");

  console.log("Zip Code is: " + zipCode.id);
  var btn = document.getElementById('button');
  btn.addEventListener('click', function() {
    event.preventDefault();
    console.log("Zip Code value: " + zipCode.value);
  }, false)

}, false);
<body style="width:320px;height:580px;">
  <form action="/main.html" style="position: center; text-align: left; padding-left: 20px">
    <h3>Zip Code</h3>
    <input type="text" id="zipCode" align="left" size="8" style="padding-left: 0%; padding-bottom: 10px;font-family: 'Open Sans'">
    <input type="submit" id="button" value="click me" style="font-family: 'Open Sans'" name="Submitted zip code">
  </form>
</body>

Upvotes: 2

Related Questions