Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.


firefuze

510 posts

Ultimate Geek


#90495 22-Sep-2011 18:32
Send private message

Hi All,

I have a small work related project that I am working on at the moment and need some advice/direction regarding HTML or PHP forms. Its basically a small offline website for internal use at work.

What I need is a series of drop down options, with the end result been able to copied to the clipboard or display the result on the same page.

Example drop down menus (burgers are not the subject ill be using)

Burger Bun: Gluten free (x)
                Wheat

Bun Toasted: Yes (x)
                  No

Meat Pattie: Chicken 
                 Beef (x)

Sauce: BBQ (x)
          Mayo
          Tomato




Result: You would like your BEEF burger with a TOASTEDGLUTEN FREE Bun, With BBQ Sauce.


Ideas? Advice? Programs? I don't have much HTML or PHP experience. Ive been making the site to date just using iWeb which is just fine for what I have been doing. But iWeb does not support PHP code, so will likely need to make this one page in particular of the site in a different program.

I have found a bunch HTML code on free websites but none of them give detail on how to output the result onto the same page with text around the outputs to make it like a sentence like I have above.

Cheers
          


 

Create new topic
TheGreyPilgrim
12 posts

Geek


  #524745 22-Sep-2011 19:28
Send private message

What about Javascript triggered when the dropdown changes causing rewrites in your final sentence via innerHTML?



vectran
59 posts

Master Geek


  #524748 22-Sep-2011 19:37
Send private message

You will want to use Javascript - easier than hosting a PHP server. Below is some quick test code which works.

I'd recommend using the jQuery framework - plenty of documentation and that around plus heaps of extensibility. Else you can just use straight javascript if you need something lighter.

<code>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>    
</head>

<body>
<form>
    <label>Burger Bun</label>
        <select id="bun">
            <option>Gluten Free</option>
            <option>Wheat</option>
        </select>
    <label>Bun Toasted</label>
        <select id="pattie">
            <option>Beef</option>
            <option>Chicken</option>
        </select>
</form>

Result: You would like your <span id="bun"></span> burger with a <span id="pattie"></span>...

<script>
/* Bun Type */
    $("select#bun").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("span#bun").text(str);
        })
        .change();
/* Toasted string */
    $("select#pattie").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("span#pattie").text(str);
        })
        .change();
</script>

</body>
</html>

</code>

firefuze

510 posts

Ultimate Geek


  #525913 26-Sep-2011 17:36
Send private message

Thanks for your input, I'm struggling however so going to start with another form I need for the site which should be a bit more simpler. Then give this drop down menu form another crack.

This is just a basic calculation form - someone is getting a discount, the offer is cost price * GST (1.15) + 5% (* 1.05) + 2% (* 1.02) if paying by credit card)

enter cost price

select if you are paying by credit (yes = cost price * 1.02. No = cost price * 1)

blank field to display discount price

button activate onClick event to run script which will read cost price text field, multiply it by 1.15 (GST) then multiply that amount by 1.05 (+5% offer) then will multiply by 1.02 (credit- yes) or by 1 (credit - no) and display this answer in the blank discount price field.

below is the basic html code, any advice on the javascript to use to make it come to life?  Laughing

I'm getting so confused with the different variable and function setups across tutorial sites and how they reference the form fields.

Any help would be appreciated!

<html>
<head>

<script>

<!script here

</script>

</head>

<body>


<form name="discount">

<label>Cost Price</label>
<input type="text" name="cost">

<br><br>

<label>Credit Card</label>
        <select id="credit">
            <option value="1.05">No</option>
            <option value="1">Yes</option>
        </select>

<br><br>

<label>Discount Price</label>
<input type="text" name="answer">

<br><br>

<input type="button" name="calc" value="Calculate" onClick="xxxxxxx">

</form>

</body>

</html>



freitasm
BDFL - Memuneh
79250 posts

Uber Geek

Administrator
ID Verified
Trusted
Geekzone
Lifetime subscriber

  #525927 26-Sep-2011 18:08
Send private message

A word of advice: never ever trust whatever the browser sends to the server. It means that whatever your form calculates on the browser, you should always send the raw data back to the server and let it do the calculations.

Don't accept the total or final results from the browser and use it, because it would be too easy for anyone to just put a different (lower) amount there and fool your system...





Please support Geekzone by subscribing, or using one of our referral links: Samsung | AliExpress | Wise | Sharesies | Hatch | GoodSyncBackblaze backup


firefuze

510 posts

Ultimate Geek


  #526025 26-Sep-2011 22:44
Send private message

Thanks for that bit of info, but shouldn't need to worry about it as its only going to be used for a project at work, Will be a offline website. Not used as an actual sales tool.

Create new topic





News and reviews »

Air New Zealand Starts AI adoption with OpenAI
Posted 24-Jul-2025 16:00


eero Pro 7 Review
Posted 23-Jul-2025 12:07


BeeStation Plus Review
Posted 21-Jul-2025 14:21


eero Unveils New Wi-Fi 7 Products in New Zealand
Posted 21-Jul-2025 00:01


WiZ Introduces HDMI Sync Box and other Light Devices
Posted 20-Jul-2025 17:32


RedShield Enhances DDoS and Bot Attack Protection
Posted 20-Jul-2025 17:26


Seagate Ships 30TB Drives
Posted 17-Jul-2025 11:24


Oclean AirPump A10 Water Flosser Review
Posted 13-Jul-2025 11:05


Samsung Galaxy Z Fold7: Raising the Bar for Smartphones
Posted 10-Jul-2025 02:01


Samsung Galaxy Z Flip7 Brings New Edge-To-Edge FlexWindow
Posted 10-Jul-2025 02:01


Epson Launches New AM-C550Z WorkForce Enterprise printer
Posted 9-Jul-2025 18:22


Samsung Releases Smart Monitor M9
Posted 9-Jul-2025 17:46


Nearly Half of Older Kiwis Still Write their Passwords on Paper
Posted 9-Jul-2025 08:42


D-Link 4G+ Cat6 Wi-Fi 6 DWR-933M Mobile Hotspot Review
Posted 1-Jul-2025 11:34


Oppo A5 Series Launches With New Levels of Durability
Posted 30-Jun-2025 10:15









Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.