Posting form using anchor tag

Hi,

I am using the following to post the form:

@using (Ajax.BeginForm("SendMessage", "User", null,
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "jsMessageSent"
})) {
<input placeholder="Message Subject" class="msg-subject" name="subject" />
<input type="submit" value="Send" class="send-message" onclick="jsCloseComposeMessage();" />}

BUT I want to post this form using anchor tag instead of input type submit

I tried

@Ajax.ActionLink("testing_Send", "SendMessage", "User", new { subject ="dines"}, new AjaxOptions { HttpMethod = "POST" })

but its becomes querystring.

Please note that I don't want to change my way of implementing ajax i.e Ajax.BeginForm
because it has been implemented on various places on the project.

Please help!

regards
meetDinesh

Dinesh Kumar

Asked: 2012-03-20

Advertise Here

1 Solution

LVL 40

Gurvinder Pal SinghCommented: 2012-03-21

make it (assuming that link id is testing_Send)

$("#testing_Send").attr("href", "javascript:postForm()");

postForm()
{
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: "html"
});
}

LVL 40

Gurvinder Pal SinghCommented: 2012-03-21

check this link too
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

it tells how to submit a form using jquery post without refreshing the page

Dinesh KumarAuthor Commented: 2012-03-21

you are right but this solution does not use

Ajax.BeginForm

Dinesh KumarAuthor Commented: 2012-03-21

one of my colleagues, Amit, sorted out this the following way:
<div class="msg-rply-container">
<input type="submit" value="Send" class="send-message" />
<a href="javascript:postMessage();">testing_Send</a>
</div>
<script language="javascript" type="text/javascript">
function postMessage() {
$("#SendMessage9").submit(); //submits the form
jsCloseComposeMessage();
}
</script>

its working cool in all browsers. thanks Amit.

LVL 40

Gurvinder Pal SinghCommented: 2012-03-21

but you are not using "Ajax.BeginForm" here also!!

Dinesh KumarAuthor Commented: 2012-03-21

The complete code is:

<div class="abc">
@using (Ajax.BeginForm("actionName", "User", null,
new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "ok"

}, new { id = "SendMessage9" }))
{
<div class="popup-top-container">
<div class="popup-prodetails">
<div class="top-txt">
Messaging to:</div>
<div class="msg-container">
<input type="text" class="userid" name="receiver" placeholder="Type your Friends Names Here" />
<div class="user-select-opt">
</div>
</div>
</div>
<div class="popup-cancel-btn">
<input type="button" value="CANCEL" onclick="jsCloseComposeMessage();" class="popup-cancel2" />
</div>
</div>
<div>
<input placeholder="Message Subject" class="msg-subject" name="subject" />
</div>

<div class="msg-rply-container">
<input type="submit" value="Send" class="send-message" />
<a href="javascript:postMessage();">Checking</a>
</div>
<script language="javascript" type="text/javascript">
function postMessage() {
$("#SendMessage9").submit();
jsCloseComposeMessage();
}
</script>
}
</div>

Dinesh KumarAuthor Commented: 2012-03-26

This solution worked well.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Expand your skills with this month's free Premium course.

Posting form using anchor tag

Join & Write a Comment Already a member? Login.

Featured Post