Get data from regular form inputs alongwith contents in div

I have a little email system on my wordpress site wherein people submit php generated content to me via email. Basically the content is generated within a div and then via a little javascript the div-content is mailed to me. I am skipping the part how it is generated in order to keep the focus on the main issue. Here is an illustration.

<div id="article" style="display:none">
   // some content are generated here via php
</div>

<div id="visitor">
<input type="text" id="name" name="name" maxlength="60"/>
</div>


<input type="submit" value="submit" id="button" onClick="handleFormSubmit()">

<script language="javascript" type="text/javascript">
             function handleFormSubmit(){
             var button = document.getElementById('button');
             button.style.display = 'none';
         }
      </script>

<script type="text/javascript">
     jQuery(document).ready(function($) {
         $('#button').click(function(){
         $.ajax({
         type: 'POST',
         url: 'http://xxxxxxxxxxxxxxx/processForm.php',
         data:{'message':$('#article').html(),'client': $('#visitor').html() },
                success:function(data) {
                alert('You data has been successfully e-mailed');
                      }           
                  });
               });
           });
 </script>

Please note the first div-id”aricle” block, it contains the main content, which I have been getting fine Now notice the second div-id “visitor” block right below the first block. I have not been able to get the input of that one. I would prefer to get it as a regular form text input.

I think the reason I am not able to get the input is because I am not having any <form></form> tag. But then the main part is working, so I just need it work along-with it somehow. I leave it upto you guys to suggest me solution or a best way to get both the data. I am familiar with a little php but javascript, not at all.

Here is the content of the processForm.php. All these have been put together by learning what I could from several articles on the web. Many thanks in advance.

$to = "emailto@awesomepeople.com";
  $subject  = "NEW ARTICLE";
  $message .= $_POST['message'];
  $client   = $_POST ['client'];
  $headers = "From: awesomesite <someone@website.com>" . "rn";
  $headers .= "MIME-Version: 1.0rn";
  $headers .= "Content-Type: text/html; charset=ISO-8859-1rn";           
  mail($to, $subject, $message, $headers);

Answer

I am just sharing the code below to get the value of required textbox in the provided div id = “visitor”, I hope it helps to get your desired results:

<script type="text/javascript">
     jQuery(document).ready(function($) {<br/>

         $('#button').click(function(){<br/>

         $.ajax({<br/>
         type: 'POST',<br/>
         url: 'http://xxxxxxxxxxxxxxx/processForm.php',<br/>
         data:<br/>{<br/>'message':$('#article').html(),<br/>'client': $('#name').val() <br/>},<br/>
                success:function(data) <br/>{<br/>
                alert('You data has been successfully e-mailed');
<br/>                      }           
     <br/>             });
          <br/>     });<br/>
           });<br/>
 </script>

I have replaced $('#visitor').html() to $('#name').val() in your script, as the below is the explanation:

$('#visitor').html() = gives the inner HTML content of that div of id = “visitor” which is a text box and I am sure that you are interested in the value entered by any user into that text box.
$('#name').val() = gives you the value of text box whose id = “name”

I hope the above will help you to get desired results with explanation.

Advertisement

Answer