Develop Reference

Move data from on input field to another and submit form

I am trying to get one input field that is higher up the page, move it's content to a form field at the bottom of the page and submit the form.
Please see what I have done here (doesn't work):
$('#move_down').click(function() {
$('#input_1').val($('#input_2').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
Moving the data is just the first part, I am also trying to get it to take the user down to the main form and submit it - is this possible with jQuery?
Updated the question to fix my silly error of omitting the ID selectors. Just need to figure out how to submit the form now.

You are right; just correct your query selector:
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
http://jsfiddle.net/82x28ryr/4/

Missing the # prefix for id selector
Works fine doing
$('#move_down').click(function() {
$('#input_2').val($('#input_1').val())
});
<input type="text" id="input_1" value="">
<br>
<button id="move_down">Click Here</button>
<br>
<input type="text" id="input_2" value="">
<script src="//code.jquery.com/jquery-3.2.0.js"></script>
As for "moving down" you have only provided html in demo for 2 inputs. You need to update question with all relevant html in order to implement additional features

How to make an alert when a form item is not answered?

I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>

There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/

use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}

How to show custom validation message for number input type

html5 quantity input field is defined in html below.
Pressing submit button in Chrome shows error
value must be less or equal to 1484
How to fix this so that message is
Selected quantity is more than stock status
I tried to use setCustomValidity() as show in code below but browser standard validation message
value must be less or equal to 1484
still appears instead of custom validation message.
<form>
<input class="amount" name="quantity" type="number"
value="1" size="4" min="0" step="1" max="1484"
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity('')">
<input type="submit" value="Add to cart"/>
</form>
Bootstrap 3 and jquery-ui are used

You really should not use inline HTML event handling attributes as they:
create spaghetti code that is hard to read and leads to duplicated
code
create global wrapper functions that alter the this binding in the
callback
don't follow the W3C DOM Event standard
Also, by doing this in pure JavaScript, you give yourself more options for handling the errors. Here, we've got different error messages for too low of a value vs. too high of a value.
The following snippet may not work in the Stack Overflow snippet environment, but you can see it working here.
// Get DOM reference
var input = document.getElementById("num");
// Add event listener
input.addEventListener("input", function(e){
// Clear any old status
this.setCustomValidity("");
// Check for invalid state(s)
if(this.validity.rangeOverflow){
this.setCustomValidity("Selected quantity is more than stock status");
} else if(this.validity.rangeUnderflow){
this.setCustomValidity("Selected quantity is less than stock status");
}
});
<form>
<input type="number" id="num" name="quantity" class="amount"
value="1" size="4" min="0" step="1" max="1484">
<input type="submit" value="Add to cart">
</form>

Try This:
<form target="_blank">
<input class="amount" name="quantity" type="number"
value="1" size="4" min="0" step="1" max="1484"
oninvalid="this.setCustomValidity('Selected quantity is more than stock status')"
oninput="setCustomValidity()">
<input type="submit" value="Add to cart"/>
</form>

adding numbers from html input with php

I want to add the numbers I enter in an input form so I have to include it in an array and when I click the button it adds the numbers in new line.
This is the html code of the input and button
<input type="button" id="add" name="add" value="Add to sales order" />
<input type="text" name="price" id="price" placeholder="Enter Price"/>

Take a look into this JSBin: http://jsbin.com/pahirikuwako/1/edit
So, the behavior here is next: as soon as you enter price and press "Add sales to order" the new line will appear with specified price.
If you was thinking of any other behvaior please try to explain it more clear and I will update JSBin respectively or you can try to do it yourself.

loop focus of input fields inside a form

<form>
<input tabindex="1" required>
<input tabindex="2" required>
<input>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input tabindex="5" required>
<button type="button" tabindex="6"></button>
<button type="submit" tabindex="7"></button>
</form>
Here I have a form with some input fields and two button at the end of the form... and I am using tabindex attribute to focus them in order... now on tab key down I need to focus the first input field with tabindex="1" after release focus from the submit button as like as the form focus input field of tabindex="3" after releasing focus from input field of tabindex="2"... How can I do that...??
please don't use any jQuery... only javascript or html...

Black Cobra's answer works, unless you're using your id attributes for something (which I was). It's easy enough to edit his code to work for anyone though:
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
</button>
</form>
I just changed this:
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
to this:
onFocus="this.tabIndex=1;"
onBlur="this.tabIndex=8;">
It's not dynamic, but it's really easy. If you want dynamic, see here.

Finally, I have solved my problem... with HTML and a little javascript it can be done easily... means loop focus of input fields inside a form...
<form>
<input tabindex="2" autofocus required>
<input tabindex="3" required>
<input>
<input tabindex="4" required>
<input>
<input tabindex="5" required>
<input tabindex="6" required>
<button type="button" tabindex="7"></button>
<button type="submit" tabindex="8" id=""
onFocus="this.id=this.tabIndex;this.tabIndex=1"
onBlur="this.tabIndex=this.id">
</button>
</form>
Here I skip the tabindex="1" and start with tabindex="2"... then I add 2 more attribute in the submit button... onFocus & onBlur... moreover, I am using the id attribute to memory the primary or real tabindex number of the submit button... when the user will focus on the submit button, javascript will change its tabindex from 8 to 1... now if the user hit the tab button the form will try to find out the element that have the next tabindex... means the first input field... again, when the focus will leave the submit button, javascript will retrieve its real tabindex from its id... means the tabindex will be changed from 1 to 8... in this way the focus will keep looping inside the form...
Live Demo