Solved

jquery validate - load php page first

Posted on 2012-07-24
27
863 Views
Last Modified: 2012-07-26
I am using the below jquery code to validate my form:

$(".QuoteForm").validate({
		rules: {
			first_name: "required",
			last_name: "required",
			email: {
				required: true,
				email: true
			}
		},
		
		messages: {
			first_name: "Please enter your firstname",
			last_name: "Please enter your lastname",
			email: "Please enter a valid email address"
		}
	});	

Open in new window


However my form code is created via a ajax call to a php page.

So I need to load the php file first before I validate. How can I integrate the above code with the code below???

$("#Selected_Printer_Quote").load('quote_script.php');

Open in new window


Hope that makes sense?
0
Comment
Question by:petewinter
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 11
  • 2
27 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38219208
(correction)

try using a callback function in the load method.

$(function(){
   $("#Selected_Printer_Quote").load('quote_script.php', function(data){
           $(".QuoteForm").validate({
		rules: {
			first_name: "required",
			last_name: "required",
			email: {
				required: true,
				email: true
			}
		},
		
		messages: {
			first_name: "Please enter your firstname",
			last_name: "Please enter your lastname",
			email: "Please enter a valid email address"
		}
	});	
    });
 });

Open in new window

0
 

Author Comment

by:petewinter
ID: 38220348
Thanks for the reply, but it's not quite working.

Can you please check out the link below to help me work out why?

http://www.cmyukdigital.com/new/quote3.php#printerid_2

JQuery: http://www.cmyukdigital.com/new/js/quote3.js

Is should validate the form fields in the same way that this link does:

http://www.cmyukdigital.com/new/quote2.php
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38220531
I'm not at a computer, but I will look at it tonight.

Cheers
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38220696
It appears to me that you are trying to submit the form with Ajax, but you need to validate it first so your fields aren't null. In your question you said you wanted to load the script before validating, but maybe that wasn't quite correct? Am I right? What is the PHP script - post to db?

If I'm right, then you need to do the Ajax call in the submit handler of the validate method.
0
 

Author Comment

by:petewinter
ID: 38221657
Yes that's correct.

1) I first need to load the form with AJAX as some of the content is based on a URL request.
2) I then need to validate the form
3) Post the form to a database and send an email.

So a submit hander of the validate method sounds correct.

Can you show me how to do this please?

My php code is below...

<?php require_once('../Connections/conn_cmyuk.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

if(isset($_POST["printer_select"])){
	mysql_select_db($database_conn_cmyuk, $conn_cmyuk);
	$query_rs_printer_select = "SELECT * FROM printer WHERE id = ". $_POST["printerid"];
	$rs_printer_select = mysql_query($query_rs_printer_select, $conn_cmyuk) or die(mysql_error());
	$row_rs_printer_select = mysql_fetch_assoc($rs_printer_select);
	$totalRows_rs_printer_select = mysql_num_rows($rs_printer_select);
}

?>

<div id="printer_quote">

<form action="" method="POST" name="QuoteForm" id="QuoteForm" class="QuoteForm">
  
<input name="printer_id" type="hidden" id="printer_id" value="<?php echo $row_rs_printer_select['id']; ?>" />

<h1>Get your <?php echo $row_rs_printer_select['name']; ?> Quote Online now!</h1>

<p>Please enter you details below and we will send you a personalised quotation.</p>

	<p class="first_name"> 
   <label for="first_name">First Name <span>*</span></label>
   <input name="first_name" type="text" id="first_name" size="45"/>
   </p>
   
   <p class="last_name">
   <label for="last_name">Last Name <span>*</span></label>
   <input name="last_name" type="text" id="last_name" size="45" />
   </p>
   
   <p class="company">
   <label for="company">Company <span>*</span></label>
   <input name="company" type="text" id="company" size="45" />
   </p>
   
   <p class="address1">
   <label for="address1">Address Line 1 <span>*</span></label>
   <input name="address1" type="text" id="address1" size="45" />
   </p>
   
   <p class="address2">
   <label for="address2">Address Line 2</label>
   <input name="address2" type="text" id="address2" size="45" />
   </p>

	<p class="town_city">
	<label for="town_city">Town / City <span>*</span></label>
   	<input name="town_city" type="text" id="town_city" size="45" />
    </p>

	<p class="county">
	<label for="county">County</label>
   	<input name="county" type="text" id="county" size="45" />
    </p>
    
    <p class="post_code">
    <label for="post_code">Post Code <span>*</span></label>
   	<input name="post_code" type="text" id="post_code" size="45" />
    </p>
    
    <p class="phone">
    <label for="phone">Phone</label>
   	<input name="phone" type="text" id="phone" size="45" />
    </p>
    
    <p class="fax">
    <label for="fax">Fax</label>
   	<input name="fax" type="text" id="fax" size="45" />
    </p>
    
    <p class="email">
    <label for="email">Email <span>*</span></label>
   	<input name="email" type="text" id="email" size="45" />
    </p>

	<input type="submit" name="Quote" id="Quote" value="Send me a Quote" class="Big_Button"/>
 
 </form>
 
 <div id="Quote_Success">
 
 <h1>Quotation Request Sent</h1>
 
 <p>Dear <strong>xxxxx</strong></p>

<p>Thank you for your quotation request for the <strong>xxxx</strong> Printer.</p>
 
<p>You quotation request has been sent for approval. We will email you a personalised quote shortly.<br />
  <br />
  Kind Regards<br />
  <br />
  <strong>CMYUK</strong></p>

<p>If you have any other questions call us on <strong>+44 (0) 118 989 2929</strong> or email <strong><script language="JavaScript" type="text/javascript">
<!-- Begin
document.write('<a href=\"mailto:info'+ '@' + 'cmyuk.com\">');
document.write('info'+ '@' +'cmyuk.com</a>');
// End -->
    </script></strong>.</p>
 
 </div>
 
  <?php mysql_free_result($rs_printer_select); ?>
 
</div>

Open in new window

0
 
LVL 11

Expert Comment

by:mcnute
ID: 38222108
i ran into the same problem once. The ajax callback is fired on success but is not waiting for the content totally generated by the php file. So your validation fires before the form is created by your php.

I worked around it with a timeout like this:

$(function(){
   $("#Selected_Printer_Quote").load('quote_script.php', function(data){
           var validateForm = function () {
$(".QuoteForm").validate({
		rules: {
			first_name: "required",
			last_name: "required",
			email: {
				required: true,
				email: true
			}
		},
		
		messages: {
			first_name: "Please enter your firstname",
			last_name: "Please enter your lastname",
			email: "Please enter a valid email address"
		}
	});	
    });
setTimeout(validateForm, 800);
}
 });
                                            

Open in new window


This is not the most elegant solution but it worked for me. The problem is, that you're not considering the different internet connections of your clients, but you can put it reasonably high so it is still ok for people with high-speed connections to wait and people with low-speed connections will have enough time to load the generated form of your php.

Good luck with it.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38222162
try it with the $.ajax function instead of the shortcut. then render your form only after it's completely loaded, and do the validation.

$.ajax({
                url: 'quote_script.php',
                success: function(data) {
                    $('#Selected_Printer_Quote').html(data);
                    $(".QuoteForm").validate({
				
                        // Rules
                        rules: {
                            first_name: "required",
                            last_name: "required",
                            company: "required",
                            address1: "required",
                            town_city: "required",
                            post_code: "required",
                            email: {
                                required: true,
                                email: true
                            }
                        },
		
                        // Messages
                        messages: {
                            first_name: "Enter your firstname",
                            last_name: "Enter your lastname",
                            company: "Enter your Company",
                            address1: "Enter your Address Line 1",
                            town_city: "Enter your Town / City",
                            post_code: "Enter your Post Code",
                            email: "Invalid email address"
                        },
		
                        errorElement: "span",
	
                        submitHandler: function() { 
                            $(".QuoteForm").slideUp();
                            $("#Quote_Success").slideDown();
                            $("body").scrollTop(0);
                        }
   	
                    });
                }
            });

Open in new window


ou don't need a timeout. this will only render the form if the file is fully loaded. That's the whole idea of a callback.

let me know how you get on.
0
 

Author Comment

by:petewinter
ID: 38222183
kozaiwaniec - Thanks, but didn't work unfortunately?

I got the below error message in firebug log if that helps?

ReferenceError: Can't find variable: Begin
0
 

Author Comment

by:petewinter
ID: 38222191
mcnute - Thanks for the reply, but I am getting an syntax error. Also I'm worried about is not working with some slow broadband speeds.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38222194
"Begin" That's inside a comment line. You have other problems going on.

First of all, I would separate the php script into two files. One that GETs the form, and one that POSTs the form data.

I have to run right now. I'll post something for you in a couple hours.

in the meantime, fix this:

comments are written differently in javascript than html:

<script language="JavaScript" type="text/javascript">
// Begin
document.write('<a href=\"mailto:info'+ '@' + 'cmyuk.com\">');
document.write('info'+ '@' +'cmyuk.com</a>');
// End
    </script>

Open in new window

0
 

Author Comment

by:petewinter
ID: 38222219
kozaiwaniec - Thanks I will remove that code for now. If you can show me how you suggest to separate the scripts when your back that will be great.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38222896
here's a test:

http://candpgeneration.com/EE/EE-form-validate-ajax.html

OK, I thought you were trying to post the data in the same php script, but after actually looking at it you're not (doh! - my bad). So there is no need to separate anything out. If you want to submit the form with Ajax though, you'll need to put your submit php script in the submithandler of the validate method (see comment in js file). I can help you with that if you can post your submit script (I'm assuming it's in the html page since there is no action specified in the form tag?)

Anyway, here's the js:
$(function(){

            $.ajax({
                url: 'quote_script.php',
                success: function(data) {
                    $('#Selected_Printer_Quote').html(data);
                    $(".QuoteForm").validate({
				
                        // Rules
                        rules: {
                            first_name: "required",
                            last_name: "required",
                            company: "required",
                            address1: "required",
                            town_city: "required",
                            post_code: "required",
                            email: {
                                required: true,
                                email: true
                            }
                        },
		
                        // Messages
                        messages: {
                            first_name: "Enter your firstname",
                            last_name: "Enter your lastname",
                            company: "Enter your Company",
                            address1: "Enter your Address Line 1",
                            town_city: "Enter your Town / City",
                            post_code: "Enter your Post Code",
                            email: "Invalid email address"
                        },
		
                        errorElement: "span",
	
                        submitHandler: function() { 
                            // ajax form submission goes here
                            $(".QuoteForm").slideUp();
                            $("#Quote_Success").slideDown();
                            $("body").scrollTop(0);
                        }
   	
                    });
                }
            });

          
        });

Open in new window


and a lightly revised php file. Your js was causing issues, i fixed it.
(Also, I changed require_once to include_once, so my example would still work without the connection script, but you can change it back)
<?php include_once('../Connections/conn_cmyuk.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {

    function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {
        if (PHP_VERSION < 6) {
            $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
        }

        $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

        switch ($theType) {
            case "text":
                $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
                break;
            case "long":
            case "int":
                $theValue = ($theValue != "") ? intval($theValue) : "NULL";
                break;
            case "double":
                $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
                break;
            case "date":
                $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
                break;
            case "defined":
                $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
                break;
        }
        return $theValue;
    }

}

if (isset($_POST["printer_select"])) {
    mysql_select_db($database_conn_cmyuk, $conn_cmyuk);
    $query_rs_printer_select = "SELECT * FROM printer WHERE id = " . $_POST["printerid"];
    $rs_printer_select = mysql_query($query_rs_printer_select, $conn_cmyuk) or die(mysql_error());
    $row_rs_printer_select = mysql_fetch_assoc($rs_printer_select);
    $totalRows_rs_printer_select = mysql_num_rows($rs_printer_select);
}
?>

<div id="printer_quote">

    <form action="" method="POST" name="QuoteForm" id="QuoteForm" class="QuoteForm">

        <input name="printer_id" type="hidden" id="printer_id" value="<?php echo $row_rs_printer_select['id']; ?>" />

        <h1>Get your <?php echo $row_rs_printer_select['name']; ?> Quote Online now!</h1>

        <p>Please enter you details below and we will send you a personalised quotation.</p>

        <p class="first_name">
            <label for="first_name">First Name <span>*</span></label>
            <input name="first_name" type="text" id="first_name" size="45"/>
        </p>

        <p class="last_name">
            <label for="last_name">Last Name <span>*</span></label>
            <input name="last_name" type="text" id="last_name" size="45" />
        </p>

        <p class="company">
            <label for="company">Company <span>*</span></label>
            <input name="company" type="text" id="company" size="45" />
        </p>

        <p class="address1">
            <label for="address1">Address Line 1 <span>*</span></label>
            <input name="address1" type="text" id="address1" size="45" />
        </p>

        <p class="address2">
            <label for="address2">Address Line 2</label>
            <input name="address2" type="text" id="address2" size="45" />
        </p>

        <p class="town_city">
            <label for="town_city">Town / City <span>*</span></label>
            <input name="town_city" type="text" id="town_city" size="45" />
        </p>

        <p class="county">
            <label for="county">County</label>
            <input name="county" type="text" id="county" size="45" />
        </p>

        <p class="post_code">
            <label for="post_code">Post Code <span>*</span></label>
            <input name="post_code" type="text" id="post_code" size="45" />
        </p>

        <p class="phone">
            <label for="phone">Phone</label>
            <input name="phone" type="text" id="phone" size="45" />
        </p>

        <p class="fax">
            <label for="fax">Fax</label>
            <input name="fax" type="text" id="fax" size="45" />
        </p>

        <p class="email">
            <label for="email">Email <span>*</span></label>
            <input name="email" type="text" id="email" size="45" />
        </p>

        <input type="submit" name="Quote" id="Quote" value="Send me a Quote" class="Big_Button"/>

    </form>

    <div id="Quote_Success">

        <h1>Quotation Request Sent</h1>

        <p>Dear <strong>xxxxx</strong></p>

        <p>Thank you for your quotation request for the <strong>xxxx</strong> Printer.</p>

        <p>You quotation request has been sent for approval. We will email you a personalised quote shortly.<br />
            <br />
            Kind Regards<br />
            <br />
            <strong>CMYUK</strong></p>

        <p class="moreinfo">If you have any other questions call us on <strong>+44 (0) 118 989 2929</strong> or email 
                <script language="JavaScript" type="text/javascript">
                    $(".moreinfo").append('<strong><a href=\"mailto:info'+ '@' + 'cmyuk.com\">info'+ '@' +'cmyuk.com</a></strong>.');
                    
                </script>
            
</p>
    </div>

    <?php mysql_free_result($rs_printer_select); ?>

</div>

Open in new window

0
 

Author Comment

by:petewinter
ID: 38222948
Many thanks. Thats working, but you have removed the query code at the top.

    var hash = window.location.hash;
    if (hash.substring(0, 11).toLowerCase() == "#printerid_" && hash.length > 11) {
        $("#Selected_Printer_Quote").load('quote_script.php', {
            printerid: hash.substring(11),
            printer_select: "true"
        }, function() {
            $("#brand_names").hide();
            $("#BrandGoBack").show();
            $("#printer_names").hide();
            $("#PrinterGoBack").show();
            $(".enter_details").show();
        });
    } else {
        $("#Selected_Printer_Quote").html('<h1 class="Red">No printer has been selected!</h1>')
    }

Open in new window


I needed this to pull in the data on page load. How can I integrate into your supplied code so both are working?

Really appreciate your help! :)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38222993
oh right, sorry.

http://localhost:8888/candp/EE/EE-form-validate-ajax.html
pretend a printer was selected:
http://localhost:8888/candp/EE/EE-form-validate-ajax.html#printerid_2.html

and the revised script:

$(function(){
            var hash = window.location.hash;
            
            if (hash.substring(0, 11).toLowerCase() == "#printerid_" && hash.length > 11) {
                $.ajax({
                    url: 'quote_script.php',
                    data: {
                        printerid: hash.substring(11),
                        printer_select: "true"
                    },
                    success: function(data) {
                        $('#Selected_Printer_Quote').html(data);
                        $(".QuoteForm").validate({
				
                            // Rules
                            rules: {
                                first_name: "required",
                                last_name: "required",
                                company: "required",
                                address1: "required",
                                town_city: "required",
                                post_code: "required",
                                email: {
                                    required: true,
                                    email: true
                                }
                            },
		
                            // Messages
                            messages: {
                                first_name: "Enter your firstname",
                                last_name: "Enter your lastname",
                                company: "Enter your Company",
                                address1: "Enter your Address Line 1",
                                town_city: "Enter your Town / City",
                                post_code: "Enter your Post Code",
                                email: "Invalid email address"
                            },
		
                            errorElement: "span",
	
                            submitHandler: function() { 
                                $(".QuoteForm").slideUp();
                                $("#Quote_Success").slideDown();
                                $("body").scrollTop(0);
                            }
   	
                        });
                    
                        $("#brand_names").hide();
                        $("#BrandGoBack").show();
                        $("#printer_names").hide();
                        $("#PrinterGoBack").show();
                        $(".enter_details").show();
                    }
                });
            } else {
                $("#Selected_Printer_Quote").html('<h1 class="Red">No printer has been selected!</h1>')
            }
          
        });

Open in new window

0
 

Author Comment

by:petewinter
ID: 38223512
Thanks, but there is something that is still not correct. Your links are also local links so I can't test your end.

See this link: http://www.cmyukdigital.com/new/quote4.php#printerid_2

It is not pulling in the data from the php file. I know there is not an error which the php file as this link works with out the validation.

http://www.cmyukdigital.com/new/quote3.php#printerid_2

Notice the heading. It should say "Get your HP Scitex FB500 Quote Online now!"
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38223827
oops, here are the live links:

http://candpgeneration.com/EE/EE-form-validate-ajax.html
http://candpgeneration.com/EE/EE-form-validate-ajax.html#printerid_2.html

try it this way:

$(function(){
            var hash = window.location.hash;
            
            if (hash.substring(0, 11).toLowerCase() == "#printerid_" && hash.length > 11) {
                $.ajax({
                    url: 'quote_script.php',
                    data: {
                        printerid: hash.substring(11),
                        printer_select: "true"
                    },
                    processData: false,
                    success: function(data) {
                        $('#Selected_Printer_Quote').html(data);
                        $(".QuoteForm").validate({
				
                            // Rules
                            rules: {
                                first_name: "required",
                                last_name: "required",
                                company: "required",
                                address1: "required",
                                town_city: "required",
                                post_code: "required",
                                email: {
                                    required: true,
                                    email: true
                                }
                            },
		
                            // Messages
                            messages: {
                                first_name: "Enter your firstname",
                                last_name: "Enter your lastname",
                                company: "Enter your Company",
                                address1: "Enter your Address Line 1",
                                town_city: "Enter your Town / City",
                                post_code: "Enter your Post Code",
                                email: "Invalid email address"
                            },
		
                            errorElement: "span",
	
                            submitHandler: function() { 
                                $(".QuoteForm").slideUp();
                                $("#Quote_Success").slideDown();
                                $("body").scrollTop(0);
                            }
   	
                        });
                    
                        $("#brand_names").hide();
                        $("#BrandGoBack").show();
                        $("#printer_names").hide();
                        $("#PrinterGoBack").show();
                        $(".enter_details").show();
                    }
                });
            } else {
                $("#Selected_Printer_Quote").html('<h1 class="Red">No printer has been selected!</h1>')
            }
          
        });

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38224220
OK, change this line to use GET:

$query_rs_printer_select = "SELECT * FROM printer WHERE id = " . $_GET["printerid"];

and revert back to this version of the script:

$(function(){
            var hash = window.location.hash;
            
            if (hash.substring(0, 11).toLowerCase() == "#printerid_" && hash.length > 11) {
                $.ajax({
                    //type: "GET",
                    url: "quote_script.php",
                    data: {
                        printerid: hash.substring(11),
                        printer_select: "true"
                    },
                    success: function(data) {
                        $("#Selected_Printer_Quote").html(data);
                        $(".QuoteForm").validate({
				
                            // Rules
                            rules: {
                                first_name: "required",
                                last_name: "required",
                                company: "required",
                                address1: "required",
                                town_city: "required",
                                post_code: "required",
                                email: {
                                    required: true,
                                    email: true
                                }
                            },
		
                            // Messages
                            messages: {
                                first_name: "Enter your firstname",
                                last_name: "Enter your lastname",
                                company: "Enter your Company",
                                address1: "Enter your Address Line 1",
                                town_city: "Enter your Town / City",
                                post_code: "Enter your Post Code",
                                email: "Invalid email address"
                            },
		
                            errorElement: "span",
	
                            submitHandler: function() { 
                                $(".QuoteForm").slideUp();
                                $("#Quote_Success").slideDown();
                                $("body").scrollTop(0);
                            }
   	
                        });
                    
                        $("#brand_names").hide();
                        $("#BrandGoBack").show();
                        $("#printer_names").hide();
                        $("#PrinterGoBack").show();
                        $(".enter_details").show();
                    }
                });
            } else {
                $("#Selected_Printer_Quote").html("<h1 class='Red'>No printer has been selected!</h1>")
            }
          
        });

Open in new window


this should really work now :o
0
 

Author Comment

by:petewinter
ID: 38224464
Still no good unfortunately. It's not pulling in the data?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38224480
are you getting the # string in the url when you select a printer to start with?

post another link to your latest file. cheers.
0
 

Author Comment

by:petewinter
ID: 38224508
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38224580
we're getting there. please post your php script.

I have to run, i'll be back in a little while...
0
 

Author Comment

by:petewinter
ID: 38224619
<?php require_once('../Connections/conn_cmyuk.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

if(isset($_POST["printer_select"])){
      mysql_select_db($database_conn_cmyuk, $conn_cmyuk);
      $query_rs_printer_select = "SELECT * FROM printer WHERE id = ". $_GET["printerid"];
      $rs_printer_select = mysql_query($query_rs_printer_select, $conn_cmyuk) or die(mysql_error());
      $row_rs_printer_select = mysql_fetch_assoc($rs_printer_select);
      $totalRows_rs_printer_select = mysql_num_rows($rs_printer_select);
}

?>

<div id="printer_quote">

<form action="" method="POST" name="QuoteForm" id="QuoteForm" class="QuoteForm">
 
<input name="printer_id" type="hidden" id="printer_id" value="<?php echo $row_rs_printer_select['id']; ?>" />

<h1>Get your <?php echo $row_rs_printer_select['name']; ?> Quote Online now!</h1>

<p>Please enter you details below and we will send you a personalised quotation.</p>

      <p class="first_name">
   <label for="first_name">First Name <span>*</span></label>
   <input name="first_name" type="text" id="first_name" size="45"/>
   </p>
   
   <p class="last_name">
   <label for="last_name">Last Name <span>*</span></label>
   <input name="last_name" type="text" id="last_name" size="45" />
   </p>
   
   <p class="company">
   <label for="company">Company <span>*</span></label>
   <input name="company" type="text" id="company" size="45" />
   </p>
   
   <p class="address1">
   <label for="address1">Address Line 1 <span>*</span></label>
   <input name="address1" type="text" id="address1" size="45" />
   </p>
   
   <p class="address2">
   <label for="address2">Address Line 2</label>
   <input name="address2" type="text" id="address2" size="45" />
   </p>

      <p class="town_city">
      <label for="town_city">Town / City <span>*</span></label>
         <input name="town_city" type="text" id="town_city" size="45" />
    </p>

      <p class="county">
      <label for="county">County</label>
         <input name="county" type="text" id="county" size="45" />
    </p>
   
    <p class="post_code">
    <label for="post_code">Post Code <span>*</span></label>
         <input name="post_code" type="text" id="post_code" size="45" />
    </p>
   
    <p class="phone">
    <label for="phone">Phone</label>
         <input name="phone" type="text" id="phone" size="45" />
    </p>
   
    <p class="fax">
    <label for="fax">Fax</label>
         <input name="fax" type="text" id="fax" size="45" />
    </p>
   
    <p class="email">
    <label for="email">Email <span>*</span></label>
         <input name="email" type="text" id="email" size="45" />
    </p>

      <input type="submit" name="Quote" id="Quote" value="Send me a Quote" class="Big_Button"/>
 
 </form>
 
 <div id="Quote_Success">
 
 <h1>Quotation Request Sent</h1>
 
 <p>Dear <strong>xxxxx</strong></p>

<p>Thank you for your quotation request for the <strong>xxxx</strong> Printer.</p>
 
<p>You quotation request has been sent for approval. We will email you a personalised quote shortly.<br />
  <br />
  Kind Regards<br />
  <br />
  <strong>CMYUK</strong></p>

<p>If you have any other questions call us on <strong>+44 (0) 118 989 2929</strong> or email <strong><script language="JavaScript" type="text/javascript">
<!-- Begin
document.write('<a href=\"mailto:info'+ '@' + 'cmyuk.com\">');
document.write('info'+ '@' +'cmyuk.com</a>');
// End -->
    </script></strong>.</p>
 
 </div>
 
  <?php mysql_free_result($rs_printer_select); ?>
 
</div>
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38224627
if you wanna try the timeout a last time. The code i posted was wrong, the timeout was fired in the function itselt. that doesn't work.

$(function(){
   $("#Selected_Printer_Quote").load('quote_script.php', function(data){
           var validateForm = function () {
$(".QuoteForm").validate({
		rules: {
			first_name: "required",
			last_name: "required",
			email: {
				required: true,
				email: true
			}
		},
		
		messages: {
			first_name: "Please enter your firstname",
			last_name: "Please enter your lastname",
			email: "Please enter a valid email address"
		}
	});	
    });

}
setTimeout(validateForm, 800);

 });
                                            
                                            

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38224731
I'm on the train now so I can't do much, but..


If you click on the link to my test page, you can see that using GET the id is returned. Now granted, I've passed over all the database stuff in my example for obvious reasons.

Do a little test:

Instead of reqire_once, write include_once to rule out the connection not working. Then move the  $_get directly into the HTML (this is just a test) . Instead of echoing the printer name, just echo the id for now:
<?php echo $_GET["printerid"]; ?>

I'm trying to troubleshoot one piece at a time. So we're bypassing  the db query for now.

Lol..trying to type code on an iPad is no fun...

Believe it or not, I think this actually really close. Btw, a timeout is not going to fix the fact that you're using GET in the Ajax and POST in the PHP.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38224959
so, I tested this with my database, and although I have my db connection setup differently, so I can't exactly copy and paste, this should work now. I'm too tired to explain right now, but please give these two files a try.


quote_script.php:

<?php require_once('../Connections/conn_cmyuk.php'); ?>

<div id="printer_quote">
<form action="" method="POST" name="QuoteForm" id="QuoteForm" class="QuoteForm">


<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

if(isset($_POST["printer_select"])){
      mysql_select_db($database_conn_cmyuk, $conn_cmyuk);
      $query_rs_printer_select = "SELECT * FROM printer WHERE id = ". $_POST["printerid"];
      $rs_printer_select = mysql_query($query_rs_printer_select, $conn_cmyuk) or die(mysql_error());
      $row_rs_printer_select = mysql_fetch_assoc($rs_printer_select);
      $totalRows_rs_printer_select = mysql_num_rows($rs_printer_select);
      
      $id = $row_rs_printer_select['id'];
      $name = $row_rs_printer_select['name'];
      
      echo "<input name='printer_id' type='hidden' id='printer_id' value='{$id}' />

            <h1>Get your {$name} Quote Online now!</h1>";


        }

        ?>


  


<p>Please enter you details below and we will send you a personalised quotation.</p>

      <p class="first_name"> 
   <label for="first_name">First Name <span>*</span></label>
   <input name="first_name" type="text" id="first_name" size="45"/>
   </p>
   
   <p class="last_name">
   <label for="last_name">Last Name <span>*</span></label>
   <input name="last_name" type="text" id="last_name" size="45" />
   </p>
   
   <p class="company">
   <label for="company">Company <span>*</span></label>
   <input name="company" type="text" id="company" size="45" />
   </p>
   
   <p class="address1">
   <label for="address1">Address Line 1 <span>*</span></label>
   <input name="address1" type="text" id="address1" size="45" />
   </p>
   
   <p class="address2">
   <label for="address2">Address Line 2</label>
   <input name="address2" type="text" id="address2" size="45" />
   </p>

      <p class="town_city">
      <label for="town_city">Town / City <span>*</span></label>
         <input name="town_city" type="text" id="town_city" size="45" />
    </p>

      <p class="county">
      <label for="county">County</label>
         <input name="county" type="text" id="county" size="45" />
    </p>
    
    <p class="post_code">
    <label for="post_code">Post Code <span>*</span></label>
         <input name="post_code" type="text" id="post_code" size="45" />
    </p>
    
    <p class="phone">
    <label for="phone">Phone</label>
         <input name="phone" type="text" id="phone" size="45" />
    </p>
    
    <p class="fax">
    <label for="fax">Fax</label>
         <input name="fax" type="text" id="fax" size="45" />
    </p>
    
    <p class="email">
    <label for="email">Email <span>*</span></label>
         <input name="email" type="text" id="email" size="45" />
    </p>

      <input type="submit" name="Quote" id="Quote" value="Send me a Quote" class="Big_Button"/>
 
 </form>
 
 <div id="Quote_Success">
 
 <h1>Quotation Request Sent</h1>
 
 <p>Dear <strong>xxxxx</strong></p>

<p>Thank you for your quotation request for the <strong>xxxx</strong> Printer.</p>
 
<p>You quotation request has been sent for approval. We will email you a personalised quote shortly.<br />
  <br />
  Kind Regards<br />
  <br />
  <strong>CMYUK</strong></p>

<p class="moreinfo">If you have any other questions call us on <strong>+44 (0) 118 989 2929</strong> or email 
                <script language="JavaScript" type="text/javascript">
                    $(".moreinfo").append('<strong><a href=\"mailto:info'+ '@' + 'cmyuk.com\">info'+ '@' +'cmyuk.com</a></strong>.');
                    
                </script>
            
</p>
 
 </div>
 
  <?php mysql_free_result($rs_printer_select); ?>
 
</div>

Open in new window


javascript:

$(function(){
            var hash = window.location.hash;
            
            if (hash.substring(0, 11).toLowerCase() == "#printerid_" && hash.length > 11) {
                $.post("quote_script.php",
                    {
                        printerid: hash.substring(11),
                        printer_select: "true"
                    },
                    function(data) {
                        //alert(data);
                        $("#Selected_Printer_Quote").html(data);
                        $(".QuoteForm").validate({
				
                            // Rules
                            rules: {
                                first_name: "required",
                                last_name: "required",
                                company: "required",
                                address1: "required",
                                town_city: "required",
                                post_code: "required",
                                email: {
                                    required: true,
                                    email: true
                                }
                            },
		
                            // Messages
                            messages: {
                                first_name: "Enter your firstname",
                                last_name: "Enter your lastname",
                                company: "Enter your Company",
                                address1: "Enter your Address Line 1",
                                town_city: "Enter your Town / City",
                                post_code: "Enter your Post Code",
                                email: "Invalid email address"
                            },
		
                            errorElement: "span",
	
                            submitHandler: function() { 
                                $(".QuoteForm").slideUp();
                                $("#Quote_Success").slideDown();
                                $("body").scrollTop(0);
                            }
   	
                        });
                    
                        $("#brand_names").hide();
                        $("#BrandGoBack").show();
                        $("#printer_names").hide();
                        $("#PrinterGoBack").show();
                        $(".enter_details").show();
                    });
                
            } else {
                $("#Selected_Printer_Quote").html("<h1 class='Red'>No printer has been selected!</h1>")
            }
          
        });

Open in new window

0
 

Author Closing Comment

by:petewinter
ID: 38225823
hipee :)

Many thanks. You have been a massive help!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38226070
:)
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question