HTML Form

Forums › IT Pro and developers › HTML Form

firefuze

502 posts

Ultimate Geek

#90495 22-Sep-2011 18:32

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 TOASTED, GLUTEN 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

TheGreyPilgrim

12 posts

Geek

#524745 22-Sep-2011 19:28

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

Pluralsight

Learn cloud, mobile, security, data and web technologies with Pluralsight (affiliate link).

vectran

59 posts

Master Geek

#524748 22-Sep-2011 19:37

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

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?

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

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

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.