Develop Reference

How does type is submit work in javascript?

Type="Submit" and type="Button" in element input. How are they different? When I use type="button" then it submits successfully but type="Submit" does not? why is that?
<form class="crush-form">
<div>
<input class="name" type="text" name="name" required />
<label for="">Name</label>
</div>
<div>
<input class="address" type="text" name="address" required />
<label for="">Address</label>
</div>
<div class="lol">
<input
type="submit"
onclick="SubmitClickHandle()"
name="huhu"
value="ggg"
/>
<button onclick="closeDialog()">Close Dialog</button>
</div>
</form>

You have a JavaScript function SubmitClickHandle() that performs the form submission. If you use type="submit", then the form also submits using the default method, which reloads the page and cancels the SubmitClickHandle() code.
You should use type="button" when you've provided your own JavaScript to submit the form, and you don't need the default submission.
If you want to use type="submit", the onclick code should end with return false to prevent the default action:
<button type="submit" onclick="SubmitClickHandle(); return false">

Submit buttons trigger the submission of a form (and when they do, their name and value are included in the submitted form data).
Button buttons don't.
When I use type="button" then it submits successfully but type="Submit" does not? why is that?
Presumably, because your idea of "submits successfully" doesn't involve performing a normal form submission but instead means "Executes the SubmitClickHandle() function without leaving the page".

angular ng-if automaticly sends a form when true

I have a angular js form and a button that, if pressed, shows the login fields (2 inputs for username and password, and 1 submit button) and another button that hides it.
I've written this simple code below that uses the ng-if directive. it is working fine only problem that after the use press on show login, the div is being shown but the form is being submitted automaticly (without the user press on the submit button).
someone knows why this is happening and how to fix it?
thanks
<form name="loginForm" width="70%">
<br>
<button ng-click="NewConversation=true" >show login</button>
<button ng-click="NewConversation=false" >hide login</button>
<br><br>
<div ng-if="NewConversation">
<input autocomplete="off" name="name" ng-model="name" required placeholder="Name">
<br>
<input autocomplete="off" name="room" ng-model="room" required placeholder="Room">
<br><br>
<button ng-click="updateMsg({name: name,room: room})">Start Talking!</button>
</div>
</form>

Every button inside form tag has default behavior - submit, to prevent it add type="button" to every button inside the form tag.
<button type="button" ng-click="NewConversation=true" >show login</button>

This should help
show login
this will prevent it from submitting automatically

How to clear the spring form fields using jQuery?

When I click the 'CLEAR' button, I want the javascipt code to run. It does run but then the form gets submitted. Is there a way to stop the form from getting submitted? Or is there a spring standard to clear the form. I just thought it would be faster if I did it on the client-side.
<input type="submit" value="CLEAR" onclick="javascript:clearForm()"/>
The above code appears inside the spring form tag.

Two options.
1). Using input type="button":
<input type="button" value="CLEAR" onclick="clearForm()"/>
2). Using input type="reset" instead of clearing the form with javascript.
<input type="reset" value="CLEAR" />

Change
<input type="submit"
to:
<input type="button"
That will stop your form being submitted when the button is clicked.

lock all submit button before page fully rendered

may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?

Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).

By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');

jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">

<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});

Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George

You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks

<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.

If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>

<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).

make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>

If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.