i have overe with span and button issue while submitting the form with ajax call.

Here is my code with button:

<form>
<button class="btn btn-round btn-fill pull-right mg-top"  id="gdBasic" >Generate</button>
</form>

Here is my code with span:

<form>
<span class="btn btn-round btn-fill pull-right mg-top"  id="gdBasic" >Generate</span>
</form>

javascript Generate Starts here.....

$("#gdBasic").click(function () {
///////////////Ajax call is inside.//////////////////
});

My problem is with tag span the form is submitting well and getting response from ajax but where as when i did it with button tag page is refreshing.

So i just want to know what is the difference between them i have not written <button type='submit'> for button tag

i have overe with span and button issue while submitting the form with ajax call.

Here is my code with button:

<form>
<button class="btn btn-round btn-fill pull-right mg-top"  id="gdBasic" >Generate</button>
</form>

Here is my code with span:

<form>
<span class="btn btn-round btn-fill pull-right mg-top"  id="gdBasic" >Generate</span>
</form>

javascript Generate Starts here.....

$("#gdBasic").click(function () {
///////////////Ajax call is inside.//////////////////
});

My problem is with tag span the form is submitting well and getting response from ajax but where as when i did it with button tag page is refreshing.

So i just want to know what is the difference between them i have not written <button type='submit'> for button tag

• javascript
• jquery
• html
• ajax
• forms

• 1 if you not define the type of button, the it is considering a submit type. – chirag satapara Commented Aug 26, 2017 at 10:21

2 Answers 2

Browsers often interpret buttons within forms as submit buttons if you do not tell them otherwise. If you need them to stop doing this, use:

// with type button, the form will not refresh the page.
<button type="button">Will not refresh the page.</button>

If you know you are always submitting your form via ajax (for example, if you are doing plex validations first), you can add this as a safety on the form:

<form onsubmit="return false;">

That will prevent any default submissions from the html, but still allow you to manipulate the form inputs and use them in ajax calls.

span is a inline page element, a container for stuff which by default wraps around its content unless otherwise specified. button is a control which is designed to provide an event on page which generally gets some action done like submitting form fields, adding new stuff to page, causing page ponents to re-arrange. etc. Globally, web users identify with visual representation of span as content display and visual representation of button as action enabler.

If form submit is your intention and you do not want to use <input type="submit">, use <input type="button"> or as specified in answer above <button type="button">