Develop Reference

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

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.

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.

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();
}
});

JS generated code readable for screen readers

I'm trying to understand and figure out if the code generated by JavaScript will provide info for screenreaders like regular HTML tags. I'll show you what I mean.
I want my div1 text to change relatively.
<script>
function changeText()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText2()" value="Change Text2" />';
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input type="button" onclick="changeText()" value="Change Text" />';
}
</script>
<div id="div1">
<input type='button' onclick='changeText()' value='Change Text'/>
</div>
It does the trick and I'm very excited by that, because I'm very new to coding, but I want my site to be adoptable for blind people who use screenreaders. When I checked the generated HTML code, the code does not change by pressing the button, so I assume the screenreaders will be reading this first button(in the HTML layout) without paying any attention for the generated code.
If I'm right, what can I do about it? Is there any way to change text like that.

Look at Accessible Rich Internet Applications (WAI-ARIA).

How do you concatenate a string with a variable/pass to link?

I'm trying to make a simple page to send IR codes to an app on my phone (OneRemoteToControlThemAll). This is how the dev of the app shows to communicate with it via html, which works 100% fine.
>"Send codes using URI "otrta://code?id=xxx" or "otrta://script?id=xxx" - use it for HTML layouts!"
<button type="button">Left</button>
But, this only works with a pre-entered id. So, I want to have a text box with a button that when the button is clicked it sends the code entered in the box. I've looked around for different methods and tried many, none quite working. Here's my most recent attempt:
<script type="text/javascript">
function myfunction()
{
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
return code;
}
</script>
html:
<input type="text" name="textbox1" Id="textbox1" style="width: 194px"/>
<button type="button" id="submit">Submit</button>
Right now on chrome on my PC this takes me to a page and outputs otrta://code?id=1234 or whatever numbers I had entered. On my phone the button does nothing. Any solutions on how to make it act the same as the others and work? It doesn't need to be perfect form, just something that will work, thanks for any help.

Your return value is getting discarded. You need to set the href property of window.location.
<script type="text/javascript">
function set_href() {
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
window.location.href = code;
}
</script>
--
<input type='submit' onclick='set_href()'>

Try replacing the href itself:
function myfunction(link) {
link.href = "otrta://code?id=" + document.getElementById("textbox1").value;
}
<input type="text" name="textbox1" Id="textbox1" style="width: 194px" />
<button type="button" id="submit"><a href="#" onclick='myfunction(this);'>Submit</a>
</button>

How to create html elements in a form, without reloading the page?

I'm looking for a way to add html elements to a form by using for example a button. I've been looking on a few examples out there but they are very big (like 3+ times the size of the actual form I want to build) so I'm wondering if there is a better way of fixing this.
My idea is something like this:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
</form>
And by clicking the button, the following should be rendered:
<form action='blabla.php' method='post'>
<!-- Insert button here to add a new element -->
<input type='text' name='desc_1'>
<input type='text' name='desc_2'>
</form>
I want a new input field to be created, without the page having to reload and loose ev data entered in the form. Guessing this is something I should achieve through javascript or even jquery. I know how to edit an existing input field but I have no clue on how to create a new one and make it follow its numberrange. Anyone have an idea on how to apporoach this with a javascript function? Or should I invest in some time researching jquery for a smoother solution?

You can do
html
<button onclick="create();">Create Field</button><br><br>
<form id="frm">
<input type='text' name='desc_1' placeholder="Input Field 1"><br>
</form>
javascript
var count=1;
function create(){
//alert();
count++;
document.getElementById('frm').innerHTML+='<br/><input type="text" id="'+count+'" placeholder="Input Field'+count+'" /><br/>';
e.prventDefault();
}
FIDDLE

$("button").click(function(){
var count = $("input").length + 1;
$("form").prepend("<input type='text' value='desc_" + count + "' name='desc_" + count + "'><br>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button>add input</button>
<br>
<form action='blabla.php' method='post'>
<input type='text' name='desc_1'>
</form>
EXAMPLE

AJAX is your answer. It will let you update a website content without needing to refresh the page over and over again.

the salution your looking for is posible with XMLhttpRequest.
http://www.w3schools.com/xml/xml_http.asp
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first
good luck

Change Image from Form Input with Javascript and HTML

I want to make a Skin Viewing Website for the game Minecraft and I need to have a simple form that displays an image from Minotar.net and then displays the entered username with thier image / skin under the form
The form should add the username to the end of the url, for example:
Form text submitted: Notch
Changes: img src="https://minotar.net/skin/username" to img src="https://minotar.net/skin/Notch"
and displays the image below the form.
--
The code that I tried
<div class="page-header">
<h2>Enter a Minecraft Username to download skin:</h2>
</div>
<div class="input-group">
<input type="text" id="page" class="form-control">
<span class="input-group-btn">
<input type="submit" value="Download Skin!" onclick="goToPage();" class="btn btn-success">
<img id="page" src="http://minecraft-skin-viewer.com/skin.php?user=">
</span>
Javascript:
function goToPage() {
var page = document.getElementById('page').value;
img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }
JSfiddle http://jsfiddle.net/4dqbP/14/
Thanks!

Wow, you're doing well for just starting JavaScript. I found a few errors in your code and corrected them in a JSFiddle at the end of my answer. Here are your mistakes, for future reference:
Unlike classes, ids MUST be unique. You had two ids both named "page." This is not valid HTML, and will cause errors.
You used img.src. This is allowed, but only if img is a variable. In the fiddle, I made img a variable, by using the getElementById method.
You should close your img tags and input tags. People will say "what do you mean, close those tags?" Well, just for consistency, and making XHTML easier to learn later, it's a good habit to make sure your input tag looks like this:
<input type="text" id="textbox1"/>
Not this:
<input type="text" id="textbox2">
(Notice the missing "/" at the end.)
Other than that, I just cleaned up some formatting. You're good to go!
JSFiddle Here