1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

php pricing element

Discussion in 'HTML, Graphics & Programming' started by Ginger-Menace, 29 Apr 2021.

Tags:
  1. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    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: 29 Apr 2021
  2. touch

    Capodecina

    Joined: 28 Oct 2006

    Posts: 11,918

    Location: Sufferlandria

    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.
     
  3. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    Location: sheffield

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

    Capodecina

    Joined: 28 Oct 2006

    Posts: 11,918

    Location: Sufferlandria

    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;
     
  5. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    Location: sheffield

    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)
     
  6. visibleman

    Wise Guy

    Joined: 3 Jun 2005

    Posts: 1,688

    Location: The South

    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>
     
  7. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    Location: sheffield

    perfect thank you! you both are awesome!
     
  8. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    Location: sheffield

    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>
     
  9. GravyMonster

    Capodecina

    Joined: 18 Oct 2002

    Posts: 14,407

    Location: The land of milk & beans

    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/
     
  10. Ginger-Menace

    Wise Guy

    Joined: 9 May 2010

    Posts: 1,668

    Location: sheffield

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