Thursday 12 April 2012

Submit> and Button element difference


I m keen interested in Web Technology.
So This is my First post related to Web Technology


->A 'button' is just that, a button, to which you can add additional functionality using Javascript. A 'submit' input type has the default functionality of submitting the form it's placed in (though, of course, you can still add additional functionality using Javascript).

->Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.

->input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit"> buttons will submit the form they are in when the user clicks on them,


-->Applying validation using Javascript on event binding always use button  rather than submit
Reason : Since while checking negative condition on validation  we must restrict the form to load or submit.To stop loading of form  we can't use submit  button because it loads form atleast once
Test Case:

Task:  I m working on a report and fetch the data from database into a table.
Requirement:  To hide the <table> header when user first come on page.\
Used Method : ShowDiv java scipt and initially style of div is "style:display="none""
Result: Fetch Value blink i.e. first display into table  and then skip
Reason :i used <input type="submit">.Clicking on submit button reload the page again & set the page into initial state which always hide the table.means "submit" cause the page load 2 times.
Solution :use <input type="button"
Conclusion: "submit" cause the page load 2 times.

Another Test Case 2:If u want to disable the back button on browser then use input type="button"

Test Case 3:
 Task:  I m working on a report on form1 and fetch the data from database into a table on page2
Requirement: When I use default Value of  "Select" and click on submit button.Then a pop up should be display & also prevent page 2 to load.
Used Method :use a finction "Check" to check if the value of selected value in select box is "Select Client" then alert is displayed otherwise page 2 will submit.
Result:popup is coming but page 2 is load and another window opens.
Reason:<input type="submit" always load the page by default at least once.Clicking on submit button load page first time and then browser load the page again.
Solution:use <input type="button"
Conclusion:<input type="submit" always load the page by default at least once

Test Case 4:
while working on strut 2.0 i have a register pop up on which Clicking on "Register" forward the request to some other page but click on close button marked as X  on onclick() .i wrote  a  function to hide the popup.If i used <submit> type on any of following rather than button then it will load the page and forward request to another page.So i used Button
ex-

<s:form action="registerAction">
<div style='float:right; position:relative;left:20px; vertical-align:top;  background-color:#fff;'>
  <input type="button"  id="btnCloseID" value="X" title="close" style="text-indent:     onclick="closeDiv()"/>
</div>

      <s:textfield name="txtRegisterUserName" key="label.registerUserName"/><br>
      <s:textfield name="txtRegisterEmail" key="label.registerEmail"/><br>
<s:submit type="button" cssClass="SubmitButton"  key="label.registerSubmit"/>

</s:form>


--> submit() and button () both can have onclick event handler.Only the difference is to explictly return false for submit on condition false and explicitly submit button on condition true
 and also one of them works with key "enter" event.