8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Javascript Help

by solidsoul
7 replies
I'm trying to get the javascript working on my form to hide or show an input depending on the selection of a drop down..

HTML Code:
<label>
What Are You Looking To Finance :<select name="item" required="">
<option value="snowmobile">Snowmobile</option>
<option value="automobile">Car/Truck/Suv</option>
<option value="boat">Boat/Marine</option>
<option value="atv">ATV, Side by Side, Off-Road</option>
<option value="trailer">Recreationa/Trailer/RV</option>
<option value="computer">Electronic/TV/Computer</option>
<option value="other">Other</option>
</select>
</label>

<div id="itemother">
<label>
Please Describe Item :
<input type="text" name="itemother" placeholder="Enter Description and Value" />
</label>
</div>
I'm trying to target the selection name item and hide or show the itemother if selection = the 7th or (other)

Code:
$('select[name=item]').change(function(){
  if ($('select[name=item]').val() == '7'){
    $('#itemother').show();
  }else{
    $('#itemother').hide();
  }
});
is what I was trying to use but it's not working - also have a css setup

HTML Code:
#itemother {
display: none;
}
#javascript
  • Profile picture of the author kilgore
    Two potential issues:
    1. Your syntax shows that you're using jquery, not pure javascript. So make sure that you have included the appropriate jQuery library on your page.
    2. You're looking for a value of "7" when you should be looking for a value of "other".

    Thus, your javascript should be something like:

    Code:
    $('select').change(function(){
  if ($('select[name=item]').val() == 'other'){
    $('#itemother').show();
  }else{
    $('#itemother').hide();
  }
});
    A working example can be found at:

    https://jsfiddle.net/8b58hu4k/#&togetherjs=xKTnLJnTmy
    Signature
    {{ DiscussionBoard.errors[10422825].message }}
  • Profile picture of the author solidsoul
    Ok so I loaded the jquery using the google api in my header - I added your code and it don't work on my site for some reason i'm using wordpress plugin css+javascript to add the java code could this be the issue?
    Signature
    {{ DiscussionBoard.errors[10424027].message }}
    • Profile picture of the author kilgore
      I really don't have much experience with that plugin, but your issue could be caused by a million things. And really at this point, without seeing your site I think you're going to have to figure it out yourself. But here are a couple of things I'd try:

      First, make sure that you're making good use of your Javascript console. If you're not, check out Using the browser console | WickedlySmart and/or Mastering The Developer Tools Console - Treehouse Blog to learn some of the basics on how to use it. Once you're using the console, the first thing to do is to check for any errors. If you've got bad JavaScript somewhere else, it could be preventing this code from running too.

      Second, forget your own code for a second. Check to see if you're able to get any JavaScript to run using that plugin. Try running some code like this using your plugin:

      Code:
      alert("It works!");
      After refreshing, did you get an alert message?

      If not, it's likely that your plugin isn't doing what you think it should. Or maybe you have another JavaScript error that's preventing this code from running (though if your console isn't showing any errors, that shouldn't be the case.) At this point, I'd "View Source" on my page to make sure my code is being written the way it should be by the plugin.

      If you did get an alert message, then perhaps the problem is with JQuery. Remove your original alert and put this there instead:

      Code:
      $(document).ready(function(){alert('jQuery Works!')});
      Did you get another alert message? If so, great. But if not, then for some reason jQuery isn't working. As above, I'd "View Source" on my page to make sure that the plugin is writing my code in the way I want it to. Do I have one and only one call to the jQuery library? Is the jQuery library being loaded before the rest of my code? Are there other libraries that might be conflicting with my code? (For example, Protogype also makes use of the '$' variable.) And so on...

      What I'm trying to show you is how you might approach debugging your problem. At the beginning literally anything could be causing your issue. Your job is to narrow it down logically. Which is why first, I wanted to make sure that there were no other JavaScript issues that could be interfering with your code (check the console!) Second, I wanted to make sure that JavaScript was actually running in your plugin. Third I wanted to make sure that jQuery was actually working in your plugin. You may have to think of the fourth and fifth steps based on what you find as you start debugging.

      Good luck!
      Signature
      {{ DiscussionBoard.errors[10424149].message }}
  • Profile picture of the author David Beroff
    Strictly a guess here, but try replacing select[name=item] with #item (twice).
    Signature
    Put MY voice on YOUR video: AwesomeAmericanAudio.com
    {{ DiscussionBoard.errors[10424384].message }}
  • Profile picture of the author Wiliam Haminton
    You can use Jquery !
    {{ DiscussionBoard.errors[10450348].message }}
    • Profile picture of the author David Beroff
      Originally Posted by Wiliam Haminton View Post

      You can use Jquery !
      Take a closer look; they are.
      Signature
      Put MY voice on YOUR video: AwesomeAmericanAudio.com
      {{ DiscussionBoard.errors[10450350].message }}
      • Profile picture of the author GeckoTribe
        I'm not a JQuery user, so I can't comment on that. But this is a simple enough thing to do in straight JavaScript with just a few little changes from what you've done.

        Code:
        ...<select name="item" required="" onChange="SelectChanged(this)">...
        Code:
        function SelectChanged(el) {
document.getElementById('itemother').style.display=(el.options[el.selectedIndex].value=='other')?'block':'none';
}
        Signature

        Antone Roundy

        Want up to 57 bloggers to support your blog? Join a Team (free).

        Keep your blog active faster and easier with "Blog Riffing":
        * Free: PDF, High Impact Blog Riffing Course

        {{ DiscussionBoard.errors[10450461].message }}

Trending Topics