Page 1 of 1

textbox submit

Posted: Sat Jul 28, 2012 2:18 pm
by YoussefSiblini
Hi,

I have a form and inside the form I have a textbox where user can add a voucher number, what I want is when the user add the right number inside the textbox (without submitting the form) the price change and if the user add a wrong number inside the textbox (before submitting the form) echo an error message.
Can I achieve this with php, or do I have to use Jquery, if I have to use Jquery how can I add php variables inside Jquery.


Please can you help me by providing some code as I am new to this, and this will be sooo soooo appreciated.


Many thanks,


Jo

Re: textbox submit

Posted: Sat Jul 28, 2012 4:35 pm
by social_experiment
YoussefSiblini wrote:Can I achieve this with php, or do I have to use Jquery, if I have to use Jquery how can I add php variables inside Jquery.
You want to use ajax here, php can't handle client side stuff because it's a server side language. Could you clarify the second part of the question

Re: textbox submit

Posted: Sat Jul 28, 2012 4:43 pm
by YoussefSiblini
Thank you, you answered both my questions.
Is their a code sample? I will be really happy :)


Jo

Re: textbox submit

Posted: Sat Jul 28, 2012 4:49 pm
by social_experiment
YoussefSiblini wrote:what I want is when the user add the right number inside the textbox (without submitting the form) the price change and if the user add a wrong number inside the textbox (before submitting the form) echo an error message.
How will the right number be determined? Tested against a database or stored somewhere like in a variable? I can't give specific code because i am unsure about what you have in mind but have a look at this url
http://docs.jquery.com/Post

Re: textbox submit

Posted: Sat Jul 28, 2012 6:00 pm
by YoussefSiblini
OK I will show you the code I am using, as you will see from the code the user has to insert a voucher number and click the <input type="submit" name="CheckVoucher" value="Add Voucher"> to check if the voucher is working, I want to get rid of this button and make it when the user add a voucher number and take mouse out if it is the right number it will give a message saying that 20% off has been taken, and if it is wrong number the message say wrong number.

Code: Select all

if (isset($_POST['CheckVoucher'])) 
{ 
	$Voucher_TextBox = $_POST['Voucher_TextBox'];
	if (!isset($_SESSION["VoucherSession"])) 
	{ 
		if($Voucher_TextBox == 1234)
		{
			$discount = 0.20; // 20% discount
			$price = number_format($price * (1 - $discount), 2); // be sure to have only 2 numbers after the point like: 65.95
			$TotalPrice = number_format($price + $shipping, 2); // Get the total price with shipping after the 20% discount.
			$total = str_replace('.', '', $TotalPrice); // get rude of the point
			
			$voucherOutput = '20% has been taken off from the item price';
			$_SESSION["VoucherSession"] = "hello" or die();
		}
		else
		{
			$voucherOutput =
			'
				<div id="HSBCBuy_Form_Div">
				   <div class="Dark_Red_Color">The Voucher number you entered is wrong, please insert a correct voucher number.</div>
				   <div class="Grey_Color">Make sure that you selected the right country from the countries drop list.</div>
				</div>
			';
		}
	} 
	else
	{
		$voucherOutput = 'You already used your voucher number';
	}
}
HTML:

Code: Select all

<form name="form" action="this.php" method="post">
    <INPUT class="HSBCBuy_TextBox" type="text" name="BillingFirstName" value="Paul">
    <input  class="Voucher_TextBox" name="Voucher_TextBox" type="text" value="add"/><input type="submit" name="CheckVoucher" value="Add Voucher"> 
    <input type="submit" NAME= "continue" value="Continue" class="Light_Red_Button" onclick="javascript:return validateMyForm();">
</form>

Re: textbox submit

Posted: Sun Jul 29, 2012 10:06 am
by social_experiment
This some code that i created; i've modified it a bit to suite your purpose. This is the jQuery code. Note : Add an element with the id #cnc where you want the message to display or change the code below to match you existing code.

Code: Select all

$(document).ready(function(){	
        // 
	$('input.Voucher_TextBox').blur(function(){
		//		
		var term = $('input[name="Voucher_TextBox"]').val();
		$.post('ajax.php', {'term': $('input[name="Voucher_TextBox"]').val()},
		function(data){
			if (term != '') {				
                                 // displays the data if term is not empty
				$('#cnc').html(data);					
			}
		});		
	});
});
And on 'ajax.php' you can have something similar to this

Code: Select all

<?php
 // defined within the jQuery code
 $term = $_POST['term'];

 if ($term == 1234) { 
    // do something;
 }
 else {
   // do something
 }
?>
YoussefSiblini wrote:I want to get rid of this button
You should rethink this perhaps; javascript might not be enabled on the visitor's browser and then the code above won't work

Re: textbox submit

Posted: Sat Aug 25, 2012 11:07 am
by YoussefSiblini
Thank you,

This is soo useful, and that is very kind of you to share the code :)

Jo