launch two actions in one button ASP.NET

Question

Hey,

I'm developing a comment page in asp.net, this my page :

<form action="#">
<p><textarea id="textArea" rows="5" cols="30"></textarea></p>
<input type="submit" value="Submit" />
</form>
<p>Add some comments to the page</p>

And this is my javascript code :

window.onload = initAll;

function initAll() {
document.getElementsByTagName("form")[0].onsubmit = addNode;
}

function addNode() {
var inText = document.getElementById("textArea").value;
var newText = document.createTextNode(inText);
var newGraf = document.createElement("p");
newGraf.appendChild(newText);
var docBody = document.getElementsByTagName("body")[0];
docBody.appendChild(newGraf);
return false;
}

Until then, everything is fine, but I want when the user clicks the submit button, the button will trigger another action that will save the comment in the database.

How can I do this thing ?

Answer 1

Why don't you have a wrapper and still make it one function?

The addNode could have code to do both maybe based on something in the form?

You could have a submit function that wraps the addNode and addComment.

eg:

function handleSubmit()
{
    addNode();
    addComment();
    return false;
}

EDIT: Since you want to call server code you have a couple of options. You can do it all via ajax and you would just need to implement the addComment function to call a server side event. See this article if you need help doing so:

http://www.dexign.net/post/2008/07/16/jQuery-To-Call-ASPNET-Page-Methods-and-Web-Services.aspx

The easiest way would be to change your button to an ASP.NET button and then implement the button click event which would call your server side method although this would cause a full page refresh.

A hybrid of the two, which is very easy to implement, would be to use an UpdatePanel. When you clicked your button you would get the look and feel of the AJAX solution but only need to know how to do all the server side code and let the UpdatePanel handle all the AJAX work. This method is a little heavier than just doing a raw ajax call but it is significantly more simple to do.

You can read up on UpdatePanels at: http://msdn.microsoft.com/en-us/library/bb399001.aspx

Answer 2

Instead of using an HTML input tag, use asp:Button, like so:

<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" />

What this says is, use a Button that calls the "btnSubmit_Click" method whenever it is clicked on, and run this on the server (not on the client machine).

Then in your code-behind (you do have a code-behind, right? e.g., nameOfPage.aspx.cs), you can add the aforementioned btnSubmit_Click method:

protected void btnSubmit_Click(object sender, System.EventArgs e) {
    // interact with database here.
}