Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Php, Mysql, Javascript form - need opinions

    I am currently in the process of creating a online form which would be used for quoting construction material. I started with the concept that I need to make the form as user friendly as possible, due to the fact that not all construction workers are computer savvy. However, I needed to make sure to gather enough information on each product so that the estimator would be able to quote without any further communication. With this in mind I came across a content dependent drop down list created with Javascript, Php, and Mysql. Each line item consist of 10 drop down menus, all dependent on one another. Also, I found a Javascript snipplet that allow the end user to add another line item as needed to the quote form, which saved spaced on the form. This Javascript basically just duplicated the html and auto increased each form element name by #1, therefore keeping the form fields uniquely identified. The process, I planned on achieving is to gather all content from the online form and send it via email using php to the sales team, as well as stick the content into another Mysql database for further use. Ok my concept was a great idea and works fairly good, however I didn't realize upon developing this form using only one mysql database with three basic fields (id, selection_name, matched_id) would be as huge as it is with the different variances on each product line. With that in mind a lot of the same select options are exactly the same on each line, but due the fact that we are data dependent on each item, each option requires its own entry in the database.

    Just to give you an idea of what I am talking about. All species, Pine, Oak, Fir, and so on are available in a variety of sizes ranging from 1/2" wide to 24" wide, as well as 1/2 thick to 24" thick, as well as 8' to 40' length, as well as qty 1 to qty 250. Not to mention other options available such as treat, non-treated. If treated, than type of treatment. Instead of duplicated the sizes for Pine and Fir, I would rather if first drop down menu = Pine or Fir than sizes available = the same entries in the database.

    Does anyone else out there have a better idea of how to create a dependent drop down menu, without having to duplicate the same entries names, providing they will have different matched_id's. I thought about maybe using some sort of "if than" statement to avoid duplication of the same entry names. The purpose of the dependent drop down menus is to avoid the end user from not entering all necessary information per line item. Any ideas would be greatly appreciated.

    Also, if anyone has a better idea and has appropriate (Php, Mysql, and Javascript) knowledge is interested in assisting me with this project I am willing to pay you for your time.

    Thanks,
    Jeremy

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    maybe I am misunderstanding, but are you saying that there is a column for each dropdown option? Like length:8, length:9, length:10, etc, up to 40?

    because if there is it would make more sense for each column to be the subject of the dropdown (one for species, one for width, one for length, etc) and for the dropdowns to populate those fields depending on user selection.

    If you're saying that that's what you're doing already, sorry - I don't get your question. Maybe posting your code for the dropdowns will clarify (or maybe somebody else knows exactly what you're talking about)

  • #3
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No I have three columns total: id, selection_name, matched_id

    example of items in database
    1, Pine, 0
    2, Oak, 0
    3, Fir, 0

    all data with matched_id=0 populates the first drop down menu, lets say you select "Pine"

    4, Treated, 1
    5, Non-Treated, 1
    6, Saltwater treatment, 4
    7, Underground treatment, 4

    due to the fact that you selected Pine on the first dropdown menu your next drop down selection would the "Treated or Non-Treated" because the matched_id=1
    and so on..

    To see what I have so for visit the following and select: Pine --> Treated --> Saltwater --> Rough --> 2 in. WIDTH --> 1/4 in. HEIGHT --> 8 ft. LENGTH --> qty 1

    Jeremy

    Thanks,
    Jeremy

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I don't know how much more complicated it gets, but it seems to me that populating your selects from the database via ajax call is unneccesarily complicated and leads to page jumpiness. I did the first three just by coding the values into the page, I wonder if you can't do them all (and I still have no idea if this answers your question, but it does seem to simplify things a little)...

    Code:
      <body>
    <select id="wood" onchange="fillOne(this.value)">
    <option>select one</option>
    <option value="pine">pine</option>
    <option value="fir">fir</option>
    <option value="oak">oak</option>
    <option  value="cypress">cypress</option>
    <option value="piling">piling</option>
    <select>
    
    <select id="treat" onchange="fillTwo(this.value)">
    <option>----</option>
    <select>
    
    <select id="trtype" onchange="fillThree(this.value)">
    <option>----</option>
    <select>
      <script> 
    function fillOne(val){
    var treats={
    "pine":["treated","non-treated"],
    "fir":["treated","non-treated"],
    "oak":["rough","smooth"],
    "cypress":["rough","smooth"],
    "piling":["6-8 inch butt","8-12 inch butt","12 inch butt class B"]
    }
    var thesel =document.getElementById("treat");
    var thearr = treats[val];
    buildSel(thesel,thearr);
    
    }
    
    function fillTwo(val){
    var types={
    "treated":["in ground 80 pcf","saltwater 2.5 pcf"],
    "non-treated":["rough","smooth"],
    "smooth":["S1S","S2S","S4S"],
    "rough":["S1S","S2S","S4S"],
    "6-8 inch butt":["length 20","length 25","length 30"],
    "8-12 inch butt":["length 20","length 25","length 30","length 40"],
    "12 inch butt class B":["length 20","length 25","length 30","length 35","length 40","length 45","length 50","length 55"]
    }
    var thesel =document.getElementById("trtype");
    var thearr = types[val];
    buildSel(thesel,thearr);
    }
    
    function fillThree(val){
    alert(val + " selected")
    }
    
    function buildSel(thesel, thearr){
    thesel.options[0].text="select one";
    thesel.options.length=1;
    thearr.forEach(function (val, i, arr) {
    thesel.options[i+1]=new Option(val,val);
    });
    }
    
     </script>
     </body>
    Last edited by xelawho; 03-18-2014 at 09:10 PM.

  • #5
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks xelawho for your quick response. I will try and input all my data into this format and see how it works out I will let you know.

  • #6
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho,

    In the situation as such: Piling --> "6-8 in. Butt" are available in length 20 ft.,length 25 ft., length 30ft. and are treated differently then Piling --> 12 inch Butt class B but are available in some of the same lengths, therefore under the following code how to I distinguish the difference in selection available?
    This code is location under the following function:
    function fillThree(val){
    var selection_4={
    "length 20 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf"],
    "length 25 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf"],
    "length 30 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf"],
    "length 40 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf"],
    "length 20 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf","Creosote #8","Creosote #10","Creosote #12","Creosote #16 - Saltwater"],
    "length 25 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf","Creosote #8","Creosote #10","Creosote #12","Creosote #16 - Saltwater"],
    "length 30 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf","Creosote #8","Creosote #10","Creosote #12","Creosote #16 - Saltwater"],
    "length 35 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf","Creosote #8","Creosote #10","Creosote #12","Creosote #16 - Saltwater"],
    "length 40 ft.":["In Ground .80 pcf","Saltwater 2.5 pcf","Creosote #8","Creosote #10","Creosote #12","Creosote #16 - Saltwater"]

    The first four lines of code refer to the "6-8 inch Butt" & "8-12 inch Butt" and the last five lines of code refer to "12 inch Butt class B"
    This code is location under the following function:
    function fillTwo(val){
    var selection_3={

    Thanks,
    Jeremy

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    well, yes - in that case it starts to get complicated. You could do something like this, which avoids the repetition of the code I posted above and seems to me to be maintainable (I only filled in the data for the last level for "piling")...
    Code:
      <body>
    <select class = "chooser" id="sel1">
    <option>select one</option>
    <option value="pine">pine</option>
    <option value="fir">fir</option>
    <option value="oak">oak</option>
    <option  value="cypress">cypress</option>
    <option value="piling">piling</option>
    <select>
    
    <select class = "chooser" id="sel2">
    <option>----</option>
    <select>
    
    <select class = "chooser" id="sel3">
    <option>----</option>
    <select>
    
    <select class = "chooser" id="sel4">
    <option>----</option>
    <select>
      <script> 
    (function (){  
    
    var sels=document.getElementsByClassName("chooser");
    
    for (var i = 0; i < sels.length; i++) {
    sels[i].onchange=changer;
    }
    
    var theobj = {
        "pine": {
            "treated": {
                "in ground 80 pcf": {},
                "saltwater 2.5 pcf": {}
                },
            "non-treated": {
                        "rough": {},
                        "smooth": {}
                    }
    			},	
        "fir": {
             "treated": {
                "in ground 80 pcf": {},
                "saltwater 2.5 pcf": {}
                            },
             "non-treated": {
    			"rough": {},
                "smooth": {}
                                }
    			},
         "oak": {
              "rough": {
              "S1S": {},
              "S2S": {},
              "S4S": {}
              },
              "smooth": {
              "S1S": {},
              "S2S": {},
              "S4S": {}
    			}
    			},
          "cypress":{ 
    		"smooth": {
                       "S1S": {},
                       "S2S": {},
                       "S4S": {}
    				   }
                       },
           "piling": {
                       "6-8 inch butt": {
                             "length 20": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
                             "length 25": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
                             "length 30": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
    						 "length 40": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}}				
                                        },
                       "8-12 inch butt": {
                             "length 20": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
                             "length 25": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
                             "length 30": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}},
    						 "length 40": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{}}
                                        },
                       "12 inch butt class B": {
                               "length 20": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{},
    										"Creosote #8":{},
    										"Creosote #10":{},
    										"Creosote #12":{},
    										"Creosote #16 - Saltwater":{}},
                               "length 25": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{},
    										"Creosote #8":{},
    										"Creosote #10":{},
    										"Creosote #12":{},
    										"Creosote #16 - Saltwater":{}},
                               "length 30": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{},
    										"Creosote #8":{},
    										"Creosote #10":{},
    										"Creosote #12":{},
    										"Creosote #16 - Saltwater":{}},
                               "length 35": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{},
    										"Creosote #8":{},
    										"Creosote #10":{},
    										"Creosote #12":{},
    										"Creosote #16 - Saltwater":{}},
                               "length 40": {"In Ground .80 pcf":{},
    										"Saltwater 2.5 pcf":{},
    										"Creosote #8":{},
    										"Creosote #10":{},
    										"Creosote #12":{},
    										"Creosote #16 - Saltwater":{}}
                                        }
                                    }
    		}
    		
    		
    		
    function changer(){
    var sel=this;
    var nextsel=Number(sel.id.replace("sel",""));
    if (sels[nextsel]){
    var thesel=sels[nextsel];
    
    var thearr = getKeys(sel.id);
    buildSel(thesel,thearr);
    }
    }
    
    
    function buildSel(thesel, thearr){
    thesel.options[0].text="select one";
    thesel.options.length=1;
    thearr.forEach(function (val, i, arr) {
    thesel.options[i+1]=new Option(val,val);
    });
    }
    
    function getKeys(id){
    switch (id){
    case "sel1":
    return Object.keys(theobj[getVal("sel1")]);
    break;
    case "sel2":
    return Object.keys(theobj[getVal("sel1")][getVal("sel2")]);
    break;
    case "sel3":
    return Object.keys(theobj[getVal("sel1")][getVal("sel2")][getVal("sel3")]);
    break;
    }
    
    } 
    
    function getVal(id){
    return document.getElementById(id).value;
    }
    
    })();
     </script>
     </body>
    Last edited by xelawho; 03-19-2014 at 07:12 PM.

  • #8
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Xelawho,

    Thanks for your response. I wasn't able to work on the project since then, however I will spend a few hours on it today and hopefully move forward. Would you mind sending me your email address, I would like to send you something.

    Thanks,
    Jeremy
    jeremy@ndanet.com

  • #9
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Xelawho,

    I am not quite finished with the options available for the first class "Pine" however, I am thinking load time may become an issue. The size currently of the file is over 13 megs, not to mention how many more options are available. What is your thought on the matter. Take a look at the code so for: http://72.34.48.97/~tswtold/quote/test2.php

    Jeremy

  • #10
    New Coder
    Join Date
    Jul 2003
    Location
    Louisiana
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Xelawho,

    Being many of the WIDTH, HEIGHT, and LENGTH remain the same instead of repeating the options for each selection, wouldn't you think it would be easier to create individual databases for each and only load the sizes once per selection. In order words instead of repeated all the "lengths" available in the code for every height available. Why not just request if Sel1 = Pine, Sel2 = Treated, Sel3 = In Ground, Sel4= Rough, Sel5 (WIDTH) NOT NULL, Sel6 (HEIGHT) NOT NULL, then next drop down selection = LENGTH mysql database. This would eliminate a tremendous amount of repetitious code. I am just brain storming but don't know if it is practical. However, if this would work then I can do the same for width and height.

    I have another question; with multiple drop down menus as we have can you make certain menus active dependent on selection? If so, viewing each drop down menu as if it consist in a column I can allocate each column for a selection.

    Example
    Column 1 or #1 drop down menu = Species (always needing a selection)
    Column 2 or #2 drop down menu = (Treatment or NON-Treated)
    Column 3 or #3 drop down menu = (Type of Treatement)
    Column 4 or #4 drop down menu = (Rough or Smooth)

    Well if Column 2 Non-Treated was selected then column 3 would remain "---" and Column 4 would require "Select One"

    Don't think this would solve my problem, I am just wondering if JavaScript is capable of doing such a thing and how difficult that would be to achieve.

    Jeremy

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    The problem (as you stated in your original post) is that it's just such a massive amount of data. There does seem to be a lot of repetition, but unless it's uniformly repeating it can be tricky taking advantage of that. Do you have all the data somewhere, like in a spreadsheet, that we can take a look at?


  •  

    Posting Permissions

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