CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
916 Networks
916 Networks

Reputation: 545

Jquery Submitting Form without Refresh

I have a javascript function that runs a PHP script to save data.

The problem I have is that after the $.ajax POST javascript runs, it refreshs my page and I need to avoid that. I read that using "button" was the problem but couldn't get it to work with an input field.

Here's my form with one sample field from it:

<form id="SaveMarker" name="SaveMarker" method="POST" action="ajax-save.php">
    <label for="pName"><span>Location Name :</span>
    <input type="text" maxlength="75" placeholder="Enter Name" class="save-name" name="pName"></label>
</form>

And a "button" which is actually just a text link that the user clicks to save.

<button name="save-marker" class="save-marker">Save Marker Details</button>

And this is the javascript that is called (via a Google Maps listener):

function save_marker(Marker, mName, mAddress, mType, replaceWin)
            {
                //Save new marker using jQuery Ajax
                var mLatLang = Marker.getPosition().toUrlValue(); //get marker position
                var myData = {name : mName, address : mAddress, latlang : mLatLang, type : mType }; //post variables
                console.log(replaceWin);        
                $.ajax({
                  type: "POST",
                  url: "map_process.php",
                  data: myData,
                  success:function(data){
                        replaceWin.html(data); //replace info window with new html
                        Marker.setDraggable(false); //set marker to fixed
                        Marker.setIcon('http://www.sacgrid.com/img/pin_blue.png'); //replace icon
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(thrownError); //throw any errors
                    }
                });
                return false;
            }`

Is there anything obviously wrong with my form, my button element or javascript? Thanks is advance, been working on this for 2 days.

Upvotes: 1

Views: 623

Answers (1)

Marcio Mazzucato
Marcio Mazzucato

Reputation: 9285

Try to set the type button to button, this way the <form> wont' be submited.

<button name="save-marker" type="button" class="save-marker">Save Marker Details</button>

Upvotes: 1

Related Questions