SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Filtering form results

    Hi,
    I am an utter newbie to Javascript so I apologise if this turns out to be really easy.

    I have a form I need to create that will tell you the price of an item depending on whether you choose small/medium/large, how many (bulk orders) and what printing process would be used. Basicley, I want the result to be different depending on the options selected. I have all the options for the dropdowns as well as the prices per item but I have no idea where to start.

    I thought this would be a good opportunity to start learning Javascript as it didn't seem too complicated. I've gone through the tutorials on W3C Javascript school site but they aren't in depth enough for me to achieve this. I could do this using a database but I thought that was complete over kill. Would it be better for me to do it in .php ?

    I hope someone can help me.

    Thanks
    Kirsty

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you looking at processing only one item, or multiple items?

    Either way is pretty simple, although it may be a little harder if you want to pull your prices etc from a database.


  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Location
    Shropshire, UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm wanting to define my result using 3 drop downs. I've found a tutorial that shows me how to change menus dynamically and I've doctored it to suit my criteria but haven't been able to get it to work yet. this is my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script type="text/javascript">

    1coloursmall=new Array(90,72,65,59,53,48);
    1colourmedium=new Array(95,77,69,63,58,53);
    1colourlarge=new Array(100,82,73,68,63,59);

    2coloursmall=new Array(95,76,68,61,55,50);
    2colourmedium=new Array(100,81,72,65,60,55);
    2colourlarge=new Array(105,86,76,70,65,60);

    3coloursmall=new Array(100,80,71,58,52);
    3colourmedium=new Array(105,85,75,68,62,56);
    3colourlarge=new Array(110,90,79,72,66,61);

    function enterTotal(quantitiesChosen) {
    quantitiesStr = quantitiesChosen.options
    [quantitiesChosen.selectedIndex].value
    if (quantitiesStr != "") {
    thequantity=parseInt(quantitiesStr)
    }

    document.bespoke.total.options.length = 0
    for(i=0;i<3coloursmall[thequantity];i++) {
    document.bespoke.total.options[i] = new Option(i+1)

    </script>


    </head>

    <body>

    <form name="bespoke" action="#">
    <select name="choose_sizes">
    <option>Choose Size</option>
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
    </select>

    <select name="choose_quantities" onChange="enterTotal(this)">
    <option>Choose Quantity</option>
    <option>1,000</option>
    <option>2,000</option>
    <option>3,000</option>
    <option>5,000</option>
    <option>10,000</option>
    <option>20,000</option>
    </select>

    <select name="choose_print">
    <option>Choose Print Option</option>
    <option>1 Colour</option>
    <option>2 Colours</option>
    <option>3 Colours</option>
    <option>Photographic</option>
    </select>

    <input type="text" name="total" />

    </form>

    </body>
    </html>


    At the moment I only tried to set it so that when you selected 'choose_quantities' it would pull the info from the variable 3coloursmall. I thought if I could get that to work I could expand on it to take all 3 options and give the result. Am I on the right track at all?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Get the form working without javascript first, by using a server-side script to calculate and proces what you need.

    After you've done that, then is the right time to incorporate javascript to improve the user experience.

    If you try to use javascript for it too early, further development can become more tricky than if you develop the form beforehand.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •