CODEWITHSUNDEEP
javascriptjqueryajaxforms
Fadamie
Fadamie

Reputation: 165

How to disable submit action

Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??

<form  method="POST"   action="" id="search-form">
          <input type="text" name="keywords"  />
          <input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

Upvotes: 14

Views: 31519

Answers (4)

Shahriar
Shahriar

Reputation: 81

just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form. Try like this:

<form  method="POST" onsubmit="return false" id="search-form">
          <input type="text" name="keywords"  />
          <input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>

Upvotes: 0

Bathri Nathan
Bathri Nathan

Reputation: 1267

use prevent defaults to avoid form action.please refer the code below it might help you

function createRecord(){	
	event.preventDefault();
	
}
<form>

<input type="text"/>
<input type="submit" onclick="createRecord()"/>

</form>

Upvotes: 1

Dhamu
Dhamu

Reputation: 1752

I think you need ajax function to load data with in div without page reload

Change input type submit to button 

<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />

Ajax CAll:

<script type="text/javascript">
    function AjaxSend(){
         $.get('file.xml', function(data) {
              $('div').html(data);
          });
     }
</script>

Upvotes: 3

Alon Gubkin
Alon Gubkin

Reputation: 57119

onclick="loadXMLDoc('file.xml'); return false;"

or even better:

<script>
    window.onload = function() { 
        document.getElementById("search-form").onsubmit = function() { 
            loadXMLDoc('file.xml');
            return false;
        };
    };
</script>

To implement loadXMLDoc, you can use the ajax module in jQuery. for example:

function loadXMLDoc() { 
    $("div").load("file.xml");
}

Final code using jQuery:

<script>
    $(function() { 
        $("#search-form").submit(function() { 
            $("div").load("file.xml");
            return false;
        });
    });
</script>

Upvotes: 13

Related Questions