SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    On select of option from drop down it makes another input are dissapear

    Basically all I want to happen is that when a certain value is selected in a drop down it makes the input area next to it dissapear, otherwise the input area stays visible as my code below shows, but doesnt work:

    Code:
    <SCRIPT>
    function yes() {
    MMDiv.style.visibility='hidden';
    mainform.MakeModel.focus();
    }</SCRIPT>
    <SCRIPT>
    function no() {
    MMDiv.style.visibility='visible';
    mainform.MakeModel.focus();
    }</SCRIPT>
    
    <select name="operator[]">
        <option value="">Choose Operator</option>
        <option value="=" onchange="yes()">empty</option>
        <option value="=">equals (=)</option
    </select>
    
    <div id="MMDiv" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>
    So the keyword area is always visible to use, unless the user selects 'empty' from the drop down in front of it.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    An option cannot trigger an onchange event. The onchange event must be associated with the select element instead.

    Remove the onchange event from the option, and add a new onchange event to the select element, from where we will choose what to do.
    I've also updated the value for the empty option to be empty, so that the keywordHandler can use the value of the selected option to decide what to do.

    HTML Code:
    <select name="operator[]" onchange="keywordHandler()">
        <option value="">Choose Operator</option>
        <option value="">empty</option>
        <option value="=">equals (=)</option>
    </select>
    Now create the keywordHandler() function, which looks at the selected value and decides which function to run.

    Code javascript:
    function keywordHandler(el) {
        if (el.value === '=') {
            no();
        } else {
            yes();
        }
    }

    So that now works.

    There are some refinements that could be made though. What do the no() or yes() functions do? Can you tell without looking at the functions themself? The functions need to have more descriptive names, such as showKeyword and hideKeyword.

    Also - now that we have the keywordHandler function, we can move common behaviour out of the showKeyword and hideKeyword functions so that less duplication occurs, and that each function does one main thing.

    Code:
    function noshow() {
        MMDiv.style.visibility='visible';
        mainform.MakeModel.focus();
    }
    function yeshide() {
        MMDiv.style.visibility='hidden';
        mainform.MakeModel.focus();
    }
    function keywordHandler(el) {
        if (el.value === '=') {
            noshow();
        } else {
            yeshide();
        }
        mainform.MakeModel.focus();
    }
    We can also use a more expressive manner in which to access the element with the MMDiv identifier.
    We could also move the element reference out of the function, and pass it in as a function property. So now that the functions can handle hiding and showing different elements, their name can be made more generic now.

    Also, instead of using "mainform.MakeModel", we really should use the more expressive form of that instead.

    Code:
    function show(el) {
        MMDivel.style.visibility='visible';
    }
    function hide(el) {
        MMDivel.style.visibility='hidden';
    }
    function keywordHandler(el) {
        var form = mainform,
            keyword = document.getElementById('MMDiv');
        if (el.value === '=') {
            show(keyword);
        } else {
            hide(keyword);
        }
        mainform.elements.MakeModel.focus();
    }
    A final refinement is to remove the inline event attribute from your HTML code, and move it in to your scripting where it belongs instead.
    We can easily do that by removing the HTML attribute from your HTML code, and assign the onchange event from your script instead. The most effective way to do that is to move your scripting down to the bottom of the body, just before the </body> tag so that you can easily work with page elements as the page is loading.

    Code:
    <body>
        <script>
            ...
        </script>
        <form>
            ...
        </form>
        ...
        <script>
            ...
        </script>
    </body>
    Now we can streamline things even further, by removing from the HTML code the onchange event and applying it from the scripting instead.
    The benefit with that is that the this keyword is then automatically available to the function, so there's no need for handler function to have the function parameter anymore. Instead, the function easily accesses the select element via the this keyword, and can also easily get to the form from the select elements automatic reference that it keeps to the form itself.

    We could also rename MMDiv to something more appropriate, such as keyword.

    The resulting code is this:

    HTML Code:
    <select name="operator[]">
        <option value="">Choose Operator</option>
        <option value="">empty</option>
        <option value="=">equals (=)</option>
    </select>
    
    <div id="keyword" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>
    and at the end of the body, just before the </body> tag is your scripting code:

    Code javascript:
    function show(el) {
        el.style.visibility='visible';
    }
    function hide(el) {
        el.style.visibility='hidden';
    }
    function keywordHandler() {
        var operator = this,
            form = operator.form,
            keyword = document.getElementById('keyword');
     
        if (operator.value === '=') {
            show(keyword);
        } else {
            hide(keyword);
        }
        form.elements.MakeModel.focus();
    }
     
    var form = document.getElementById('mainform');
    form['operator[]'].onchange = keywordHandler;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thank you very much for getting back to me.

    Your code I'm sorry will have to change a little and hopefully you wouldnt mind helping me further.

    Basically the value of empty has to be '=' as its being used in an advanced search page where there are 10 other options for the user to use to get the output they need.

    And the values are being used to generate the select command in php to call the correct data out of the database, but there is another '=' value being used so its not unique.

    Code:
    <select name="field_names[]">
    <option value="">Choose Field</option>
    <option value="ID">Database ID</option>
    <option value="Contract_Number">Contract Number</option>
    <option value="Contract_Status">Contract Status</option>
    <option value="Contract_Start">Contract Date (Original)</option>
    <option value="Contract_End">Contract Date (Current)</option>
    <option value="Contract_Length">Contract Length (Months)</option>
    <option value="Renewal_Date">Renewal Date</option>
    <option value="Site_Name">Site Name</option>
    <option value="Street">Site Address.Street</option>
    <option value="City">Site Address.City</option>
    <option value="Country">Site Address.Country</option>
    <option value="Region">Site Address.State or Provience</option>
    <option value="Postcode">Site Address.Postal Code or Zip</option>
    <option value="Group_Member">Group Member</option>
    <option value="Group_Name">Group Name</option>
    <option value="No_of_Rooms">Room Number</option>
    <option value="Type_of_Establishment">Type of Establishment</option>
    <option value="CSF">Online</option>
    <option value="Food_Safety">Food Check</option>
    <option value="Swimming_Pool_Safety">Pool Check</option>
    <option value="Legionella_Safety">Aqua Check</option>
    <option value="Room_Safety">Room Check</option>
    <option value="Fire_Safety">Fire Check</option>
    <option value="Hurricane">Crisis Check</option>
    <option value="Green">Eco Check</option>
    <option value="Guest">Safety Check</option>
    <option value="Quality_Safety">Quality Check</option>
    <option value="Supply_Safety">Supply Check</option>
    <option value="Tourcheck">TourCheck</option>
    <option value="No_of_Modules">Number of Modules</option>
    <option value="Currency_of_Invoice">Currency of Invoice</option>
    <option value="Annual_Contract_Value">Annual Value of Contract</option>
    <option value="No_of_audits_per_annum">Number of Audits per Annum</option>
    <option value="No_of_visits_per_annum">Number of Visits per Annum</option>
    <option value="Seasonal_or_Full">Seasonal or Full Year</option>
    <option value="Month_Opens">Month Opens (If Seasonal Only)</option>
    <option value="Month_Closes">Month Closes (If Seasonal Only)</option>
    <option value="Invoicing_Profile">Invoicing Profile</option>
    <option value="contract_File">Copy of Contract</option>
    <option value="date_Created">Created.Date Created</option>
    <option value="date_Modified">Modified.Date Modified</option>
    </select>
    
    <select name="operator[]" onchange="keywordHandler()">
    <option value="">Choose Operator</option>
    <option value="like">contains</option>
    <option value="!=">does not contain</option>
    <option value="=">equals (=)</option>
    <option value="<>">not equal (< >)</option>
    <option value="=">empty</option>
    <option value="!=">not empty</option>
    <option value="<">less than (<)</option>
    <option value="<=">less than or equal (< =)</option>
    <option value=">">greater than (>)</option>
    </select>
    
    <div id="keyword" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>
    There are 10 rows of the above 3 options, they probably wouldnt be used, but I have to allow for 10, as some of the contracts in the database have very specific details.

    What I need to happen is that when the user selects the first option (choose field) they compliment it then with an operator, and the value has to be there whether the keyword part is empty or not, and its unfortunate that empty and equals have the same value.

    Can you see my problem, I'm sorry to be a pain, but would really appreciate your input.

    Just reading through your code again and I noticed that it seems that its using the name of the form, is that correct, as i wasnt using a name on the form before, so I added it below:

    Code:
    <form method="post" action="advanced_Search.php" name="mainform">
    All the code is below for this, and I cant get your current code to work either:

    Code:
    <form method="post" action="advanced_Search.php" name="mainform">
    <!-- 1 -->
      <select name="field_names[]">
        <option value="">Choose Field</option>
        <option value="ID">Database ID</option>
    	<option value="Contract_Number">Contract Number</option>
    	<option value="Contract_Status">Contract Status</option>
    	<option value="Contract_Start">Contract Date (Original)</option>
    	<option value="Contract_End">Contract Date (Current)</option>
    	<option value="Contract_Length">Contract Length (Months)</option>
    	<option value="Renewal_Date">Renewal Date</option>
    	<option value="Site_Name">Site Name</option>
    	<option value="Street">Site Address.Street</option>
    	<option value="City">Site Address.City</option>
    	<option value="Country">Site Address.Country</option>
    	<option value="Region">Site Address.State or Provience</option>
    	<option value="Postcode">Site Address.Postal Code or Zip</option>
    	<option value="Group_Member">Group Member</option>
    	<option value="Group_Name">Group Name</option>
    	<option value="No_of_Rooms">Room Number</option>
    	<option value="Type_of_Establishment">Type of Establishment</option>
    	<option value="CSF">Online</option>
    	<option value="Food_Safety">Food Check</option>
    	<option value="Swimming_Pool_Safety">Pool Check</option>
    	<option value="Legionella_Safety">Aqua Check</option>
    	<option value="Room_Safety">Room Check</option>
    	<option value="Fire_Safety">Fire Check</option>
    	<option value="Hurricane">Crisis Check</option>
    	<option value="Green">Eco Check</option>
    	<option value="Guest">Safety Check</option>
    	<option value="Quality_Safety">Quality Check</option>
    	<option value="Supply_Safety">Supply Check</option>
    	<option value="Tourcheck">TourCheck</option>
    	<option value="No_of_Modules">Number of Modules</option>
    	<option value="Currency_of_Invoice">Currency of Invoice</option>
    	<option value="Annual_Contract_Value">Annual Value of Contract</option>
    	<option value="No_of_audits_per_annum">Number of Audits per Annum</option>
    	<option value="No_of_visits_per_annum">Number of Visits per Annum</option>
    	<option value="Seasonal_or_Full">Seasonal or Full Year</option>
    	<option value="Month_Opens">Month Opens (If Seasonal Only)</option>
    	<option value="Month_Closes">Month Closes (If Seasonal Only)</option>
    	<option value="Invoicing_Profile">Invoicing Profile</option>
    	<option value="contract_File">Copy of Contract</option>
    	<option value="date_Created">Created.Date Created</option>
    	<option value="date_Modified">Modified.Date Modified</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <select name="operator[]">
                 <option value="">Choose Operator</option>
    	<option value="like">contains</option>
                 <option value="!=">does not contain</option>
    	<option value="=">equals (=)</option>
    	<option value="<>">not equal (&#60; &#62;)</option>
    	<option value="1">empty</option>
                 <option value="!=">not empty</option>
    	<option value="<">less than (&#60;)</option>
    	<option value="<=">less than or equal (&#60; =)</option>
    	<option value=">">greater than (&#62;)</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="keyword" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>
    
    <script type="text/javascript">
    function show(el) {
        el.style.visibility='visible';
    }
    function hide(el) {
        el.style.visibility='hidden';
    }
    function keywordHandler() {
        var operator = this,
            form = operator.form,
            keyword = document.getElementById('keyword');
     
        if (operator.value === '1') {
            hide(keyword);
        } else {
            show(keyword);
        }
        form.elements.MakeModel.focus();
    }
     
    var form = document.getElementById('mainform');
    form['operator[]'].onchange = keywordHandler;
    </script>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by multichild View Post
    What I need to happen is that when the user selects the first option (choose field) they compliment it then with an operator, and the value has to be there whether the keyword part is empty or not, and its unfortunate that empty and equals have the same value.

    Can you see my problem, I'm sorry to be a pain, but would really appreciate your input.
    That's fine, we can instead check if it's the third option (0, 1, 2, 3, ...) before showing it.

    Code javascript:
    function keywordHandler() {
        ...
        if (operator.selectedIndex === 3) {
            show(keyword);
        } else {
            hide(keyword);
        }
        ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see...

    But have had to change it to hidden as when they select number 6 its suppposed to dissapear as below:

    Code:
    <script type="text/javascript">
    function show(el) {
        el.style.visibility='visible';
    }
    function hide(el) {
        el.style.visibility='hidden';
    }
    function keywordHandler() {
        var operator = this,
            form = operator.form,
            keyword = document.getElementById('keyword');
     
        if (operator.selectedIndex === 5 ) {
            hide(keyword);
        } else {
            show(keyword);
        }
        form.elements.MakeModel.focus();
    }
     
    var form = document.getElementById('mainform');
    form['operator[]'].onchange = keywordHandler;
    </script>
    But I still dont seem to be able to get it to work, thats the jscript above, and then this is the form, but only one of the 10.

    Code:
    <form method="post" action="advanced_Search.php" name="mainform">
    <!-- 1 -->
      <select name="field_names[]">
        <option value="">Choose Field</option>
        <option value="ID">Database ID</option>
    	<option value="Contract_Number">Contract Number</option>
    	<option value="Contract_Status">Contract Status</option>
    	<option value="Contract_Start">Contract Date (Original)</option>
    	<option value="Contract_End">Contract Date (Current)</option>
    	<option value="Contract_Length">Contract Length (Months)</option>
    	<option value="Renewal_Date">Renewal Date</option>
    	<option value="Site_Name">Site Name</option>
    	<option value="Street">Site Address.Street</option>
    	<option value="City">Site Address.City</option>
    	<option value="Country">Site Address.Country</option>
    	<option value="Region">Site Address.State or Provience</option>
    	<option value="Postcode">Site Address.Postal Code or Zip</option>
    	<option value="Group_Member">Group Member</option>
    	<option value="Group_Name">Group Name</option>
    	<option value="No_of_Rooms">Room Number</option>
    	<option value="Type_of_Establishment">Type of Establishment</option>
    	<option value="CSF">Online</option>
    	<option value="Food_Safety">Food Check</option>
    	<option value="Swimming_Pool_Safety">Pool Check</option>
    	<option value="Legionella_Safety">Aqua Check</option>
    	<option value="Room_Safety">Room Check</option>
    	<option value="Fire_Safety">Fire Check</option>
    	<option value="Hurricane">Crisis Check</option>
    	<option value="Green">Eco Check</option>
    	<option value="Guest">Safety Check</option>
    	<option value="Quality_Safety">Quality Check</option>
    	<option value="Supply_Safety">Supply Check</option>
    	<option value="Tourcheck">TourCheck</option>
    	<option value="No_of_Modules">Number of Modules</option>
    	<option value="Currency_of_Invoice">Currency of Invoice</option>
    	<option value="Annual_Contract_Value">Annual Value of Contract</option>
    	<option value="No_of_audits_per_annum">Number of Audits per Annum</option>
    	<option value="No_of_visits_per_annum">Number of Visits per Annum</option>
    	<option value="Seasonal_or_Full">Seasonal or Full Year</option>
    	<option value="Month_Opens">Month Opens (If Seasonal Only)</option>
    	<option value="Month_Closes">Month Closes (If Seasonal Only)</option>
    	<option value="Invoicing_Profile">Invoicing Profile</option>
    	<option value="contract_File">Copy of Contract</option>
    	<option value="date_Created">Created.Date Created</option>
    	<option value="date_Modified">Modified.Date Modified</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <select name="operator[]">
        <option value="">Choose Operator</option>
    	<option value="like">contains</option>
        <option value="!=">does not contain</option>
    	<option value="=">equals (=)</option>
    	<option value="<>">not equal (< >)</option>
    	<option value="=">empty</option>
        <option value="!=">not empty</option>
    	<option value="<">less than (<)</option>
    	<option value="<=">less than or equal (< =)</option>
    	<option value=">">greater than (>)</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="keyword" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>
    I didnt give the form a name at first, so is that right too:

    Code:
    <form method="post" action="advanced_Search.php" name="mainform">
    <!-- 1 -->
      <select name="field_names[]">
        <option value="">Choose Field</option>
        <option value="ID">Database ID</option>
    	<option value="Contract_Number">Contract Number</option>
    	<option value="Contract_Status">Contract Status</option>
    	<option value="Contract_Start">Contract Date (Original)</option>
    	<option value="Contract_End">Contract Date (Current)</option>
    	<option value="Contract_Length">Contract Length (Months)</option>
    	<option value="Renewal_Date">Renewal Date</option>
    	<option value="Site_Name">Site Name</option>
    	<option value="Street">Site Address.Street</option>
    	<option value="City">Site Address.City</option>
    	<option value="Country">Site Address.Country</option>
    	<option value="Region">Site Address.State or Provience</option>
    	<option value="Postcode">Site Address.Postal Code or Zip</option>
    	<option value="Group_Member">Group Member</option>
    	<option value="Group_Name">Group Name</option>
    	<option value="No_of_Rooms">Room Number</option>
    	<option value="Type_of_Establishment">Type of Establishment</option>
    	<option value="CSF">Online</option>
    	<option value="Food_Safety">Food Check</option>
    	<option value="Swimming_Pool_Safety">Pool Check</option>
    	<option value="Legionella_Safety">Aqua Check</option>
    	<option value="Room_Safety">Room Check</option>
    	<option value="Fire_Safety">Fire Check</option>
    	<option value="Hurricane">Crisis Check</option>
    	<option value="Green">Eco Check</option>
    	<option value="Guest">Safety Check</option>
    	<option value="Quality_Safety">Quality Check</option>
    	<option value="Supply_Safety">Supply Check</option>
    	<option value="Tourcheck">TourCheck</option>
    	<option value="No_of_Modules">Number of Modules</option>
    	<option value="Currency_of_Invoice">Currency of Invoice</option>
    	<option value="Annual_Contract_Value">Annual Value of Contract</option>
    	<option value="No_of_audits_per_annum">Number of Audits per Annum</option>
    	<option value="No_of_visits_per_annum">Number of Visits per Annum</option>
    	<option value="Seasonal_or_Full">Seasonal or Full Year</option>
    	<option value="Month_Opens">Month Opens (If Seasonal Only)</option>
    	<option value="Month_Closes">Month Closes (If Seasonal Only)</option>
    	<option value="Invoicing_Profile">Invoicing Profile</option>
    	<option value="contract_File">Copy of Contract</option>
    	<option value="date_Created">Created.Date Created</option>
    	<option value="date_Modified">Modified.Date Modified</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <select name="operator[]" onchange="keywordHandler()">
        <option value="">Choose Operator</option>
    	<option value="like">contains</option>
        <option value="!=">does not contain</option>
    	<option value="=">equals (=)</option>
    	<option value="<>">not equal (< >)</option>
    	<option value="=">empty</option>
        <option value="!=">not empty</option>
    	<option value="<">less than (<)</option>
    	<option value="<=">less than or equal (< =)</option>
    	<option value=">">greater than (>)</option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="keyword" style="visibility:visible; position:absolute; left:418px; top:-1px;">
      <input type="text" name="keyword[]" />
    </div>

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK yes I have a problem and as expected your code works perfectly, but its because my forms is a complicated 10 row build query array.

    If I take all the other rows away the code above works brilliant, I add the other 9 rows in and I suppose it doesnt know which keyword div to close and I suppose there conflict and so it doesnt work.

    I then thought I would change each rows names and then realised thats its in an array and thats now how its set up.

    So your code works perfectly with one row but not with 10.

    Shame, as its perfect.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE=multichild;5221386]But I still dont seem to be able to get it to work, thats the jscript above, and then this is the form, but only one of the 10.

    Do not use the name attribute on the form element. That's as bad as using the name attribute on an anchor tag.

    Code:
    <a name="targetIdentifier"></a>
    An id attribute should be used with the form instead, with the fields within the form that will be submitted using a name attribute.

    Code javascript:
    <form method="post" action="advanced_Search.php" id="mainform">
    ...

    Quote Originally Posted by multichild View Post
    so is that right too:
    Code:
    <select name="operator[]" onchange="keywordHandler()">
    No, that's not right too. Get that event scripting stuff out of your HTML code.
    You don't mix in CSS styling with your HTML code, so don't mix in scripting or event handling with your HTML code either.

    Here's how to do it right.

    • The form has an identifier, as in the form code further up.
    • The scripting is at the end of the body, just before the </body> tag.
    • Remove the "form.elements.MakeModel.focus();" line as there is currently no MakeModel element to set the focus to.
    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
  •