php pricing element

Ginger-Menace

Ginger-Menace

Ginger-Menace

Associate
Joined
9 May 2010
Posts
1,669
Location
sheffield
Hello all,

I would like some help please! at work we have created a spreadsheet with formulas to price up cost of printing images, I would like to add to our website a simple section with 3 inputs 2 of which customers can input dimensions (eg 10x8) and a third with a drop down to select paper types. The html and css I can do, however I am unable to work out the php ( I have only ever done simple edits to scripts already written).
Here is my html:
HTML: 
 <div class="box">
                             <h1>UNDER CONSTRUCTION</H1>
                            <p style='text-align:center;'> Here you can use our simple pricing form to work out the cost of your print.</p>
                            <br>
                            <form>
                             <div class="form-row">
                               <div class="col-lg-3">
                                 <input id="size-width" type="text" class="form-control" placeholder="Width">
                               </div>
                               <div class="col-lg-1">
                                 <p style='text-align:center;'>X</p>
                               </div>
                               <div class="col-lg-3">
                                 <input id="size-height" type="text" class="form-control" placeholder="Height">
                               </div>
                               <div class="form-group col-lg-3">
                                 <select id="paper-type" class="form-control">
                                   <option selected>Paper....</option>
                                   <option id="paper1">Fine art Smooth</option>
                                   <option id="paper2">230 Mat</option>
                                 </select>
                               </div>
                                <button id="gen-price" type="submit" class="btn btn-primary">Generate Price</button>
                             </div>
                             <div class="form-row">
                               <fieldset disabled>
                                 <div class="form-group ">
                                   <label for="disabledTextInput">Price</label>
                                   <input type="text" id="disabledTextInput" class="form-control" placeholder="Generated Price">
                                 </div>
                             </div>
                           </form>


                           </div>

What i want to do is, take the input from id:size width multiply by size height and then multiply by a number, then post the result in the disable text input. Is this possible?

Can anyone help or point me in the direction of help for dummies :)

TIA
GM
 
Last edited:
You could do it directly on the page using javascript (or jQuery):
I'd add the multiplier value as an attribute on the dropdown choices:
Code: 
<select id="paper-type" class="form-control">
                                  <option selected>Paper....</option>
                                   <option id="paper1" data-multiplier="0.06">Fine art Smooth</option>
                                   <option id="paper2" data-multiplier="0.042">230 Mat</option>
                                 </select>

Then use jQuery to get all the values, multiply them together and add the result to the disabled text area:
Code: 
$(document).ready(function(){
$('#gen-price').click(function(){
var width = $('#size-width').val();
var height = $('#size-height').val();
var multiplier = $('#paper-type option:selected').data('multiplier');
var price = width * height * multiplier;
$('#disabledTextInput').val(price);
});
})

You could also do it in PHP if you'd prefer. You'd need to submit the form and do the calculations in PHP then insert the result into the disabled text box and return the form html back to the user again.
 
touch said:
You could do it directly on the page using javascript (or jQuery):
I'd add the multiplier value as an attribute on the dropdown choices:
Code: 
<select id="paper-type" class="form-control">
                                  <option selected>Paper....</option>
                                   <option id="paper1" data-multiplier="0.06">Fine art Smooth</option>
                                   <option id="paper2" data-multiplier="0.042">230 Mat</option>
                                 </select>

Then use jQuery to get all the values, multiply them together and add the result to the disabled text area:
Code: 
$(document).ready(function(){
$('#gen-price').click(function(){
var width = $('#size-width').val();
var height = $('#size-height').val();
var multiplier = $('#paper-type option:selected').data('multiplier');
var price = width * height * multiplier;
$('#disabledTextInput').val(price);
});
})

You could also do it in PHP if you'd prefer. You'd need to submit the form and do the calculations in PHP then insert the result into the disabled text box and return the form html back to the user again.
Click to expand...
Brilliant! thank you! this has worked, however 2 seconds after it works it refreshes and data is lost, what could be the issue here?
 
Oh, it's because the button is a submit button so it's submitting the form.
After this line:
Code: 
$('#disabledTextInput').val(price);
add another line:
Code: 
return false;
 
this is great! thank you so much for your help! Sorry for all the questions! but is there a way to rouund up the numbers? it is currently showing 8 decimal places, and i only need 2 (as it is a monetary value)
 
Ginger-Menace said:
this is great! thank you so much for your help! Sorry for all the questions! but is there a way to rouund up the numbers? it is currently showing 8 decimal places, and i only need 2 (as it is a monetary value)
Click to expand...

Use the toFixed() method - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

So you would use the below to output to the disabled text box, with the '2' denoting decimal places -
Code: 
$('#disabledTextInput').val(price.toFixed(2));


Edit - And regarding the button submitting the form, the easiest method is to change the type to 'button' instead of 'submit' -
Code: 
<button id="gen-price" type="button" class="btn btn-primary">Generate Price</button>
 
Sorry guys, me again! I, again have tried and failed to read and learn! how would I go about making it show a minimum of 3. I have tried if statements but I cant get it to work

Here is my new and failed script:
Code: 
<script>
    $(document).ready(function(){
$('#gen-price').click(function(){
var width = $('#size-width').val();
var height = $('#size-height').val();
var multiplier = $('#paper-type option:selected').data('multiplier');
var price1 = width * height * multiplier;
var price2 = width * height * multiplier*0.2;
var total = price1 + price2;
var myprice;
if (total < 3.00) {
  myprice = "3";
} else {
  myprice = total.toFixed(2);
}
document.getElementById("Gen1-price").innerHTML = myprice;
}
}

return false;
});
})
</script>
Code: 
<script>
    $(document).ready(function(){
$('#gen-price').click(function(){
var width = $('#size-width').val();
var height = $('#size-height').val();
var multiplier = $('#paper-type option:selected').data('multiplier');
var price1 = width * height * multiplier;
var price2 = width * height * multiplier*0.2;
var total = price1 + price2;
$('#Gen1-price').val(total.toFixed(2));
return false;
});
})
</script>
 
To set a minimum value for price you can use `Math.max()`. This will output the larger of the two provided values.

I've also made a couple of tweaks to the HTML and JS to bring it up to ES6 (assuming you don't need legacy IE support) and also to make it more accessible by hooking to the submit event of the form instead of the click of the submit button. I also used null falsy coalescing to make 0 the default values if nothing was entered in to the fields to avoid NaN being shown.

Code: 
jQuery($ => {
  $('form').on('submit', e => {
    e.preventDefault();
 
    let width = $('#size-width').val() || 0;
    let height = $('#size-height').val() || 0;
    let multiplier = $('#paper-type option:selected').data('multiplier') || 0;
    let price = Math.max(3, width * height * multiplier).toFixed(2);
    $('#disabledTextInput').val(price);
  });
});


Here's a working example: https://jsfiddle.net/RoryMcCrossan/rnhszb73/
 
You must log in or register to reply here.
Back
Top Bottom