• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
JQuery

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

  • WhatsApp
  • Kaushal Patel Kaushal Patel
  • 9y
  • 9.1k
  • 0
  • 0
    • 25
  • Blog

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
Up Next
JQuery Showing Page Loader Using JQuery in ASP.NET
Ebook Download
View all
C# Corner Ebook
Printing in C# Made Easy
Read by 10.8k people
Download Now!
Learn
View all
Learn Image
Core Java
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

Sign-Up Now

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

Sign-Up Now

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

Sign-Up Now

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs
Leaderboard
View all
Sarthak Varshney

Sarthak Varshney
+0
Deepak Tewatia

Deepak Tewatia
+0
View all
Yesterday's leader
Sarthak Varshney  
Sarthak Varshney
Pune (India)
70
102
1.7k
100
Member of the month
Rinki  
Rinki
Chennai (India)
15
5.4k
14.8k
50
Speaker of the month
Shivam Payasi  
Shivam Payasi
C#, .NET
Chitrakoot (India)
8
21.1k
19.7k
10
Upcoming events
View all
  • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
  • Bhubaneswar Chapter
  • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
Suggested for you
View all
John Miller John Miller
Follow
Rinki Rinki
Follow
Harshit Pandey Harshit Pandey
Follow
Rathrola Prem Kumar Rathrola Prem Kumar
Follow
Jemmy Jackson James Jemmy Jackson James
Follow

CSharpBot

About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

©2024 C# Corner.

All contents are copyright of their authors.