Develop Reference

How to reset value

If I clicked the button with value of 100 the result is 100 and it will display on the input field, if I clicked the reset button it will cleared the field. But the problem is if I clicked again the button with value of 100 the result will be now 200.
function resultreset() {
document.getElementById("result").reset();
}
I expect the reset button will reset (back to zero) the result in the input field, but it's just clearing it.

See documentation on HTMLFormElement.reset():
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.
The default value is not 0, but an empty string. If you want the default value to be 0, you have to say so explicitly in the HTML, eg with
<input value="0">
function resultreset() {
document.getElementById("result").reset();
}
button.onclick = resultreset;
<form id="result">
<input value="0">
</form>
<button id="button">click</button>

If you put this into form tag it will work properly Because you can not use reset() method on input tag it will definitely throw an error.
Your output can be achieved in two ways:
First using form
function myFunction() {
document.getElementById("myForm").reset();
}
<form id="myForm">
<input type="text" name="lname" value="0">
<input type="button" onclick="myFunction()" value="Reset ">
</form>
Second using defaulValue property
document.getElementById("input_id").defaultValue = "0";

( HTML5, JQuery) Attributes of Input elements are ignored by JQuery

In HTML5, when I make a text box like below, and press the submit button.
<input type='number' name ='search_size' id ='search_size' class="" value="" min="0" max="100" >
When the value doesn't meet the min, max value, it will not proceed. However,
My button that handles the text box is made of JQuery. When I type nothing, and click, it processes it. When I type the value over 100, it also processes it. (There are other values from other tags and etc.)
Is there something I can add to JQuery so that it will check the condition or requirement in the text box?
I want to show the JQuery code here, but it is pretty long. Some of it looks like the below.
$("#search_submit").off("click").on("click", function(event_receiver){
$("#loading").css('z-index',-1);
$("#loading_search").css('top',$("#dialog_data_search").position().top + ($("#dialog_data_search").height()*0.7) );
$("#loading_search").show();
var search_data;
var request_obj = {
"baseDN" : $("#search_base_dn").val()
,"filter":$("#search_filter").val()
,"attribute":$("#search_attribute").val()
,"sortAsc":true
,"scope":$(":radio[name='search_scope']:checked").val()
,"size":$("#search_size").val()}; //<-- this guy!!
$.ajax({
url:"/browser/ajaxGetSearchData"
,dataType:"json"
,data:request_obj
,async:true
,type:"post"
,success:function(return_data){
if(return_data.success){
search_data = return_data.result;
}else{
alert(return_data.message);
}
}

you can add a validate function inside the jquery click function of yours. in that validate function the value of the input field must be validated. if it exceeds 100 it should return false

Instead of the <button>'s click event, you want to hook on the <form>'s submit one.
The click event will fire even though the form is invalid, while the submit one will first perform the validation:
document.getElementById('btn').onclick = e => console.log('btn has been clicked');
document.getElementById('form').onsubmit = e => console.log('form has been submitted');
<!-- an always invalid form... -->
<form id="form">
<input name="foo" maxlength="0" required>
<button id='btn'>bar</button>
</form>

Use validation bootstrap like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="number">Number</label>
<input type="number" class="form-control" name ='search_size' id ='search_size' value="0" min="0" max="100" required>
</div>
<button class="btn" type="submit">submit</button>
</form>

Javascript - Increment Number in Form

I am just trying to increment a number in a form. This works but the input is big, tried to size with no luck. And I don't want the increment up/down inside the input box. Changing the box to text, gets me the right sizing and no up/down. But the increment doesn't work.
Is there an easier way. Also when I put inside a <form> tag, the plus minus button don't work.
function HaFunction() {
document.getElementById("HNumber").stepUp();
}
function HmFunction() {
document.getElementById("HNumber").stepDown();
}
Number: <input type="number" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button onclick="HaFunction()"><b>+</b></button>
<button onclick="HmFunction()"><b>-</b></button>
</span>

You can make the input smaller with CSS:
<input style="width:40px" type="number" id="HNumber" class=verd15 value="0">
Hope this helped

You can write your own function that increments the number in a text input.
If you have a form, make sure your buttons use type="button". By default it's type="submit", so clicking on the button will submit the form and you'll reload the page.
function addToInput(element, amount) {
var val = parseInt(element.value, 10) || 0;
val += amount;
element.value = val;
}
function HaFunction() {
addToInput(document.getElementById("HNumber"), 1);
}
function HmFunction() {
addToInput(document.getElementById("HNumber"), -1);
}
<form>
Number: <input type="text" id="HNumber" class=verd15 value="0">
<span class=verd13>
<button type="button" onclick="HaFunction()"><b>+</b></button>
<button type="button" onclick="HmFunction()"><b>-</b></button>
</span>
</form>

Multiple JavasScript submits in the same form

When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part
When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.
I don't want to disable Enter Key press, but that he executes the good submit input.
Is there a way to deactivate submit1 after he has been executed?
Or know from which input text Enter Key has been pressed?
HTML:
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
CSS:
#3, #4
{
display: none;
}
JavaScript:
$(document).ready(function() {
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});

Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).
Also, you can disable any button using the disabled attribute (set it to true).
to disable
document.getElementById("submit1").disabled = true;
to enable:
document.getElementById("submit1").disabled = false;

From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.
Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?

<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.

If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?
Anyway, you can do this:
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
This will force the user, the next time he hits ENTER, to submit the submit2 button.
But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?
$("#submit1").submit(function(){
/* Blah blah blah... */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
$("#submit2").submit(function(){
/* ... */
});
As other users have said, are submit1 and submit2 in the same <form> tag:
Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.
Do this:
HTML
<form>
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
</form>
<form>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
JQuery
$("#submit1").submit(function(e){
/* Blah blah blah... */
e.preventDefault(); // Keeps the user on the same page //
});
$("#submit2").submit(function(e){
/* ... */
e.preventDefault(); // Keeps the user on the same page //
});

I let it work like that:
Why should I have troubles with one form? IE < 6?
HTML:
<form>
<div id="1">
<input type="text" id="text1"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" id="text2"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
CSS:
#3, #4
{
display: none;
}
JAVASCRIPT:
$(document).ready(function() {
$('#text2').keypress(function(e){
if(e.keyCode==13)
$('#submit2').click();
});
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
document.querySelector("#submit1").disabled = true;
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});

when I click submit, it goes straight onto another page

My form submits to another page when I do not want it to. The current page is known as create_session.php
I want the form to submit if all of the validation and the postback is met and even after that the user needs to click "Ok" when the confirmation box appears. Except this never happens. When the user clicks on the submit button, it takes the user straight to another page "QandATable.php", it doesn't care about about validation(), the postback() and the confirmation box doesn't appear.
So what I want to know is that when the user clicks on the submit button, how can I get it so that it checks for the validation(), postback() and confirmation box (showConfirm()) before even going onto the next page.
I believe the problem is the submit button and the form action. Below is the form:
<form action="QandATable.php" method="post" id="sessionForm">
<p><input type="text" id="txtMarks" name="textMarks" onkeypress="return isNumberKey(event)" maxlength="5" /><br/><span id="marksAlert"></span></p>
<p><strong>Room:</strong> <input type="text" id="room" name="roomChosen" value="<?php echo $roomChosen; ?>" />
<br/><span id="roomAlert"></span></p> <!-- Enter Room here-->
<p><input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>
Below is the javascript click handler where it checks for the validation(), postback() and then if both of those met then it will showConfirm().
function myClickHandler(){
if(validation()){
postback(function(message) {
if (message == "")
showConfirm();
});
}
}

You need to return false from your onClick handler to prevent the form from being submitted.

You need to make sure the default action isn't applied when the submit button is clicked. In this case, the default action is to submit the form.
Try adding a return false; such as
<input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler(); return false;"/>

Two changes; you need to pass the function, not the function's return value, and you need to return false:
<input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler" />
------------------------------------------------------------------------------------------------------------^ here
and
function myClickHandler(){
if(validation()) {
postback(function(message) {
if (message == "")
showConfirm();
});
}
return false;
}