CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
dabbax
dabbax

Reputation: 1

Form Submit works with Button, but not with Enter key

I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.

I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.

I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)

The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.

I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.

i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.

Live demo here: museum.smallfilms.ch/drei

The code for the form is the following:

 <!-- Jumbotron Header -->
    <header class="jumbotron hero-spacer">
        <h1>Katalog:</h1>
        <p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
        <p>
<form onsubmit="searchpage()">
    <input type="number" pattern="\d*"/min="1" max="9999" id="num" >
    <button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>

The Javascript code is the following:

function searchpage() {


  var num = document.getElementById('num');
  var targetFrame = document.getElementById('targetFrame');


  if (num.value) {
    var page = 'pages/' + (+num.value) + '.html';
    targetFrame.setAttribute('src', page);
  }
}

If you need more code I can deliver this. Just let me know that you need.

The site is now designed to show something for the numbers 1 and 2.

The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)

I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.

Thanks in advance for any help and hint.

Dabbax

Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip

Upvotes: 0

Views: 137

Answers (3)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

This could be your html:

<form id="searchForm" action="some_url">
    <input type="number" pattern="\d*"/min="1" max="9999" id="num" >
    <input type="button"  value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>

Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like

$('.entr').keypress(function(event) {
      if (event.which == 13) { // this is the enter key code
            document.getElementById('searchForm').submit();
      }
});

Upvotes: 0

wdika
wdika

Reputation: 146

On your code for the form, try:

<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>

edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.

That's why you should use button and not input here.

Upvotes: 1

Shaam
Shaam

Reputation: 92

I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :

<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">

In this case, when you press enter, the form will be submitted and call the searchPage function.

Upvotes: 1

Related Questions