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

484 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
 
 
 

Affiliate link: Marks & Spencer sell high quality, great value clothing and home products.
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

484 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
68522 posts

Uber Geek

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





 

 

These links are referral codes

 

Geekzone broadband switch | Eletricity comparison and switch | Hatch investment (NZ$ 10 bonus if NZ$100 deposited within 30 days) | Sharesies | Mighty Ape | Backblaze | Amazon | My technology disclosure


firefuze

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

Amazon introduces new Echo devices
Posted 25-Sep-2020 11:56


Mad Catz introduces new S.T.R.I.K.E. 13 Mechanical Gaming Keyboard
Posted 25-Sep-2020 11:34


Vodafone NZ upgrades international submarine network
Posted 25-Sep-2020 09:09


Jabra announces wireless noise-cancelling airbuds, upgrade existing model
Posted 24-Sep-2020 14:43


Nokia 3.4 to be available in New Zealand
Posted 24-Sep-2020 14:34


HP announces new HP ENVY laptops aimed at content creators
Posted 24-Sep-2020 14:02


Logitech introduce MX Anywhere 3
Posted 21-Sep-2020 21:17


Countdown unveils contactless shopping with new Scan&Go tech
Posted 21-Sep-2020 09:48


HP unveils new innovations for businesses adapting to rapidly evolving workstyles and workforces
Posted 17-Sep-2020 15:36


GoPro launches new HERO9 Black camera
Posted 17-Sep-2020 09:45


Telecommunications industry launches new 5G Facts website
Posted 17-Sep-2020 07:56


New Zealand ranks 3rd in world in GSMA index
Posted 15-Sep-2020 10:13


Trend Micro Security Suite adds web monitoring to prevent identity theft
Posted 14-Sep-2020 15:37


NVIDIA to acquire Arm for US$ 40 billion
Posted 14-Sep-2020 12:27


Epson launches its next gen A3+ colour EcoTank multi-function printer
Posted 10-Sep-2020 16:08



Geekzone Live »

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


Support Geekzone »

Our community of supporters help make Geekzone possible. Click the button below to join them.

Support Geezone on PressPatron



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.

Alternatively, you can receive a daily email with Geekzone updates.