form javascript submit event

Question

I want to manage a form only with javascript, but the eventlistener doesn't worked for me. What's wrong?

My form:

<script src="init.js"></script>
<div id="search_box">
    <form id="search_form">
        <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
        <input type="button" value=&#9679; id="searchsign">
    </form>
</div>
<script src="search.js"></script>

In init.js file:

"use strict";

function $(selector){
    return document.querySelector(selector);
}

function $$(selector){
    return document.querySelectorAll(selector);
}

in search.js file:

$('#searchsign').addEventListener('click', search);
$('#search_form').addEventListener('submit', search);

function search(){
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + searchvalue;
}

Does this answer your question? How to prevent form from being submitted? — Flimm
– Flimm, Commented May 6, 2020 at 10:58

T.J. Crowder · Accepted Answer · 2016-09-13 17:48:58Z

The form's submit event will go to the form's action (no action = the current URL) and reload the page.

If you're handling it with JavaScript, accept the event argument and call preventDefault on it to prevent the default behavior:

function search(e) {
    e.preventDefault();
    // ...
}

I would also suggest either not making your functions globals, or giving search a different name to avoid conflicts in the global namespace.

Side note: You need to URI-encode query string arguments, so change your location assignment to use encodeURIComponent:

window.location = google + encodeURIComponent(searchvalue);

Working copy on JSBin (Since Stack Snippets work in frames that don't allow us to move off to Google)

Source of working example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="search_box">
  <form id="search_form">
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
    <input type="button" value=&#9679; id="searchsign">
  </form>
</div>
<script>
"use strict";
(function() { // Scoping function to avoid globals
  function $(selector) {
    return document.querySelector(selector);
  }

  function $$(selector) {
    return document.querySelectorAll(selector);
  }

  $('#searchsign').addEventListener('click', search);
  $('#search_form').addEventListener('submit', search);

  function search(e) {
    e.preventDefault();
    console.info('search function OK');
    var searchvalue = $("#searchbox").value;
    var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + encodeURIComponent(searchvalue);
  }
})();
</script>
</body>
</html>

Pabs123 · Accepted Answer · 2016-09-13 17:44:38Z

0

Code looks fine to me here

The results aren't going to show because google does not allow itself to be iframed, but you can see your console logs are printing just fine.

If you are not seeing the same results as above in your code, then I'm guessing there is an issue with the order or manner in which you are including your files.

answered Sep 13, 2016 at 17:44

Pabs123

3,43315 silver badges30 bronze badges

Comments

berrtech · Accepted Answer · 2016-09-13 17:45:18Z

If you want to trigger submit event, do not add click event listener to submit button, instead change its type to submit.

Do not forget to add e.preventDefault() in submit function to prevent default submit behaviour and page reloading

"use strict";

function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

$('#search_form').addEventListener('submit', search);

function search(e) {
  e.preventDefault();
  console.info('search function OK');
  var searchvalue = $("#searchbox").value;
  var google = "https://www.google.hu/search?site=&source=hp&q=";
    window.location = google + searchvalue;
}

<script src="init.js"></script>
<div id="search_box">
  <form id="search_form">
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
    <input type="submit" value=&#9679; id="searchsign">
  </form>
</div>
<script src="search.js"></script>

Collectives™ on Stack Overflow

form javascript submit event

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related