title: How to pass data from a form to webmethod using jquery ajax?
body: <p>I have a contact form in asp.net webform like this</p>
  
  <pre><code>&lt;div id="sample" style="display:none"&gt; 
              &lt;h2&gt;Sample Data&lt;/h2&gt; 
              &lt;p&gt;Your email was successful!!&lt;/p&gt; 
              &lt;p&gt;You can press ESC to close this dialog or click &lt;a href="#" class="simplemodal-close"&gt;close&lt;/a&gt;.&lt;/p&gt; 
          &lt;/div&gt; 
      &lt;form id="contactForm" runat="server"&gt;
          &lt;div align="center"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;b&gt;CONTACT&lt;/b&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Name:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="Txtname" runat="server" Width="220px" placeholder="Name" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="rfvname" runat="server" ErrorMessage="Please enter your name"
                              Style="color: Red;" Display="Dynamic" ControlToValidate="Txtname"&gt;&lt;/asp:RequiredFieldValidator&gt;
                          &lt;asp:RegularExpressionValidator ID="revname" ControlToValidate="Txtname" ValidationExpression="^[a-zA-Z]+$"
                              Style="color: Red;" Display="Dynamic" runat="server" ErrorMessage="Enter Alphabets only"&gt;&lt;/asp:RegularExpressionValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          E-Mail:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="Txtemail" runat="server" Width="220px" placeholder="Email" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="Please enter your E-mail"
                              Style="color: Red;" ControlToValidate="Txtemail" Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;
                          &lt;asp:RegularExpressionValidator ID="revEmail" ControlToValidate="Txtemail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                              Style="color: Red;" Display="Dynamic" runat="server" ErrorMessage="Please Enter valid mailId(ex:asm@gmail.com)"&gt;&lt;/asp:RegularExpressionValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Company:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="Txtcompany" runat="server" Width="220px" placeholder="Company" ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="rfvcompany" runat="server" ErrorMessage="Please enter your company name"
                              Style="color: Red;" Display="Dynamic" ControlToValidate="Txtcompany"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Phone:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="Txtphone" name="Phone" runat="server" Width="220px" placeholder="Phone"
                              ClientIDMode="Static"&gt;&lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="rfvphone" runat="server" ErrorMessage="Please enter your phone number"
                              Style="color: Red;" Display="Dynamic" ControlToValidate="Txtphone"&gt;&lt;/asp:RequiredFieldValidator&gt;
                          &lt;asp:RegularExpressionValidator ID="revphone" runat="server" Display="Dynamic" ErrorMessage="Enter digits only"
                              Style="color: Red;" ValidationExpression="^[0-9]+$" ControlToValidate="Txtphone"&gt;&lt;/asp:RegularExpressionValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Message:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="Txtmessage" name="Message" runat="server" TextMode="MultiLine" Rows="4"
                              Width="220px" ClientIDMode="Static"&gt; &lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="rfvmsg" runat="server" Display="Dynamic" ErrorMessage="Please enter your message."
                              Style="color: Red;" ControlToValidate="Txtmessage"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;asp:Button ID="Btnsend" runat="server" Text="SEND ENQUIRY" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>By using the following script, Iam passing data to webmethod like this</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {            
              $('#Btnsend').click(function () {
                  $.ajax({
                      type: "POST",
                      url: "Default.aspx/SendMail",
                      data: "{'name': '" + $('#Txtname').val() + "', 'email': '" + $('#Txtemail').val() + "','company':' " + $('#Txtcompany').val() + "','phone':' " + $('#Txtphone').val() + "','message':' " + $('#Txtmessage').val() + "'}",                    
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (msg) {
  
                          $("#sample").modal({
                              opacity: 80,
                              overlayCss: { backgroundColor: "#fff" }
                          });
  
                      },
                      error: function (data) {
                          //alert(data.d);
                          alert("error");
                      }
              });
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is Default.aspx.cs page where my WebMethod is like this</p>
  
  <pre><code>[WebMethod]
  public static string SendMail(string name, string email, string company, string phone, string message)
      {       
         System.Net.Mail.MailMessage mailer = new System.Net.Mail.MailMessage();
         mailer.IsBodyHtml = true;
         mailer.From = new MailAddress("XXXXXX", name, Encoding.UTF8);
         mailer.To.Add(new MailAddress("XXXX-----"));
         mailer.Body = "Company:" + company + ",";
         mailer.Body += "Message:" + message + ",";
         mailer.Body += "Phone:" + phone + "/ " + email;
         SmtpClient smtp = new SmtpClient();
         smtp.Host = "smtpauth.com";
         smtp.Port = 25;
         smtp.UseDefaultCredentials = false;
         smtp.Credentials = new System.Net.NetworkCredential("XXXXXX", "XXXXXXXXXX");
         try
         {
             smtp.Send(mailer);          
             return "ok";
  
         }
         catch (Exception ex)
         {
             return "error";
  
         }    
  </code></pre>
  
  <p>Now my problem is when I click on button jquery ajax function is not working and when I debug the Jquery ajax function it is working what might be the problem?? and on success I need to show a modalpopUp which is not working in my code.
  Could anyone please help me out...</p>