CODEWITHSUNDEEP
javascriptjqueryhtmlforms
smontanaro
smontanaro

Reputation: 1737

Save form state to server without disturbing page

I need to save the state of a form to the server so the user can reload it when revisiting the site. However, I don't want the current page refreshed.

In part, my form has a text entry field and a save button:

<form name="selectparams" action="" method="GET">
...
Name: <input type="text" id="user_name">
<input type="submit" value="Save!"
       onclick="save_form(this); return false;">

When the Save button is clicked, this function is called:

function save_form(button) {
    var input = $("#user_name");
    var name = input.val();

    if (name == "") {
        alert("You didn't enter a name. I will call you 'Sam'");
        name = "Sam";
    }
    var client = new HttpClient();
    var args = {
        name: name,
        value: JSON.stringify(button.form.values())
    };
    var url = Arg.url("/save", args);
    client.get(url, function(resp) { console.log("saved"); });
};

This all seems to work okay, but the page refreshes, losing both the existing form settings and any other content the user had generated (using multiple submissions of the form, each of which generates a 2d plot).

How do I get it to not do that?

Thx...

Upvotes: 0

Views: 150

Answers (2)

Casperon
Casperon

Reputation: 107

You can use return false for this case.

<input type="submit" value="Save!" onclick="return save_form(this);"/>

In function last you can return false as following

function save_form(button) {     
   .........
   .........
   return false;
}

Upvotes: 0

Govind Singh
Govind Singh

Reputation: 15490

make the button of button type not submit type

<input type="button" value="Save!" onclick="save_form(this);">

Upvotes: 1

Related Questions