php pricing element

[Ginger-Menace]

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:

Spoiler: 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

 

[Ginger-Menace]

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:

<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:

$(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.

Brilliant! thank you! this has worked, however 2 seconds after it works it refreshes and data is lost, what could be the issue here?

 

[Ginger-Menace]

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]

perfect thank you! you both are awesome!

 

[Ginger-Menace]

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:

Spoiler: new

<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>

Spoiler: old working

<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>

 

[Ginger-Menace]

turns out i was reading java code not jQuery! got it working now thank you