Page 1 of 1

Cant get my form to submit all variables (php/ajax/jquery)

Posted: Mon Oct 27, 2008 1:46 pm
by sambkk
Hi
I hope someone could help me out with my contact form. I cant figure this out for my self. The form works, and submits but only 1 field of data is included in the email received, the rest are blank.

I made the form based on a tutorial found here

I added several fields and also added some CSS styling of my own, but the procesing of the form shouldnt be affected by any of that.

My problem is submitting the form works fine, but the only value that is actually sent over is the email address the user inputs.

As I added several fields I had to rename fields but tried to match the new field names in the .js and .php files.

My form looks like this:

Code: Select all

 
<div id="formright">
    <h3 class="formtitle">Sign Up Form</h3>
        <!-- SIGN UP FORM START -->
 
                <div id="contact_form">
            <form name="contact" method="post" action="">
  
                <div class="content">  
                
                    <!-- START SIGN UP FORM ROWS -->
    
                    <div class="row">
                        <div class="left">First name<span class="required">*</span></div>
                        <div class="right"><input type="text" name="fname" id="fname" class="sami" /></div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Last name<span class="required">*</span></div>
                        <div class="right"><input type="text" name="lname" id="lname" class="sami" /></div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Address</div>
                        <div class="right"><input type="text" name="address" id="address" class="sami" /></div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">State</div>
                        <div class="right">
                            <select name="state" name="state" id="state" class="sami2" />
                            <option selected="selected">Select</option>
                                                            <option value="Alabama">Alabama</option>
                                                            <option value="Alaska">Alaska</option>
                                                            <option value="Arizona">Arizona</option>
                                                            <option value="Arkansas">Arkansas</option>
 
                                                            <option value="California">California</option>
                                                            <option value="Colorado">Colorado</option>
                                                            <option value="Connecticut">Connecticut</option>
                                                            <option value="Delaware">Delaware</option>
                                                            <option value="District of Columbia">District of Columbia</option>
                                                            <option value="Florida">Florida</option>
 
                                                            <option value="Georgia">Georgia</option>
                                                            <option value="Hawaii">Hawaii</option>
                                                            <option value="Idaho">Idaho</option>
                                                            <option value="Illinois">Illinois</option>
                                                            <option value="Indiana">Indiana</option>
                                                            <option value="Iowa">Iowa</option>
 
                                                            <option value="Kansas">Kansas</option>
                                                            <option value="Kentucky">Kentucky</option>
                                                            <option value="Louisiana">Louisiana</option>
                                                            <option value="Maine">Maine</option>
                                                            <option value="Maryland">Maryland</option>
                                                            <option value="Massachusetts">Massachusetts</option>
 
                                                            <option value="Michigan">Michigan</option>
                                                            <option value="Minnesota">Minnesota</option>
                                                            <option value="Mississippi">Mississippi</option>
                                                            <option value="Missouri">Missouri</option>
                                                            <option value="Montana">Montana</option>
                                                            <option value="Nebraska">Nebraska</option>
 
                                                            <option value="Nevada">Nevada</option>
                                                            <option value="New Hampshire">New Hampshire</option>
                                                            <option value="New Jersey">New Jersey</option>
                                                            <option value="New Mexico">New Mexico</option>
                                                            <option value="New York">New York</option>
                                                            <option value="North Carolina">North Carolina</option>
 
                                                            <option value="North Dakota">North Dakota</option>
                                                            <option value="Ohio">Ohio</option>
                                                            <option value="Oklahoma">Oklahoma</option>
                                                            <option value="Oregon">Oregon</option>
                                                            <option value="Pennsylvania">Pennsylvania</option>
                                                            <option value="Rhode Island">Rhode Island</option>
 
                                                            <option value="South Carolina">South Carolina</option>
                                                            <option value="South Dakota">South Dakota</option>
                                                            <option value="Tennessee">Tennessee</option>
                                                            <option value="Texas">Texas</option>
                                                            <option value="Utah">Utah</option>
                                                            <option value="Vermont">Vermont</option>
 
                                                            <option value="Virginia">Virginia</option>
                                                            <option value="Washington">Washington</option>
                                                            <option value="West Virginia">West Virginia</option>
                                                            <option value="Wisconsin">Wisconsin</option>
                                                            <option value="Wyoming">Wyoming</option>
                                                     </select>
                    
                        </div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Email<span class="required">*</span></div>
                        <div class="right"><input type="text" name="email" id="email" class="sami" /></div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Home phone<span class="required">*</span></div>
                        <div class="right"><input type="text" name="hphone" id="hphone" class="sami" /></div>
                                                <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Mobile phone</div>
                        <div class="right"><input type="text" name="mphone" id="mphone" class="sami" /></div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                    
                        <div class="right2"><select name="how" name="how" id="how" class="sami3" />
                            <option selected="selected">How did you hear about us?</option>
                                                            <option value="Search Engine Search">Internet Search</option>
                                                            <option value="Referral">Referral</option>
                            </select>
                        </div>
                        <div class="fclear"></div>
                    </div>
                
                    <div class="row">
                        <div class="left">Comments</div>
                        <div class="right"><textarea cols="15" rows="3"  name="comment" id="comment" class="sami4" /></textarea></div>
                        <div class="fclear"></div>
                    </div>
                    
                <div class="row">
                    <label class="error" for="fname" id="fname_error">Your first name is required.</label> 
                    <label class="error" for="lname" id="lname_error">Your last name is required.</label>
                     <label class="error" for="email" id="email_error">A valid email is required.</label> 
                    <label class="error" for="hphone" id="hphone_error">A valid contact number is required.</label>   
      
                </div> 
 
                    <div class="row2">  
                        <!--<button value="submit" class="submitBtn"><span>Submit</span></button>-->
                        <!--<a class="button" href="#"><span>Submit</span></a>   -->
                         <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> 
                        <div class="fclear"></div>
                    </div>
  
            </div>
            </form>  
        </div>
            
        <!-- END SIGN UP FORM  -->
</div> 
These javascript/jquery files are called in the head section of the document

Code: Select all

 
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script src="js/runonload.js"></script>
<script src="js/tutorial.js"></script>
 
I have altered the contents of tutorial.js to match my form as so:

Code: Select all

 
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
 
  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
        
      var fname = $("input#fname").val();
        if (fname == "") {
      $("label#fname_error").show();
      $("input#fname").focus();
      return false;
    }
    
          var lname = $("input#lname").val();
        if (lname == "") {
      $("label#lname_error").show();
      $("input#lname").focus();
      return false;
    }
    
     var address = $("input#address ").val();  
     var state = $("select#state ").val();  
     var mphone = $("input#mphone ").val(); 
     var how = $("select#how ").val(); 
     var comment = $("textarea#comment ").val(); 
     
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
        var hphone = $("input#hphone").val();
        if (hphone == "") {
      $("label#hphone_error").show();
      $("input#hphone").focus();
      return false;
    }
        
        var dataString = 'fname='+ fname + '&lname='+ lname + '&address='+ address + '&state='+ state + '&email=' + email + '&hphone=' + hphone + '&mphone=' + mphone + '&how=' + how + '&comment=' + comment ;
        //alert (dataString);return false;
        
        $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Sign Up Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1300, function() {
          $('#message').append("<img id='checkmark' src='images/check.jpg' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});
 
**note that when I uncomment the //alert (datastring):return falsem line, all my form variables are displayed correctly and so the contents of the variable datastring has all the user input correctly.

Then I have the process.php file which I altered in my opinion appropriately (I left the original emailaddress samples used in the tutyorial in here but I did enter those corectly as I am eceiving an email as I am supposed to), but somewhere the process is failing as only the email addresss variable is included in the email I receive, all other fields are blank.

(First name, last name etc fields are all blank in the email that is received)

Code: Select all

 
<?php
if ((isset($_POST['fname'])) && (strlen(trim($_POST['fname'])) > 0)) {
    $name = stripslashes(strip_tags($_POST['fname']));
} else {$name = 'No first name entered';}
if ((isset($_POST['lname'])) && (strlen(trim($_POST['lname'])) > 0)) {
    $name = stripslashes(strip_tags($_POST['lname']));
} else {$name = 'No last name entered';}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
    $email = stripslashes(strip_tags($_POST['email']));
} else {$email = 'No email entered';}
if ((isset($_POST['hphone'])) && (strlen(trim($_POST['hphone'])) > 0)) {
    $phone = stripslashes(strip_tags($_POST['hphone']));
} else {$phone = 'No phone entered';}
ob_start();
?>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<table width="550" border="1" cellspacing="2" cellpadding="2">
  <tr bgcolor="#eeffee">
    <td>First Name</td>
    <td><?=$fname;?></td>
  </tr>
    <tr bgcolor="#eeffee">
    <td>Last Name</td>
    <td><?=$lname;?></td>
  </tr>
      <tr bgcolor="#eeffee">
    <td>Address</td>
    <td><?=$address;?></td>
  </tr>
      <tr bgcolor="#eeffee">
    <td>State</td>
    <td><?=$state;?></td>
  </tr>
  <tr bgcolor="#eeeeff">
    <td>Email</td>
    <td><?=$email;?></td>
  </tr>
      <tr bgcolor="#eeffee">
    <td>Home Phone</td>
    <td><?=$hphone;?></td>
  </tr>
  <tr bgcolor="#eeffee">
    <td>Mobile Phone</td>
    <td><?=$mphone;?></td>
  </tr>
      <tr bgcolor="#eeffee">
    <td>How Did You Hear?</td>
    <td><?=$how;?></td>
  </tr>
      <tr bgcolor="#eeffee">
    <td>Comments</td>
    <td><?=$comment;?></td>
  </tr>
</table>
</body>
</html>
<?
$body = ob_get_contents();
 
$to = 'someone@example.com';
$email = 'email@example.com';
$fromaddress = "you@example.com";
$fromname = "Online Contact";
 
require("phpmailer.php");
 
$mail = new PHPMailer();
 
$mail->From     = "mail@yourdomain.com";
$mail->FromName = "Contact Form";
$mail->AddAddress("email_address@example.com","Name 1");
$mail->AddAddress("another_address@example.com","Name 2");
 
$mail->WordWrap = 50;
$mail->IsHTML(true);
 
$mail->Subject  =  "Contact form submitted";
$mail->Body     =  $body;
$mail->AltBody  =  "This is the text-only body";
 
if(!$mail->Send()) {
    $recipient = 'your_email@example.com';
    $subject = 'Contact form failed';
    $content = $body;   
  mail($recipient, $subject, $content, "From: mail@yourdomain.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail");
  exit;
}
?> 
 
I made no other changes to any of the files included in the tutorial.

I also have 2 additional questions regarding A:

at the very end of the proces.php
the part :

Code: Select all

 
if(!$mail->Send()) {
    $recipient = 'your_email@example.com';
    $subject = 'Contact form failed';
    $content = $body;   
  mail($recipient, $subject, $content, "From: mail@yourdomain.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail");
  exit;
}
?>
 
I am not really sure what it does or how it works, I left it unaltered and the form was submitted ok, but I am intrigued to say the least.

and B: as I read through the tutorial and the comments, I understood that this wont work if no javascript is enabled. I'd like to find a way to make it work. A comment was left :"..the action on this form is set to nothing, so if there was no JS enabled it would submit to itself. It’s easy to pop some PHP in the top of the page checking for a submission and then processing the form if needed, including showing error messages..."
Additionally I also havent really touched the top part of the process.php file as I didnt find it necessary (mistake?)

I would appreciate help getting such php together.

Thanks in advance for all your help.

Sami

Re: Cant get my form to submit all variables (php/ajax/jquery)

Posted: Mon Oct 27, 2008 4:14 pm
by requinix
8O So much code!

Code: Select all

if ((isset($_POST['fname'])) && (strlen(trim($_POST['fname'])) > 0)) {
    $name = stripslashes(strip_tags($_POST['fname']));
} else {$name = 'No first name entered';}
if ((isset($_POST['lname'])) && (strlen(trim($_POST['lname'])) > 0)) {
    $name = stripslashes(strip_tags($_POST['lname']));
} else {$name = 'No last name entered';}
if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {
    $email = stripslashes(strip_tags($_POST['email']));
} else {$email = 'No email entered';}
if ((isset($_POST['hphone'])) && (strlen(trim($_POST['hphone'])) > 0)) {
    $phone = stripslashes(strip_tags($_POST['hphone']));
} else {$phone = 'No phone entered';}
The only variables you define are $name, $email, and $phone. There's no mention of $fname, $lname, $address, etc.

Code: Select all

<tr bgcolor="#eeffee">
  <td>First Name</td>
  <td><?=$fname;?></td>
</tr>
No $fname means there's nothing to put in that cell. Same for the other undefined variables.

Re: Cant get my form to submit all variables (php/ajax/jquery)

Posted: Mon Oct 27, 2008 4:41 pm
by panic!
have you tried using firebug to debug your xmlhttp calls?

install it (google firebug)

enable the net panel.

click the net panel.

and you can see if the ajax calls are being made.

you can also enable the console and script panels too.

Re: Cant get my form to submit all variables (php/ajax/jquery)

Posted: Mon Oct 27, 2008 4:45 pm
by califdon
Basically, you have a very large script that you downloaded, along with several javascript files some of which you haven't even shown us, and would take hours of study to figure out how it's supposed to work, even before you modified it. If you're really lucky, there may be someone who is willing to put in their time to do that.

Look, I'm sorry to be unsympathetic, and if someone has the time, great. But I think you'd get a lot more help by asking at the web site where you downloaded the script. They already know what it's supposed to do. We don't.

Re: Cant get my form to submit all variables (php/ajax/jquery)

Posted: Tue Oct 28, 2008 1:46 am
by sambkk
Hi everyone
thanks a lot for your comments and especially for having even attempted to look at the long post.

-panic: thanks, I got the same suggestion before from someone but didnt know how to use it , I use firebug already but havent used the feature you mentioned as I usually use it for css/html stuf only, and thanks to you I am now in a position to try since you told me what to do. I will try it. :D

-tasairis: thanks, I will try that, for some reason somehow, I had the feeling those decalarations werent affecting anything. It doesnt make sense now that I think about it and will definately try it, I believe I did declare a few previosuly with no effect in the outcome. BUt I wil try ity immediately and post if succesfull. And I am infact quite hopefull that my problems are due to this moronic oversight by me.

califdon: thanks for the comment. I definately hear what you are saying. Its a long post for one. The thing is the form is working , an email is sent and received. The files I didnt post work and are such that they require no alterations. and since my problem is the fact that all variables are still "onboard" untill we get to the last php file process.php I think the problem is very simple abd infact close to what wasairis pointed out if not it exactly. If one was to take the time and look at the code then you cold see that it wasnt that complivcated, but yes I definately agree, its a lot of code and people have other things to do as well. :oops:

Thanks again for your comments guys.

Sami

Re: Cant get my form to submit all variables (php/ajax/jquery)

Posted: Tue Oct 28, 2008 2:01 am
by sambkk
Hi
Tasairis thanks you for the advice it was spot on. I dontknow how I even missed it in the first place. too many cups of coffee affecting my vision perhaps.
Anyway, thank you very much for your help.
And thanks to the other posters as well.

Sami