Announcement

Collapse
No announcement yet.

Javascript Help >getElementByID

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Javascript Help >getElementByID

    I don't know JavaScript, so I just hack at existing things and use this elsewhere on my site. I want to know if it is possible to modify the following code to handle multiple id's.


    Code:
    function selFreightCheck(nameSelect)
    {
    console.log(nameSelect);
    if(nameSelect){
    selOptionValue = document.getElementById("selFreight1").value;
    if(selOptionValue == nameSelect.value){
    document.getElementById("isfreight").style.display = "block";
    }
    else{
    document.getElementById("isfreight").style.display = "none";
    }
    }
    else{
    document.getElementById("isfreight").style.display = "none";
    }
    }
    so this line

    Code:
    selOptionValue = document.getElementById("selFreight").value;

    I want to actually check selFreight1 thru selFreight8.

    It seems you can't use a wildcard i.e.selFreight* and my efforts with switch and else if got mired in muck. (I tried getElementByName but that went no where and getElementByClass does not seem to be universally supported).

    Just a simple bit to check the Shipping Methods and see if it is one of the 4 freight methods. By way of explanation I couldn't set ID's from the 3rd party shipping solution so I use

    Code:
    <mvt:if expr="'Common' CIN l.settings:method:name">id="selFreight&mvte:method:code;"</mvt:if>
    to insert a unique ID in the options based on it containing the word 'Common' (for Common Carrier which is part of the method name) and the javascript allows me to show/hide a div when they select one of these methods. Works perfect with one.

    The most methods returned would be 8.

    Thanks for any help. A complex solution will make my head explode so your patience appreciated.
    Last edited by habreu; 09-17-15, 04:39 PM.

    #2
    Re: Javascript Help &gt;getElementByID

    If your fields have the same name you can iterate thru them like this:
    <head>
    <script>
    function getit() {
    var x = "";
    var num_flds = 3;
    for (i = 0; i < num_flds; i++) {
    x = document.getElementsByName("fld")[i].value;
    alert(x);
    }
    alert("done");
    }
    </script>
    </head>
    <body>
    <input type="text" id="fld1" name=fld value="1" />
    <input type="text" id="fld2" name=fld value="2" />
    <input type="text" id="fld3" name=fld value="3" />
    <script>
    getit();
    </script>
    </body>
    Last edited by wajake41; 09-17-15, 10:33 PM.
    Larry
    Luce Kanun Web Design
    www.facebook.com/wajake41
    www.plus.google.com/116415026668025242914/posts?hl=en


    Comment


      #3
      Re: Javascript Help &gt;getElementByID

      I've added input type=checkbox to this, retrieved the checkbox ID if checked, and corrected an error in the first example:

      <html>
      <head>
      <script>
      function getit() {
      var x = "";
      var num_flds = 3;
      for (i = 0; i < num_flds; i++) {
      x = document.getElementsByName("fld")[i].id;
      alert("input id="+x);
      x = document.getElementsByName("box")[i].checked;
      alert("box is checked? "+x);
      if (x) {
      x = document.getElementsByName("box")[i].id;
      alert("box id is "+x);
      }
      }
      alert("done");
      }
      </script>
      </head>
      <body>
      <input type="text" id="fld1" name=fld value="1" />
      <input type="text" id="fld2" name=fld value="2" />
      <input type="text" id="fld3" name=fld value="3" />
      <br>
      <input type="checkbox" id="box1" name="box" />
      <input type="checkbox" id="box2" name="box" checked />
      <input type="checkbox" id="box3" name="box" />
      <script>
      getit();
      </script>
      </body>
      </head>
      </html>
      Last edited by wajake41; 09-17-15, 10:58 PM.
      Larry
      Luce Kanun Web Design
      www.facebook.com/wajake41
      www.plus.google.com/116415026668025242914/posts?hl=en


      Comment


        #4
        Re: Javascript Help &gt;getElementByID

        I'll play with the code a bit right now. Thanks very much for your answer.

        Comment


          #5
          Re: Javascript Help &gt;getElementByID

          What HTML tag are you attempting to interrogate? <select, <input checkbox, radio, ?
          Post a snippet of the HTML you are onterogating from view source. That will give a better idea of what you are attempting.
          Larry
          Luce Kanun Web Design
          www.facebook.com/wajake41
          www.plus.google.com/116415026668025242914/posts?hl=en


          Comment


            #6
            Re: Javascript Help &gt;getElementByID

            Originally posted by wajake41 View Post
            What HTML tag are you attempting to interrogate? <select, <input checkbox, radio, ?
            Post a snippet of the HTML you are onterogating from view source. That will give a better idea of what you are attempting.

            Option. I have this on my OSEL page

            Code:
                <select name="ShippingMethod" onchange="selFreightCheck(this);"  style="width: 360px; border: 1px solid #666">
                <option selected="selected">Select Shipping Method</option>
                  <mvt:if expr="ISNULL l.settings:shippingmethods">
                    <option value="">Unable to Calculate Shipping Costs</option>
                    <mvt:else>
                    <mvt:foreach array="shippingmethods" iterator="method">
                      <mvt:if expr="NOT ISNULL l.settings:method:price">
                        <option <mvt:if expr="'Common' CIN l.settings:method:name">id="selFreight&mvte:method:code;"</mvt:if> value="&mvte:method:module;:&mvte:method:code;" colorme="&mvt:method:name">&mvt:method:name; (&mvt:method:formatted_price;)</option>
                        <mvt:else>
            
                        <option value="&mvte:method:module;:&mvte:method:code;">&mvt:method:name;</option>
                      </mvt:if>
                    </mvt:foreach>
                  </mvt:if>
                </select>
            and I have this hidden div in Addendum (which gets inserted in OSEL).

            Code:
            <div class="is-residential" id="isfreight" style="display: none">
            <fieldset>
            <legend>For Freight Orders Only (Priority or Economy)</legend> 
            <center><nobr><input type="checkbox" type="text" name="question2" value="Shipping:Residential" /> <label>Check if this order is being shipped to a residential address.</label></nobr></center>
            </fieldset>
            </div>
            The code I am using is

            Code:
            function selFreightCheck(nameSelect)
            {
            console.log(nameSelect);
            if(nameSelect){
            selOptionValue = document.getElementById("selFreight").value;
            if(selOptionValue == nameSelect.value){
            document.getElementById("isfreight").style.display = "block";
            }
            else{
            document.getElementById("isfreight").style.display = "none";
            }
            }
            else{
            document.getElementById("isfreight").style.display = "none";
            }
            }
            works perfect for a single ID selFreight



            I need selFreight1 thru 8. I tried just duplicating the code block beginning with if(nameSelect) but didn't work - I imagine you have to 'flush' or reset it somehow.

            Thanks very much.
            Last edited by habreu; 09-18-15, 07:51 AM.

            Comment


              #7
              Re: Javascript Help &gt;getElementByID

              If you just need to get the value of the shipping method selected, try this:
              <html>
              <head>
              <script>
              function selFreightCheck() {
              e = document.getElementsByName("ShippingMethod")[0];
              var val = e.options[e.selectedIndex].value;
              alert(val);
              alert("done");
              }
              </script>
              </head>
              <body>
              <select name="ShippingMethod" onchange="selFreightCheck();" style="width: 360px; border: 1px solid #666">
              <option selected="selected">Select Shipping Method</option>
              <option value="BROK_UPS_CUSTOM:99" colorme="UPS Shipping">UPS Shipping ($11.50)</option>
              <option value="freight1" colorme="UPS Shipping">Freight 1 ($22.50)</option>
              <option value="freight2" colorme="UPS Shipping">Freight 2 ($35.50)</option>
              </select>
              </body>
              </head>
              </html>
              Last edited by wajake41; 09-18-15, 08:59 AM.
              Larry
              Luce Kanun Web Design
              www.facebook.com/wajake41
              www.plus.google.com/116415026668025242914/posts?hl=en


              Comment


                #8
                Re: Javascript Help &gt;getElementByID

                Actually I need to add a checkbox for residential when they choose one of the freight options, as freight to residential costs us an extra $75. I had the div visible (not hidden) with instructions that say specifically it is only for Economy or Priority Freight orders, yet people shipping Ground still pick it and I have to issue refunds. I thought showing the checkbox only when they pick a freight shipping method would fix that.

                Comment


                  #9
                  Re: Javascript Help &gt;getElementByID

                  Maybe on page submission <form onsubmit="edit_residential()" you could interogate the freight type selected and uncheck the residential box if it doesn't apply?
                  Also maybe use a radio button for residential Yes or No instead of a checkbox so that the customer can be held responsible for choosing one? i.e. Force them to choose either Yes or No.
                  Last edited by wajake41; 09-18-15, 08:13 AM.
                  Larry
                  Luce Kanun Web Design
                  www.facebook.com/wajake41
                  www.plus.google.com/116415026668025242914/posts?hl=en


                  Comment


                    #10
                    Re: Javascript Help &gt;getElementByID

                    If I can't sort this out I might use the option buttons as you suggest. I'll keep tinkering with it a bit longer.

                    Thanks for taking the time to respond.

                    Comment


                      #11
                      Re: Javascript Help &gt;getElementByID

                      I've added the JS for the radio button in case you want to try that. One concern about using the onChange on the <select is that if the customer changes their mind after selecting a freight method that requires the residential indicator, if they then select a different shipping method that doesn't require the residential indicator, your code will have to clear that checkbox if it was selected.
                      Usually I find using the onSubmit form approach simpler when editing a form's input
                      Here is some code that includes the radio button JS that clears the residential selection when it isn't needed:
                      <html>
                      <head>
                      <script>
                      function selFreightCheck() {
                      e = document.getElementsByName("ShippingMethod")[0];
                      var val = e.options[e.selectedIndex].value;
                      var res_no = document.getElementsByName("res")[0].checked;
                      var res_yes = document.getElementsByName("res")[1].checked;
                      if (val == "freight1" || val == "freight2") {
                      if (!res_no && !res_yes) {
                      alert("Please indicate destination.");
                      return false;
                      }
                      }
                      if(val == "BROK_UPS_CUSTOM:99") {
                      document.getElementsByName("res")[0].checked=false;
                      document.getElementsByName("res")[1].checked=false;
                      }
                      alert("done");
                      }
                      </script>
                      </head>
                      <body>
                      <select name="ShippingMethod" onchange="selFreightCheck();" style="width: 360px; border: 1px solid #666">
                      <option value="" selected="selected">Select Shipping Method</option>
                      <option value="BROK_UPS_CUSTOM:99" colorme="UPS Shipping">UPS Shipping ($11.50)</option>
                      <option value="freight1" colorme="UPS Shipping">Freight 1 ($22.50)</option>
                      <option value="freight2" colorme="UPS Shipping">Freight 2 ($35.50)</option>
                      </select>
                      <br>
                      <input type="radio" name="res" value="no" /> No
                      <input type="radio" name="res" value="Yes" /> Yes
                      </body>
                      </head>
                      </html>
                      Last edited by wajake41; 09-18-15, 05:46 PM.
                      Larry
                      Luce Kanun Web Design
                      www.facebook.com/wajake41
                      www.plus.google.com/116415026668025242914/posts?hl=en


                      Comment


                        #12
                        Re: Javascript Help &gt;getElementByID

                        One more suggestion then I'll butt out. This uses an onSubmit on the <form:
                        <html>
                        <head>
                        <script>
                        function edit_form() {
                        e = document.getElementsByName("ShippingMethod")[0];
                        var val = e.options[e.selectedIndex].value;
                        if (val == "") {
                        alert("Please select a shipping method.");
                        return false;
                        }
                        var res_no = document.getElementsByName("res")[0].checked;
                        var res_yes = document.getElementsByName("res")[1].checked;
                        // if shipping by freight, require residential delivery answer
                        if (val == "freight1" || val == "freight2") {
                        if (!res_no && !res_yes) {
                        alert("Please indicate if residential delivery.");
                        return false;
                        }
                        } else { // remove residential delivery input
                        document.getElementsByName("res")[0].checked=false;
                        document.getElementsByName("res")[1].checked=false;
                        }
                        alert("edits OK");
                        // for testing return false
                        return false;
                        }
                        </script>
                        </head>
                        <body>
                        <form action="" onSubmit="return edit_form();">
                        Shipping:
                        <select name="ShippingMethod" style="width: 360px; border: 1px solid #666">
                        <option value="" selected="selected">Select Shipping Method</option>
                        <option value="BROK_UPS_CUSTOM:99" colorme="UPS Shipping">UPS Shipping ($11.50)</option>
                        <option value="freight1" colorme="UPS Shipping">Freight 1 ($22.50)</option>
                        <option value="freight2" colorme="UPS Shipping">Freight 2 ($35.50)</option>
                        </select>
                        <br>
                        Residential Delivery?
                        <input type="radio" name="res" value="no" /> No
                        <input type="radio" name="res" value="Yes" /> Yes
                        <br>
                        <input type="submit" />
                        </form>
                        </body>
                        </head>
                        </html>

                        Good luck with finding a satisfactory solution,
                        Cheers, Larry
                        Last edited by wajake41; 09-19-15, 08:00 AM.
                        Larry
                        Luce Kanun Web Design
                        www.facebook.com/wajake41
                        www.plus.google.com/116415026668025242914/posts?hl=en


                        Comment


                          #13
                          Re: Javascript Help &gt;getElementByID

                          @larry. Thanks very much for all your input. I'll revisit this today. Much appreciated.

                          Comment


                            #14
                            Re: Javascript Help &gt;getElementByID

                            Store is running smoothly, time on my hands so I've added an edit for Payment Method:
                            <html>
                            <head>
                            <script>
                            function edit_form() {
                            e = document.getElementsByName("ShippingMethod")[0];
                            var val = e.options[e.selectedIndex].value;
                            if (val == "") {
                            alert("Please select a shipping method.");
                            return false;
                            }
                            // determine how many "res" elements exist
                            var num_elements = document.getElementsByName("res").length;
                            // alert(num_elements);
                            var res_checked = false;
                            for(i=0; i < num_elements; i++) {
                            res_checked = document.getElementsByName("res")[i].checked;
                            if (res_checked) {
                            break;
                            }
                            }
                            // if shipping by carrier, require residential delivery answer
                            if (val == "freight1" || val == "freight2") {
                            if (!res_checked) {
                            alert("Please indicate if residential delivery.");
                            return false;
                            }
                            } else { // remove residential delivery input
                            for(i=0; i < num_elements; i++) {
                            document.getElementsByName("res")[i].checked=false;
                            }
                            }
                            num_elements = document.getElementsByName("PaymentMethod").length ;
                            var method_checked = false;
                            for(i=0; i < num_elements; i++) {
                            method_checked = document.getElementsByName("PaymentMethod")[i].checked;
                            if (method_checked) {
                            break;
                            }
                            }
                            if (!method_checked) {
                            alert("Please select a method of payment");
                            return false;
                            }
                            alert("edits OK");
                            // for testing return false
                            return false;
                            }
                            </script>
                            </head>
                            <body>
                            <form action="" onSubmit="return edit_form();">
                            Shipping:
                            <select name="ShippingMethod" style="width: 360px; border: 1px solid #666">
                            <option value="" selected="selected">Select Shipping Method</option>
                            <option value="BROK_UPS_CUSTOM:99" colorme="UPS Shipping">UPS Shipping ($11.50)</option>
                            <option value="freight1" colorme="UPS Shipping">Freight 1 ($22.50)</option>
                            <option value="freight2" colorme="UPS Shipping">Freight 2 ($35.50)</option>
                            </select>
                            <br>
                            Residential Delivery?
                            <input type="radio" name="res" value="no" /> No
                            <input type="radio" name="res" value="Yes" /> Yes
                            <br>
                            Pay With:
                            <input type="radio" name="PaymentMethod" value="paypalpro:AMEX"/> <b>American Express </b> &nbsp;&nbsp;&nbsp;
                            <input type="radio" name="PaymentMethod" value="paypalpro:DISC"/> <b>Discover </b> &nbsp;&nbsp;&nbsp;
                            <input type="radio" name="PaymentMethod" value="paypalpro:MCRD"/> <b>MasterCard </b> &nbsp;&nbsp;&nbsp;
                            <input type="radio" name="PaymentMethod" value="paypalpro:VISA"/> <b>Visa </b> &nbsp;&nbsp;&nbsp;
                            <input type="radio" name="PaymentMethod" value="paypalpro:PPAL_OSEL"/> <b>PayPal </b> &nbsp;&nbsp;&nbsp;
                            <br>
                            <input type="submit" />
                            </form>
                            </body>
                            </head>
                            </html>

                            Cheers, Larry
                            Last edited by wajake41; 09-22-15, 07:37 AM.
                            Larry
                            Luce Kanun Web Design
                            www.facebook.com/wajake41
                            www.plus.google.com/116415026668025242914/posts?hl=en


                            Comment


                              #15
                              Re: Javascript Help &gt;getElementByID

                              Hi Larry. Glad things are running smoothly on your store - and thanks for all the input. A little help from Reddit to fix some code I was trying and I got a solution that seems to work fine. https://www.reddit.com/r/learnjavasc...tch_statement/

                              I really appreciate your responses.

                              Comment

                              Working...
                              X