We Keep Coding

How to get form input to appear as query params when div is click instead of button

I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.

Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>

If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.

HTML5 required attribute trigger action with jQuery

I'm working on a prototype and I want to trigger an action after a submit but only if the required fields were filled.
I have this code
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>
And also an input on my form using the 'required' attribute from HTML 5, like this
<input type="text" class="form-control" placeholder="Name" required>
I want to trigger the action onclick only if the input was filled.
I suppose I could do this by checking if the input was filled using jQuery, I was wondering if there is a simpler way

Well, I have actually found a solution, if anyone is going through the same problem, this is how I did it.
Instead of using "onclick" on the button tag I added an "onsubmit" (I had no clue this existed) event inside my form tag with my doSomething function, like this:
<form onsubmit="doSomething()">
The function will only be called if the required inputs are filled, easy as that.
Thanks for the ones who tried to help anyway

Try using oninput event
function doSomething() {
console.log("do stuff")
}
document.querySelector("input").oninput = function() {
this.nextElementSibling.click()
}
<input type="text" class="form-control" placeholder="Name" required>
<button type="submit" onclick="doSomething()" class="btn btn-primary">Register</button>

Well you can always use this https://jsfiddle.net/2Lzo9vfc/26/
HTML
<button type="submit" class="btn btn-primary">Register</button>
<input type="text" class="form-control" placeholder="Name" required>
JS
$('button').click(function() {
var content = $('input').val();
if(content != '') {
alert(content);
}
});

JavaScript function not executing?

I am very new to JavaScript and web development in general. I have a problem when I want to have my log in system executes a JavaScript function when the user submits but it does nothing when it should print to the screen. I can't figure out exactly what I am missing. Any help will be greatly appreciated!
<form name="sign_in" onsubmit="check_stuff()">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script>
function check_stuff(){
document.write("gametime");
}
</script>

The function is writing to the document, but that will just be visible for a very short time while the page reloads. The form will still be posted, so the page will reload and replace what you have written.
You would want to return the result from the function in the event handler:
onsubmit="return check_stuff()"
That will allow you to return false from the function if you want to keep the form to be posted:
function check_stuff(){
document.write("gametime");
return false;
}
(I assume that you are just using the document.write for testing purposes, as it will replace the entire current page with what you write.)

This works fine. Although it overwrites the DOM because document.write is called after it loaded. This means only gametime will be on the screen afterwards. It does show but, but submitting a form reloads the page. So it will appear as nothing happened.
To fix this you will want to return false; in which will not submit the form. Also change onsubmit="check_stuff()" to onsubmit="return check_stuff()".

It works ok for me, I think the issue you have is that te page is reloading after submit. Just add a return false; after the check_stuff() call to avoid the reload.
<form name="sign_in" onsubmit="check_stuff(); return false;">
Check out this codepen.

if you want current page not be redirected, you should submit your form to a iframe in current page, like this:
<form name="sign_in" onsubmit="check_stuff()" target="#frame">
<b>Username...</b>
<br>
<input type="text" name="Username" value="Your Username">
<br>
<br>
<b>Password...</b>
<br>
<input type="text" name="Password" value="Your Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
<iframe id="frame" name="frame"></iframe>
<script>
function check_stuff(){
document.write("gametime");
}
</script>

prevent focus from leaving form fields

In my app, i have a login form like this
<div id="container">
<form name="login" id="login" method="post" action="">
<input name="email" type="text" class="label" id="email" placeholder="Enter email...">
<input name="password" type="password" class="label" id="password" placeholder="Enter password...">
<input type="submit" name="submit" id="submit" value="Login">
Sign Up
</form>
</div>
On touch devices, when I tap the screen, focus leaves the form fields (input,button,links). This happens on blackberry and android devices, haven't tried it on the iphone.
How can i prevent focus from leaving form fields? I'm building the app with phonegap.

I don't think you can prevent the user from clicking/selecting something else, but you can return the focus whenever it looses it. Simplest case:
<input onblur="this.focus()" type="text" name="text1"/>
But you can lock the user forever into that input unless you replace that with a function that evaluates if the current input still needs focus for some reason and otherwise not trigger the focus again.
If your problem is when the user does that to scroll the page, then you can try something like this:
<script type="text/javascript">
var last_selected_input;
window.onscroll = function () {
if (last_selected_input) {
last_selected_input.focus();
}
}
</script>
<input type="text" name="text1" onfocus="last_selected_input = this" />
But you need to clear the variable last_selected_focus whenever a field is complete to avoid the persistent focus on each page scroll.

could be as simple as a variable that maintains the current input selected.
$(document).ready(function () {
var selected;
$('input').focus(function (e){
selected = $(this).attr('id');
});
$('window').blur(function() {
$('#selected').focus();
});
});

How to get the values from a form and prevent submission?

I have this simple form:
HTML
<form>
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton"
onclick="doSomething();" type="submit">Create!</button>
</form>
JS
function doSomething() {
var name, email;
name = document.getElementById("eName").value;
email = document.getElementById("Email").value;
putElementsIntoTheDOM(name, email);
}
When the user inputs some information I want to populate the DOM with the user input.
The example above works. But I think it can be done better. I just don't know how.
How can I wire the <button> so that when the user clicks it the form values are passed
to the function doSomething()?
Also, since I'm not sending the form values anywhere except populating the DOM, how can I
prevent the submission?
I've seen something like this but I can't get it too work.
<button id="create" class="boton" onclick="doSomething(this.form);"
type="submit">Create!</button>

If you don't want to send the form values anywhere, then you just need to remove type="submit" from your button.
Your example code works fine. I'm not sure what you mean by a 'better' way. More modern/idiomatic javascript would not be using the onclick attribute, but instead binding doSomething to the button. Using jQuery, that would look like:
$("#create").click(doSomething);

First of all you have to update your function declaration to be able to receive the variables you want to send
function doSomething(name,email) {
}
Secondly, if you have to send values of some fields to that function, you can do so on button click like this.
<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>
However, using unobtrusive javascript is recommended, and for that jQuery is one of the options you can use for passing variables to your function neatly.

There is a difference between the type="submit" and type="button" that I didn't realize.
Also, the button and submit types react differently with onclick and onsubmit events.
For example
<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>
Notice that at the top of the form there is onclick.
The onclick is fired whenever you focus on an input element, and of course if you click the button.
Changing the form to <form onsubmit="doSomething(); but not changing the type="button" doesn't do anything. Clicking the button doesn't trigger the function.
By changing the type="submit"and keeping the head <form onsubmit="doSomething(); triggers the function when the button is clicked. A nice added functionality to this is that if you have any <input ... required="required"> the submit will only work if those fields are filled in (and your form will let you know about the required fields).
To prevent the submission/refreshing (since I'm only populating the DOM with user input) adding return false at the form head prevents submission
<form onsubmit="doSomething(); return false">.
Finally, to get the form values adding this:
<form onsubmit="doSomething(this); return false> and then
function doSommething(formInfo) {
var name = formInfo.eName.value;
var email = formInfo.Email.value;
...
}