HTML Form Input to External Javascript Variable

Question

Most of the solutions I have found deal with localized javascript instead of an external file so I am posting this question. Links to attempted solutions:

Turn HTML Form Input into JavaScript Variable

I want to take a html form input and use that input in an external javascript file.

The html form input comes from index.html

<script src="script/our.js"></script>
<div class="searchbar">
    <form action="">
        <input type="text" placeholder="search ..." name="query" onchange=formChange()>
        <button type="submit">sendit bro</button>
    </form>
</div>
<script>
    function formChange(){
        var searchThis = document.getElementsByName("query").value;
    }
</script>

Then, our.js tries to use the variable like so:

var Manager;
(function ($) {
    $(function () {
        Manager.store.addByValue('q', searchThis);
    });
})(jQuery);

With my current setup, if I searched a term ("unlock") the form will send and the page will show it has found 0 documents. It does not say that searchThis is undefined The back end of my js works with searchThis being replaced by "*:*" to display all records instead of those with the searched string.

EDIT #1 : Manager.jquery.js to see if I need to allow for search term to be a variable an not just a string REDACTED

EDIT #2 : I have been trying suggestions below. Currently:

index.htmlchanged

<script>
    function formChange(){
        var searchThis = document.getElementsByName("query")[0].value;
        console.log(searchThis);
        window.searchThis = searchThis;
        console.log(window.searchThis);
    }
</script>

our.jschanged

    Manager.store.addByValue('q', window.searchThis);

The console.logs in index.html return my search term. However if I do the same just before window.searchThis is called in our.js it returns as undefined.

EDIT #3 I have been playing with importing the searchThis variable. I cannot import window.searchThis because I get an error for unexpected . In full when I try:

import searchThis from "../index.html"

It gives me an error stating:

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

EDIT #4 : my <form> + <script> section with adjustments

<div class="searchbar">
    <form>
        <input type="text" placeholder="search Nicola..." name="query" onsubmit=formChange() >
        <button type="submit">sendit bro</button>
    </form>
</div>
<script>
    function formChange(){
        searchThis = document.getElementsByName("query")[0].value;
        term = searchThis;
        console.log(term);
    }
</script>
<script defer="defer" src="script/our.js" type="module"></script>

Ive added my form section because I could be doing something wrong here too. When I go to my main page the console.log on our.js has already been logged as undefined. When I enter a search term with onchange instead of onsubmit the console logs from my <script>. Once I hit submit, the page flashes and the log for our.js is again at the top and undefined.

EDIT #5 : pic of logs described above (before submit)

@DanielA.White sorry, not sure how to change that to make searchThis global. I changed my our.js from searchThis to formChange.searchThis but that hasn't helped my situation. — Newb 4 You BB
– Newb 4 You BB, Commented Apr 1, 2019 at 15:43

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2019-04-01 20:00:18Z

0

You could use the window object.

Add a new property named searchThis to the window object and assign the obtained value of the searchThis variable.

function formChange() {
  var searchThis = document.getElementsByName("query")[0].value;
  window.searchThis = searchThis;
}

Then, just call it by using window.searchThis:

var Manager;
(function($) {
  $(function() {
    Manager.store.addByValue('q', window.searchThis);
  });
})(jQuery);

Update: document.getElementsByName("query") returns a NodeList. You could use document.getElementsByName("query")[0] to refer to a single element.

The availability of a variable for reuse in another external file depends on the order of loading or initialization.

The issue that you have is that our.js is running before the window.searchThis is declared.

You can do:

Add a defer attribute in the script tag. Example: <script defer="defer" src="script/our.js"></script>.

OR

Put the <script src="script/our.js"></script> at the end.

Something like this:

<script>
  function formChange() {
    var searchThis = document.getElementsByName("query")[0].value;
    window.searchThis = searchThis;
  }
</script>
<script src="script/our.js"></script>

edited Apr 1, 2019 at 20:00

answered Apr 1, 2019 at 16:05

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

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

17 Comments

Newb 4 You BB Over a year ago

Unfortunately this didn't work for me. If the window.searchThis in our.js is replaced with a string like "unlock" it will display all documents related to that term. If that function is expecting a string instead of a variable, would that cause issues? I haven't gotten an error when using a variable in place of the search term.

Danny Fardy Jhonston Bermúdez Over a year ago

document.getElementsByName("query") returns a NodeList. You should use console.log(document.getElementsByName("query")[0].value). I've updated my answer.

Danny Fardy Jhonston Bermúdez Over a year ago

Let us continue this discussion in chat.

Danny Fardy Jhonston Bermúdez Over a year ago

@Newb4YouBB I've made a simple demo in Plunker recreating your scenario in this link: next.plnkr.co/edit/….

Newb 4 You BB Over a year ago

I haven't had a chance to use your demo yet, but I wanted to thank you ahead of time. Always appreciate those who are willing to assist beyond expectation. Thank you.

|

Collectives™ on Stack Overflow

HTML Form Input to External Javascript Variable

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related