Okay, so Javascript is painfully new to me. I have a series of brands, A, B, C and types of products X and Y, and then models corresponding to the permutations thereof.

So if I switch a select from brand A to B, the onchange="updateform()" called in the select to execute the function defined below. I have a jquery script linked in the page header. Only... this doesn't actually do anything. Do I even have the right idea with this approach?

{{ }} statements are from django/google templates, I can verify that they at least generate that code properly.

<script type="text/javascript">
  function updateform() {
    var models = '';
    var tasks = '<option value="Replace">Replace</option><option value="Refill">Refill</option>';

    if ($(#brand).val() == "HP") {
      if ($(#type).val() == "Ink Cartridge") {
        {% for model in HPInk %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
      else {
        tasks = '<option value="Replace">Replace</option>'
        {% for model in HPLaser %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
    }
    else if ($(#brand).val() == "Canon") {
      if ($(#type).val() == "Ink Cartridge") {
        {% for model in CanonInk %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
      else {
        tasks = '<option value="Replace">Replace</option>'
        {% for model in CanonLaser %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
    }
    else if ($(#brand).val() == "Brother") {
      if ($(#type).val() == "Ink Cartridge") {
        {% for model in BrotherInk  %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
      else {
        tasks = '<option value="Replace">Replace</option>'
        {% for model in BrotherLaser %}
        models += '<option value="{{model}}">{{model}}</option>';
        {% endfor %}
      }
    }
   /*.
     .
     .
   */
  }
</script>
  • Can you post the related HTML codes as well? o.k.w about 7 years ago

1 answer

3
points
This was chosen as the best answer

Do you know if updateform() is being called? In general, this is what your HTML and JavaScript should look like:

<form>
  <select onchange="updateform()">
    <option value="1">Brand A</option>
    <option value="2">Brand B</option>
  </select>
</form>

<script type="text/javascript">
function updateform()
{
  alert("updateform() called!");
}
</script>

Looking at your code, I see #brand and #type. These are actually supposed to be strings, so surround them with quotes.

Lastly, you should use a debugger to help identify errors. Debuggers will tell you exactly where errors are occurring, increasing your productivity by an order of magnitude. I highly recommend the Firebug extension for Firefox.

Answered about 7 years ago by Geoffrey Lee
  • Yeah, the call was fine. It was definitely forgetting quotes. Still trying to separate normal JS and jquery in my brain. Thank you! meunierd about 7 years ago