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

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

 
 
 

Learn cloud, mobile, security, data and web technologies with Pluralsight (affiliate link).
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

502 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
76369 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: Dosh referral: 00001283 | Sharesies | Goodsync | Mighty Ape | Backblaze

 

freitasm on Keybase | My technology disclosure

 

 

 

 

 

 


firefuze

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

NordVPN Helps Users Protect Themselves From Vulnerable Apps
Posted 5-Dec-2023 14:27


First-of-its-Kind Flight Trials Integrate Uncrewed Aircraft Into Controlled Airspace
Posted 5-Dec-2023 13:59


Prodigi Technology Services Announces Strategic Acquisition of Conex
Posted 4-Dec-2023 09:33


Samsung Announces Galaxy AI
Posted 28-Nov-2023 14:48


Epson Launches EH-LS650 Ultra Short Throw Smart Streaming Laser Projector
Posted 28-Nov-2023 14:38


Fitbit Charge 6 Review 
Posted 27-Nov-2023 16:21


Cisco Launches New Research Highlighting Gap in Preparedness for AI
Posted 23-Nov-2023 15:50


Seagate Takes Block Storage System to New Heights Reaching 2.5 PB
Posted 23-Nov-2023 15:45


Seagate Nytro 4350 NVMe SSD Delivers Consistent Application Performance and High QoS to Data Centers
Posted 23-Nov-2023 15:38


Amazon Fire TV Stick 4k Max (2nd Generation) Review
Posted 14-Nov-2023 16:17


Over half of New Zealand adults surveyed concerned about AI shopping scams
Posted 3-Nov-2023 10:42


Super Mario Bros. Wonder Launches on Nintendo Switch
Posted 24-Oct-2023 10:56


Google Releases Nest WiFi Pro in New Zealand
Posted 24-Oct-2023 10:18


Amazon Introduces All-New Echo Pop in New Zealand
Posted 23-Oct-2023 19:49


HyperX Unveils Their First Webcam and Audio Mixer Plus
Posted 20-Oct-2023 11:47









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.







Pluralsight