Try:
total += Number($(this).data("value"));
Yes that worked, but say you select the size then a border with value of 5.00, if you change your mind and then select no-boder value 0.00 it doesnt then take the 5.00 off.
No sorry ignore that, i moved the calculateTotal(); to the top and it worked fine.
Thanks, will add this now to the main page.
Thats working on the main page now thanks Pullo, but to get it working I had to take away the code to check the radio button in the check list as it was stopping it working
as it was:
$("#square").change(function () {
calculateTotal();
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Square.jpg)";
document.getElementById('radioborder').checked = true;
});
to
$("#square").change(function () {
calculateTotal();
document.getElementById("textWrapper").style.backgroundImage="url(images/150x150/slate_150x150_Square.jpg)";
});
So I’m guessing that will have to be deleted, its not something that was asked for anyway, more of feedback for the user that I added.
Right no that didnt solve the little problem as I thought…
Basically if you for example select the size and then play with the border sizes the value adds up fine.
But once you say go through the natural order of choosing the size, then enter your words, then style, then colour, font etc and then then get to border the value ends ups as NAN.
So I think its that the other radio buttons with no value are being added to the total, and its confusing it all.
I have just put the checklist notifiers back in and its the same problem, and then if you jump from selecting the size straight to the borders the value becomes NAN, so its that the checklist is being updated and at the same time the other checks being recorder on the other radio buttons.
I think I got an answer to it, which means taking away the check list, which isnt a problem, then give all the other radio buttons:
data-value="0.00"
This means as you will know that everything has a value, but if there no value then it adds 0.00 to it, which is fine.
Seems to work, what you think Pullo?
Thanks again for the help too.
Well, the lazy answer would be “Good on ya!”, but to be honest, there were a few things on your page that could have been done a little better.
I’m quite happy to take a look, if you want and make some suggestions for improvement.
What is the url of the current version.
Also, can you confirm that the current version won’t change five times whilst I am having a look 
Hi Pullo,
Yes I would love it if you could give me a bit of advice, but as you say I’m working on it as we speak and its going to change pretty much every 2 mins or so.
So was thinking if I could get it to a point so at least the boss can see it working, and making progress and can then come back to it with you, as I htink I can see improvements for it, especially with duplicate code with different ID’s.
With that I’m trying to subtract 5 from the total value as I have come across an issue when the client wanted the obrder radio buttons to be turned off when the customer selects the slate size 300 x 75.
But what happens is if say the customer selects one of the other sizes first and then chooses a border with an extra £5, but then decides to look at the size with no borders, I have to take that £5 off.
So what im doing is inside that size slate function doing a check to see if those radio buttons are checked and then trying ot subtract 5 off as below.
But Im not getting any luck with it.
$("#300x75").change(function () {
calculateTotal();
if (document.getElementById("recessed").checked == true) {
total += Number($(this).data("value"));
$("#total").text(total)-5;
}
Hope that makes sense.
Hi Pullo, looks i got it, i forgot to add the var total = 0; at the start
Thanks.
No probs (I didn’t really do anything)
Just let me know when the page is ready to have a look at and I’ll help you clean up the code.
Morning Pullo,
If you dont mind having a look.
I noticed yesterday that the part that the customer uses to enter the text for it to display in the development area works fine in IE and Mozilla, but not in Chrome and Safari.
This is the code.
$("#firstline, #secondline, #thirdline").keyup(function () {
var inputBox1 = document.getElementById('firstline');
inputBox1.onkeyup = function(){
document.getElementById('textBox1').innerHTML = inputBox1.value;
}
I have also had to move the work to the link below -
http://devchecksafetyfirst.csf.dcmanaged.com/Adam/index3.php
To make sure it wasnt a css issue with z-index or something else I put some words into the div where the dynamic text appears and its fine, so its def an issue with the code.
I think I got it, i changed onkeyup to onkeydown and it seems to work fine now.
$("#firstline, #secondline, #thirdline").keyup(function () {
var inputBox1 = document.getElementById('firstline');
inputBox1.onkeydown = function(){
document.getElementById('textBox1').innerHTML = inputBox1.value;
}
});
Hi,
That’s good - I can never remember which one does what, but I invariably end up selecting the wrong one.
This is weird:
$("#firstline, #secondline, #thirdline").keyup(function () {
var inputBox1 = document.getElementById('firstline');
inputBox1.onkeydown = function(){
document.getElementById('textBox1').innerHTML = inputBox1.value;
}
});
You are attaching an event handler:
$("#firstline, #secondline, #thirdline").keyup(function () {
...
});
The code within this event handler will be fired every time one of these divs has focus and a key is pressed.
Withing your event handler, you then do this:
var inputBox1 = document.getElementById('firstline');
This makes no sense.
You are including jQuery, so use it:
var inputBox1 = $('#firstline');
And use it in the right place:
var inputBox1 = $('#firstline'),
inputBox2 = $('#secondline'),
inputBox3 = $('#thirdline')
$allBoxes = inputBox1.add(inputBox2).add(inputBox3);
$allBoxes.keyup(function () {
...
});
This is only one possibility (I don’t know how many boxes you have).
You might also consider the attribute ends with selector: https://api.jquery.com/attribute-ends-with-selector/
$( "input[name$='line']")
Inside your keyup event handler, you are then attaching a keydown event handler.
You only need to attach handlers once, not every time a key is pressed.
I strongly suspect you could get away with something like this:
$("input[name$='line']").keyup(function(){
val = $('#firstline').val();
$('#textBox1').text(val);
});
Hope that helps
Thanks Pullo,
Thats funny I was looking at it myself yesterday and was thinking it just doesnt look right, but it worked so i didnt worry lol, not the best I know.
I will change it and try yours today.
I have a complete.php page to send the client an email, and also want to offer the customer the paypal buttong to proceed to payment page.
What I am trying to do is on success of the email sending, fancybox pops up and I want the paypla button with the form that surrouns it to appear.
But I cant work out how to activate fancybox from within php without having to click a button.
<?php
session_start();
if (isset($_POST['submitFirst'])) {
$_SESSION['size'] = $_POST['Size'];
$_SESSION['text1'] = $_POST['text1'];
$_SESSION['text2'] = $_POST['text2'];
$_SESSION['text3'] = $_POST['text3'];
$_SESSION['case'] = $_POST['Case'];
$_SESSION['colour'] = $_POST['Colour'];
$_SESSION['font'] = $_POST['FontType'];
$_SESSION['border'] = $_POST['Border'];
$_SESSION['totalHidden'] = $_POST['Total'];
}
if (isset($_POST['submit'])) {
$fname = $_POST['FName'];
$sname = $_POST['SName'];
$email = $_POST['Email'];
$telephone = $_POST['Telephone'];
$from = 'From: ' . $name . ' <' . $email . '>';
$to = "[EMAIL="achillesheel@live.co.uk"]achillesheel@live.co.uk[/EMAIL]";
$subject = "Slate Sign Build Enquiry";
$content = "Hi Adam, \
\
" . $fname . " " . $sname . ", has built a sign their selections are below: \
\
Size of slate: " . $_SESSION['size'] . "\
\
First line of text: " . $_SESSION['text1'] . "\
\
Second line of text: " . $_SESSION['text2'] . "\
\
Third line of text: " . $_SESSION['text3'] . "\
\
Stylised font: " . $_SESSION['case'] . "\
\
Colour of font: " . $_SESSION['colour'] . "\
\
Font type: " . $_SESSION['font'] . "\
\
Border: " . $_SESSION['border'] . "\
\
Total cost: " . $_SESSION['totalHidden'] . " <br/><br/> Email address: " . $email . "\
\
Telephone number: " . $telephone . " <br/><br/>";
//$success = "<h3 style='font-size:14px; margin-left:90px; margin-bottom:20px; margin-top:20px;'>Thank you! Your message has been sent!</h3>";
mail($to,$subject,$content,$from);
-- Activate fancybox here --
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<form action="complete.php" method="post">
<label><span style="color:#333;">*</span> First Name:</label>
<input type="text" name="FName" value="<?php if ($_POST['name'] && empty($success)) { echo $_POST['name']; } ?>" />
<label><span style="color:#333;">*</span> Surname:</label>
<input type="text" name="SName" value="<?php if ($_POST['sname'] && empty($success)) { echo $_POST['sname']; } ?>" />
<label><span style="color:#333;">*</span> Email:</label>
<input type="text" name="Email" value="<?php if ($_POST['email'] && empty($success)) { echo $_POST['email']; } ?>" />
<label><span style="color:#333;">*</span> Tel:</label>
<input type="text" name="Telephone" value="<?php if ($_POST['phone'] && empty($success)) { echo $_POST['phone']; } ?>" />
<label><span style="color:#333;">*</span> Comments:</label><br />
<textarea name="message" rows="20" cols="20"><?php if ($_POST['message'] && empty($success)) { echo $_POST['message']; } ?></textarea>
<input type="submit" class="submit" name="submit" value="Complete" style="position:relative; float:left; left:300px;" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
If I can get fancybox to appear, will then look into passing a html file to it.
One way to do this is to prevent the form’s default submit action using JS, then fire off an AJAX request to your PHP script with whatever data it needs, telling it to send the mail. Once it has sent the mail, it could return some kind of status code to the JS, upon which the JS would open up a FancyBox or whatever.
PHP and JS cannot talk to each other directly.
PHP is a server-side language which is parsed on the server and the resultant HTML is sent to the browser.
JS is a client side scripting language which can interact with the HTML the server sends to the browser.
To have it talk to your PHP script, you need to use AJAX or some such method.
Right…
Will keep on reading your suggestion until it sinks in and will see what I can find to look at.
Thanks Pullo
lol. It’s not that difficult, really.
I don’t want to write the whole thing for you, but am more than happy to help if you have a specific question.
I presume you have a mail script in place already.
I would start by attempting to send an ajax request to this script so that it delivers the mail without your visitor leaving the original page.
OK I made some decent progress with this, and all seems to be fine so far, just looking to work on the php bit next.
Here’s what i got so far
<form action="complete.php" method="post">
<label><span style="color:#333;">*</span> First Name:</label>
<input type="text" name="FName" value="" />
<label><span style="color:#333;">*</span> Surname:</label>
<input type="text" name="SName" value="" />
<label><span style="color:#333;">*</span> Email:</label>
<input type="text" name="Email" value="" />
<label><span style="color:#333;">*</span> Tel:</label>
<input type="text" name="Telephone" value="" />
<label><span style="color:#333;">*</span> Comments:</label><br />
<textarea name="Message" rows="20" cols="20"></textarea>
<input type="submit" class="submit" id="submit" name="submit" value="Complete" style="position:relative; float:left; left:300px;" />
</form>
<script>
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
//Get the data from all the fields
var fname = $('input[name=FName]');
var sname = $('input[name=SName]');
var email = $('input[name=Email]');
var telephone = $('input[name=Telephone]');
var message = $('textarea[name=Message]');
//Simple validation to make sure user entered something
if (fname.val()=='') {
alert ("Please add your first name");
return false;
}
if (sname.val()=='') {
alert ("Please add your surname");
return false;
}
if (email.val()=='') {
alert ("Please add your email address");
return false;
}
if (telephone.val()=='') {
alert ("Please add your telephone number");
return false;
}
//organize the data
var data = 'Fname=' + fname.val() + '&Sname=' + sname.val() + '&Email=' + email.val() + '&Telephone=' + telephone.val() + '&Message=' + encodeURIComponent(message.val());
//show the loading sign
$('.loading').show();
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//guess this is where the fancybox app goes
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
</script>
Working on process.php now, and fingers crossed will get it working shortly.
have created a success area for the fancybox script, in place of a success alert
Hi,
I would consider using POST as opposed to GET, as then you don’t have all of the user’s details as parameters in a query string.
Also, why are you using encodeURIComponent for the message?
Apart from that, you’re really on the right track.
Nice one!
Removed, thank you Pullo.
Quite like this actually, very neat.
OK I have an email arriving in my inbox with all the data in the right places, which is good, so i know at least that bit is working, but the strange thing thats happening is that i get an alert back of - Sorry, unexpected error. Please try again later.
Which is created if the email sent isnt a sucsess, which is obviously not right as I got the email, but cant work it out but it is PHP now inside the process.php page.
will post them both below with a link to the dev area.
<script>
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {
//Get the data from all the fields
var fname = $('input[name=FName]');
var sname = $('input[name=SName]');
var email = $('input[name=Email]');
var telephone = $('input[name=Telephone]');
var message = $('textarea[name=Message]');
//Simple validation to make sure user entered something
if (fname.val()=='') {
alert ("Please add your first name");
return false;
}
if (sname.val()=='') {
alert ("Please add your surname");
return false;
}
if (email.val()=='') {
alert ("Please add your email address");
return false;
}
if (telephone.val()=='') {
alert ("Please add your telephone number");
return false;
}
//organize the data
var data = 'Fname=' + fname.val() + '&Sname=' + sname.val() + '&Email=' + email.val() + '&Telephone=' + telephone.val() + '&Message=' + message.val();
//disabled all the text fields
$('.text').attr('enabled','false');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//POST method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
//$('.form').fadeOut('slow');
alert('good');
//show the success message
//$('.done').fadeIn('slow');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
</script>
Followed by process.php
<?php
session_start();
//Retrieve form data.
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$fname = ($_GET['Fname']) ? $_GET['Fname'] : $_POST['Fname'];
$sname = ($_GET['Sname']) ? $_GET['Sname'] : $_POST['Sname'];
$email = ($_GET['Email']) ? $_GET['Email'] : $_POST['Email'];
$telephone = ($_GET['Telephone']) ?$_GET['Telephone'] : $_POST['Telephone'];
$message = ($_GET['Message']) ?$_GET['Message'] : $_POST['Message'];
//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;
//Simple server side validation for POST data, of course, you should validate the email
if (!$fname) $errors[count($errors)] = 'Please enter your first name.';
if (!$sname) $errors[count($errors)] = 'Please enter your surname.';
if (!$email) $errors[count($errors)] = 'Please enter your email.';
if (!$telephone) $errors[count($errors)] = 'Please enter your telephone number.';
//if the errors array is empty, send the mail / no errors found
if (!$errors) {
$from = 'From: ' . $fname . ' <' . $email . '>';
$to = "[EMAIL="info@accend4web.co.uk"]info@accend4web.co.uk[/EMAIL]";
$subject = "Slate Sign Build Enquiry";
$content = "Hi Adam, <br/><br/>" . $fname . " " . $sname . ", has built a sign their selections are below: <br/><br/>Size of slate: " . $_SESSION['size'] . "<br/><br/>First line of text: " . $_SESSION['text1'] . "<br/><br/>Second line of text: " . $_SESSION['text2'] . "<br/><br/>Third line of text: " . $_SESSION['text3'] . "<br/><br/>Stylised font: " . $_SESSION['case'] . "<br/><br/>Colour of font: " . $_SESSION['colour'] . "<br/><br/>Font type: " . $_SESSION['font'] . "<br/><br/>Border: " . $_SESSION['border'] . "<br/><br/>Total cost: " . $_SESSION['totalHidden'] . " <br/><br/> Email address: " . $email . "<br/><br/>Telephone number: " . $telephone . " <br/><br/>";
//$success = "<h3 style='font-size:14px; margin-left:90px; margin-bottom:20px; margin-top:20px;'>Thank you! Your message has been sent!</h3>";
$result = sendmail($to,$subject,$content,$from);
//if POST was used, display the message straight away
if ($_POST) {
echo 'Thank you! We have received your message.';
//This one for ajax
//1 means success, 0 means failed
} else {
echo '1';
}
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="yourdomain.com">Back</a>';
exit;
}
//Simple mail function with HTML header
function sendmail($to, $subject, $content, $from) {
$headers = "MIME-Version: 1.0" . "\\r\
";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\\r\
";
$headers .= 'From: ' . $from . "\\r\
";
$result = mail($to, $subject, $content, $headers);
if ($result) return 1;
else return 0;
}
?>
http://devchecksafetyfirst.csf.dcmanaged.com/Adam/complete.php