Post
Ask Question

Pass Value from HTML page to .aspx page via JSON (JQuery)

Its Easy to put contact us form in .aspx file, We just have to write code on button click event.

But same if we try to work this page as html then its bit hard.

Here, I show you how to work contact us form in HTML file via JSON JQuery.

All we need is one HTML file:

First Step

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <!-- Basic Page Needs -->  
  5.       <meta charset="utf-8">  
  6.       <title>Example</title>  
  7.    </head>  
  8.    <body class="body-boxed">  
  9.       <div class="container">  
  10.          <div class="row">  
  11.             <div class="col-md-12 main-content">  
  12.                <div class="col-md-9">  
  13.                   <div class="section-title section-title-2">  
  14.                      <h6>Inquiry Form :</h6>  
  15.                   </div>  
  16.                <div class="comment-form">  
  17.                   <form method="post" id="feedback_formQuick" action="QuickContact.aspx">  
  18.                   <div class="row">  
  19.                      <div class="col-md-6">  
  20.                         <div class="form-input">  
  21.                            <i class="fa fa-user"></i>  
  22.                            <input name="namequick" id="namequick" type="text" placeholder="Your Name">  
  23.                         </div>  
  24.                      </div>  
  25.                      <div class="col-md-6">  
  26.                         <div class="form-input">  
  27.                            <i class="fa fa-envelope"></i>  
  28.                            <input name="emailquick" id="emailquick" type="email" placeholder="Email">  
  29.                         </div>  
  30.                      </div>  
  31.                      <div class="col-md-6">  
  32.                         <div class="form-input">  
  33.                            <i class="fa fa-phone"></i>  
  34.                            <input name="phonequick" id="phonequick" type="text" placeholder="Your Phone Number">  
  35.                         </div>  
  36.                      </div>  
  37.                      <div class="col-md-6">  
  38.                         <div class="form-input">  
  39.                            <i class="fa fa-home"></i>  
  40.                            <input name="Addressquick" id="Addressquick" type="text" placeholder="Your Address">  
  41.                         </div>  
  42.                      </div>  
  43.                      <div class="col-md-12">  
  44.                         <div class="form-input">  
  45.                            <i class="fa fa-comment"></i>  
  46.                            <textarea name="messagequick" id="messagequick" placeholder="Message"></textarea>  
  47.                         </div>  
  48.                      </div>  
  49.                      <div class="col-md-2 pull-right">  
  50.                         <input name="feedback_go" class="button-3" id="Buttonquick" value="Submit" type="button">  
  51.                            <div style="display: none;" id="ajaxanswer1" class="ajaxanswer1">  
  52.                            </div>  
  53.                         </div>  
  54.                         <div class="col-md-2 pull-right">  
  55.                            <img src="images/loading.gif" id="img" style="float: right;display: none;"/>  
  56.                         </div>  
  57.                      </div>  
  58.                      <!-- End row -->  
  59.                </form>  
  60.             </div>  
  61.             <!-- End comment-form -->  
  62.          </div>  
  63.       </div>  
  64.       <!-- End row -->  
  65.    </div>  
  66.    <!-- End main-content -->  
  67. </div>  
  68. <script type="text/javascript" src="slider/js/jquery.js"></script>  
  69. <script type="text/javascript">  
  70.    $('#Buttonquick').unbind("click").click(function () {  
  71.       var par = $(this).parents("#feedback_formQuick");  
  72.       var namequick = par.find("#namequick").val();  
  73.       var emailquick = par.find("#emailquick").val();  
  74.       var phonequick = par.find("#phonequick").val();  
  75.       var Addressquick = par.find("#Addressquick").val();  
  76.       var messagequick = par.find("#messagequick").val();  
  77.       var datastr = 'name=' + namequick + '&email=' + emailquick + '&Phone=' + phonequick + '&Address=' + Addressquick + '&message=' + messagequick;  
  78. $('#img').show(); //<----here  
  79.       if (namequick == '') { alert('enter name'); }  
  80.       else if (emailquick == '') { alert('Enter Email Address'); }  
  81.       else if (phonequick == '') { alert('Enter Email Phone'); }  
  82.       else if (Addressquick == '') { alert('Enter Address'); }  
  83.       else if (messagequick == '') { alert('Enter Your Message First'); }  
  84.       else  
  85.       {  
  86.          $.ajax({  
  87.             url: "QuickContact.aspx",  
  88.             type: "post",  
  89.             data: { namequick: namequick, emailquick: emailquick, phonequick: phonequick, Addressquick: Addressquick, messagequick: messagequick },  
  90.             //data: datastr,  
  91.             success: function (data) {  
  92.                $('#img').hide();  
  93.                $('#ajaxanswer1').hide().empty().html(data).show("slow");  
  94.                settimeout("$('#ajaxanswer1').fadeout('slow')", 3000);  
  95.             }  
  96.             });  
  97.          }  
  98.          });  
  99.       </script>  
  100.    </body>  
  101. </html>  
JQuery under $ help to transfer data form HTML form to .aspx page.
  1. $('#Buttonquick').unbind("click").click(function () {  
  2.    var par = $(this).parents("#feedback_formQuick");  
  3.    var namequick = par.find("#namequick").val();  
  4.    var emailquick = par.find("#emailquick").val();  
  5.    var phonequick = par.find("#phonequick").val();  
  6.    var Addressquick = par.find("#Addressquick").val();  
  7.    var messagequick = par.find("#messagequick").val();  
  8.    var datastr = 'name=' + namequick + '&email=' + emailquick + '&Phone=' + phonequick + '&Address=' + Addressquick + '&message=' + messagequick;  
  9.    $('#img').show(); //<----here  
  10.    if (namequick == '') { alert('enter name'); }  
  11.    else if (emailquick == '') { alert('Enter Email Address'); }  
  12.    else if (phonequick == '') { alert('Enter Email Phone'); }  
  13.    else if (Addressquick == '') { alert('Enter Address'); }  
  14.    else if (messagequick == '') { alert('Enter Your Message First'); }  
  15.    else  
  16.    {  
  17.       $.ajax({  
  18.          url: "QuickContact.aspx",  
  19.          type: "post",  
  20.          data: { namequick: namequick, emailquick: emailquick, phonequick: phonequick, Addressquick: Addressquick, messagequick: messagequick },  
  21.          //data: datastr,  
  22.          success: function (data) {  
  23.             $('#img').hide();  
  24.             $('#ajaxanswer1').hide().empty().html(data).show("slow");  
  25.             settimeout("$('#ajaxanswer1').fadeout('slow')", 3000);  
  26.          }  
  27.       });  
  28.    }  
  29. });  
Next step

Create one .aspx page named Conatct.aspx and in behind code add this code:
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.    if (validation(Request.Form["namequick"].ToString().Trim(), Request.Form["emailquick"].ToString().Trim(), Request.Form["phonequick"].ToString().Trim(), Request.Form["Addressquick"].ToString().Trim(), Request.Form["messagequick"].ToString().Trim()))  
  4. {  
  5.    inquiryMail(Request.Form["namequick"].ToString().Trim(), Request.Form["emailquick"].ToString().Trim(), Request.Form["phonequick"].ToString().Trim(), Request.Form["Addressquick"].ToString().Trim(), Request.Form["messagequick"].ToString().Trim());  
  6.    responseMail(Request.Form["namequick"].ToString().Trim(), Request.Form["emailquick"].ToString().Trim(), Request.Form["phonequick"].ToString().Trim(), Request.Form["Addressquick"].ToString().Trim(), Request.Form["messagequick"].ToString().Trim());  
  7.    }  
  8. }  
  9. private bool validation(string name, string email,string phone,string address, string message)  
  10. {  
  11.    if (name == "" || name == "Name")  
  12.    {  
  13.       Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Enter Name')", true);  
  14.       return false;  
  15.    }  
  16.    else  
  17.    {  
  18.       if (email == "" || email == "Email")  
  19.       {  
  20.          Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Enter Email')", true);  
  21.          return false;  
  22.       }  
  23.       else if (!ValidEmail(email))  
  24.       {  
  25.          Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Enter Valid Email')", true);  
  26.          return false;  
  27.       }  
  28.       else if (message == "" || message == "Message")  
  29.       {  
  30.          Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Please Enter Your Message')", true);  
  31.          return false;  
  32.       }  
  33.       return true;  
  34.    }  
  35. }  
  36. private bool ValidEmail(string emailStr)  
  37. {  
  38.    return Regex.IsMatch(emailStr, @"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*");  
  39. }  
  40. private void inquiryMail(string name, string email, string phone, string address, string message)  
  41. {  
  42.    StringBuilder mailMessageStr = new StringBuilder();  
  43.    mailMessageStr.Append("<!DOCTYPE HTML PUBLIC '-   //W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>");  
  44.    mailMessageStr.Append("<html>");  
  45.    mailMessageStr.Append("<head>");  
  46.    mailMessageStr.Append("<meta http-equiv='Content-Type' />");  
  47.    mailMessageStr.Append("<title>:: Example. ::</title>");  
  48.    mailMessageStr.Append("");  
  49.    mailMessageStr.Append("</head>");  
  50.    mailMessageStr.Append("<body leftmargin='0' topmargin='0' style='font-   family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; '>");  
  51.    mailMessageStr.Append("<table width='779'>");  
  52.    mailMessageStr.Append(" <tbody>");  
  53.    mailMessageStr.Append(" <tr>");  
  54.    mailMessageStr.Append(" <td><table width='100%'>");  
  55.    mailMessageStr.Append(" <tbody>");  
  56.    mailMessageStr.Append(" <tr>");  
  57.    mailMessageStr.Append(" <td colspan='3' height='32' align='center'><img src='Logo'/></td>");  
  58.    mailMessageStr.Append(" </tr>");  
  59.    mailMessageStr.Append(" <tr>");  
  60.    mailMessageStr.Append(" <td height='43' bgcolor='#D05107' colspan='3'> </td>");  
  61.    mailMessageStr.Append(" </tr>");  
  62.    mailMessageStr.Append(" <tr>");  
  63.    mailMessageStr.Append(" <td align='left'> </td>");  
  64.    mailMessageStr.Append(" </tr>");  
  65.    mailMessageStr.Append(" <tr>");  
  66.    mailMessageStr.Append(" <td align='left'><h4>To Administrator,</h4> </td>");  
  67.    mailMessageStr.Append(" </tr>");  
  68.    mailMessageStr.Append(" ");  
  69.    mailMessageStr.Append(" <tr style='font-size:13px;'>");  
  70.    mailMessageStr.Append(" <td width='20%' align='left'>Name</td>");  
  71.    mailMessageStr.Append(" <td width='10%' align='center'>:</td>");  
  72.    mailMessageStr.Append(" <td width='70%' align='left'>" + name + "</td>");  
  73.    mailMessageStr.Append(" </tr>");  
  74.    mailMessageStr.Append(" <tr style='font-size:13px;'>");  
  75.    mailMessageStr.Append(" <td width='20%' align='left'>Email</td>");  
  76.    mailMessageStr.Append(" <td width='10%' align='center'>:</td>");  
  77.    mailMessageStr.Append(" <td width='70%' align='left'>" + email + "</td>");  
  78.    mailMessageStr.Append(" </tr>");  
  79.    mailMessageStr.Append(" <tr style='font-size:13px;'>");  
  80.    mailMessageStr.Append(" <td width='20%' align='left'>Phone</td>");  
  81.    mailMessageStr.Append(" <td width='10%' align='center'>:</td>");  
  82.    mailMessageStr.Append(" <td width='70%' align='left'>" + phone + "</td>");  
  83.    mailMessageStr.Append(" </tr>");  
  84.    mailMessageStr.Append(" <tr style='font-size:13px;'>");  
  85.    mailMessageStr.Append(" <td width='20%' align='left'>Address</td>");  
  86.    mailMessageStr.Append(" <td width='10%' align='center'>:</td>");  
  87.    mailMessageStr.Append(" <td width='70%' align='left'>" + address + "</td>");  
  88.    mailMessageStr.Append(" </tr>");  
  89.    mailMessageStr.Append(" <tr style='font-size:13px;'>");  
  90.    mailMessageStr.Append(" <td width='20%' align='left'>Message </td>");  
  91.    mailMessageStr.Append(" <td width='10%' align='center'>:</td>");  
  92.    mailMessageStr.Append(" <td width='70%' align='left'>" + message + "</td>");  
  93.    mailMessageStr.Append(" </tr>");  
  94.    mailMessageStr.Append(" <tr>");  
  95.    mailMessageStr.Append(" <td> </td>");  
  96.    mailMessageStr.Append(" </tr>");  
  97.    mailMessageStr.Append(" <tr>");  
  98.    mailMessageStr.Append(" <td align='left'><span>Regards,</span></td>");  
  99.    mailMessageStr.Append(" </tr>");  
  100.    mailMessageStr.Append(" <tr>");  
  101.    mailMessageStr.Append(" <td align='left'><span><h4>Administrator</h4></span></td>");  
  102.    mailMessageStr.Append(" </tr>");  
  103.    mailMessageStr.Append(" </tbody>");  
  104.    mailMessageStr.Append(" </table></td>");  
  105.    mailMessageStr.Append(" </tr>");  
  106.    mailMessageStr.Append(" <tr>");  
  107.    mailMessageStr.Append(" <td height='43' bgcolor='#D05107'> </td>");  
  108.    mailMessageStr.Append(" </tr>");  
  109.    mailMessageStr.Append(" </tbody>");  
  110.    mailMessageStr.Append("</table>");  
  111.    mailMessageStr.Append("</body>");  
  112.    mailMessageStr.Append("</html>");  
  113.    mailMessageStr.Append("");  
  114.    string inquiryMessage = mailMessageStr.ToString();  
  115.    try  
  116.    {  
  117.       MailMessage mailMsg = new MailMessage();  
  118.       MailAddress fromAdd = new MailAddress("[email protected]", "example");  
  119.       mailMsg.From = fromAdd;  
  120.       mailMsg.To.Add("[email protected]");  
  121.       mailMsg.Bcc.Add("[email protected]");  
  122.       mailMsg.IsBodyHtml = true;  
  123.       mailMsg.Subject = "Contact Detail From " + name.ToString();  
  124.       mailMsg.Body = inquiryMessage;  
  125.       SmtpClient smtp = new SmtpClient("webmail.example.com", 25);  
  126.       smtp.Credentials = new NetworkCredential("Username", "Password");  
  127.       smtp.EnableSsl = false;  
  128.       smtp.Send(mailMsg);  
  129.       Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Thank You For Communicating with us.We will contact you shortly.!')", true);  
  130.    }  
  131.    catch (Exception ex)  
  132.    {  
  133.    }  
  134. }  
  135. private void responseMail(string name, string email, string phone, string address, string message)  
  136. {  
  137.    StringBuilder mailMessageStr = new StringBuilder();  
  138.    mailMessageStr.Append("   <!DOCTYPE HTML PUBLIC '-   //W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>");  
  139.    mailMessageStr.Append("<html>");  
  140.    mailMessageStr.Append("<head>");  
  141.    mailMessageStr.Append("<meta http-equiv='Content-Type' />");  
  142.    mailMessageStr.Append("<title>:: Chromic Steel ::</title>");  
  143.    mailMessageStr.Append("");  
  144.    mailMessageStr.Append("</head>");  
  145.    mailMessageStr.Append("<body leftmargin='0' topmargin='0' style='font-   family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; '>");  
  146.    mailMessageStr.Append("<table width='779'>");  
  147.    mailMessageStr.Append(" <tbody>");  
  148.    mailMessageStr.Append(" <tr>");  
  149.    mailMessageStr.Append(" <td><table width='100%'>");  
  150.    mailMessageStr.Append(" <tbody>");  
  151.    mailMessageStr.Append(" <tr>");  
  152.    mailMessageStr.Append(" <td colspan='3' height='32' align='center'><img src='Logo'/></td>");  
  153.    mailMessageStr.Append(" </tr>");  
  154.    mailMessageStr.Append(" <tr>");  
  155.    mailMessageStr.Append(" <td height='43' bgcolor='#D05107' colspan='3'> </td>");  
  156.    mailMessageStr.Append(" </tr>");  
  157.    mailMessageStr.Append(" <tr>");  
  158.    mailMessageStr.Append(" <td align='left'> </td>");  
  159.    mailMessageStr.Append(" </tr>");  
  160.    mailMessageStr.Append(" <tr>");  
  161.    mailMessageStr.Append(" <td align='left' class='style9'>Respected " + name + ", </td>");  
  162.    mailMessageStr.Append(" </tr>");  
  163.    mailMessageStr.Append(" <tr>");  
  164.    mailMessageStr.Append(" <td> </td>");  
  165.    mailMessageStr.Append(" </tr>");  
  166.    mailMessageStr.Append(" <tr>");  
  167.    mailMessageStr.Append(" <td>");  
  168.    mailMessageStr.Append(" <p class='txt'>Thank you for Communicating with Us. We will contact you soon.</p>");  
  169.    mailMessageStr.Append(" </td>");  
  170.    mailMessageStr.Append(" </tr>");  
  171.    mailMessageStr.Append(" <tr>");  
  172.    mailMessageStr.Append(" <td> </td>");  
  173.    mailMessageStr.Append(" </tr>");  
  174.    mailMessageStr.Append(" <tr>");  
  175.    mailMessageStr.Append(" <td align='left'><span class='style9'>Regards : </span></td>");  
  176.    mailMessageStr.Append(" </tr>");  
  177.    mailMessageStr.Append(" <tr>");  
  178.    mailMessageStr.Append(" <td align='left'><span><h4>Administrator</h4></span></td>");  
  179.    mailMessageStr.Append(" </tr>");  
  180.    mailMessageStr.Append(" </tbody>");  
  181.    mailMessageStr.Append(" </table></td>");  
  182.    mailMessageStr.Append(" </tr>");  
  183.    mailMessageStr.Append(" <tr>");  
  184.    mailMessageStr.Append(" <td height='43' bgcolor='#D05107'> </td>");  
  185.    mailMessageStr.Append(" </tr>");  
  186.    mailMessageStr.Append(" </tbody>");  
  187.    mailMessageStr.Append("</table>");  
  188.    mailMessageStr.Append("</body>");  
  189.    mailMessageStr.Append("</html>");  
  190.    mailMessageStr.Append("");  
  191.    string responseMessage = mailMessageStr.ToString();  
  192.    try  
  193.    {  
  194.       MailMessage mailMsg = new MailMessage();  
  195.       MailAddress fromAdd = new MailAddress("[email protected]", "example");  
  196.       mailMsg.From = fromAdd;  
  197.       mailMsg.To.Add(email);  
  198.       mailMsg.IsBodyHtml = true;  
  199.       mailMsg.Subject = "Example- Thank You " + name.ToString();  
  200.       mailMsg.Body = responseMessage;  
  201.       SmtpClient smtp = new SmtpClient("webmail.example.com", 25);  
  202.       smtp.Credentials = new NetworkCredential("Username", "Password");  
  203.       smtp.EnableSsl = false;  
  204.       smtp.Send(mailMsg);  
  205.       Page.ClientScript.RegisterStartupScript(GetType(), "msgbox", "alert('Thank You For Communicating with us.We will contact you shortly.!')", true);  
  206.    }  
  207.    catch (Exception ex)  
  208.    {  
  209.    }  
  210. }  
And you are done.

Happy Coding