Display message without reloading the page in html

Question

I have one html form with name, email, contact & feedback fields with submit button.

My html form code is

<div class="feedback">
    <a id="feedback_button">Feedback</a>
    <form method="post" action="http://localhost:12459/WebsiteForm/WebSiteFeedbackProcessing.aspx"
    name="new_post">
    <div class="form">
        <div>
            <div>
                <input type="text" class="text_field" id="fname" name="fname" placeholder="First Name"
                    style="margin-bottom: 3px; width: 50%;" maxlength="20" />
            </div>
            <div>
                <input type="text" class="text_field" id="email" name="email" placeholder="Email"
                    style="margin-bottom: 3px; width: 50%;" maxlength="30" />
            </div>
            <div>
                <input type="text" class="text_field" id="contact" name="contact" placeholder="Contact No"
                    style="margin-bottom: 3px; width: 50%;" maxlength="15" />
            </div>
            <textarea id="feedback" name="feedback" placeholder="feedback" style="min-height: 41px;
                width: 48%;" maxlength="100" rows="" cols=""></textarea>
        </div>
        <input type="submit" value="Send" class="sendfeedback" />
    </div>
    </form>
</div>

I am saving this four values to sql server database.

After clicking on submit button, form goes to another project which is of asp.net c# project(code is given below) for data saving. Here through function SaveFeedback, it returns result as an integer value 1 for success & 0 for failure.

My code is

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using CorporateOnlineTest.BAL;
using System.Text;

namespace CorporateOnlineTest.Web.WebsiteForm {
  public partial class WebSiteFeedbackProcessing: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
      string fname = "";
      string contact = "";
      string email = "";
      string feedback = "";

      for (int i = 0; i < Request.Form.AllKeys.Length; i++) {
        string key = Request.Form.AllKeys[i] + "";
        string value = Request.Form[i];

        if (key + "" == "fname") {
          fname = value;
        } else if (key + "" == "contact") {
          contact = value;
        } else if (key + "" == "email") {
          email = value;
        } else if (key + "" == "feedback") {
          feedback = value;
        }
      }

      //Insert in database and send mail.
      if (Request.Form.AllKeys.Length > 0) {
        int Submit;

        SubAdminBAL objSubadmin = new SubAdminBAL();
        Submit = SaveFeedback(fname, contact, email, feedback);

        if (Submit == 1) {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Your Feedback Has Been Sent Successfully!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        } else {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Please Try Again!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        }
      }
    }

    [WebMethod]
    public int SaveFeedback(string fname, string contact, string email, string feedback) {
      int Result = 0;
      SubAdminBAL bl = new SubAdminBAL();

      Result = Convert.ToInt32(bl.SaveWebsiteFeedbackBAL(fname, contact, email, feedback));

      return Result;

    }
  }
}

I want to display these messages on my html page without reloading that page.

I tried many options but each time my page reloads before or after message display.

Does anyone have any solution. Please revert it as early as possible.

Thanks in advance

Answer 1

you can SaveFeedback using jQuery .ajax, something like this code:

jQuery.ajax() Perform an asynchronous HTTP (Ajax) request. More

$('.btnSaveFeedback').on('click', function () {
    var fname = $('#fname').val();
    var contact = $('#contact').val();
    var email = $('#email').val();
    var feedback = $('#feedback').val();

    $.ajax({
        url: "/WebSiteFeedbackProcessing.aspx/SaveFeedback", // your Page, WenMethod, Handler,...
        type: 'post',
        data: {
            fname: fname,
            contact: contact,
            email: email,
            feedback: feedback
        },
        success: function (result) {
            alert('Successfully!!');
        },
        error: function (result) {
            alert('Failed!!');
        }
    });
});

Answer 2

Have you enabled page method with Scriptmanager?

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Answer 3

You can use ajax method (jquery ajax also)

Refer -

Basic of jquery ajax

Jquery ajax tutorial