简体   繁体   中英

Using jquery to hide and show forms based on radio value

So I have my code half working.

When a user clicks no nothing happens. Which is exactly what is supposed to happen. When a user clicks Yes, the next question is displayed.

The problems are the check doesn't move to Yes but when the user clicks Yes the next question is displayed. If the user clicks Yes again it hides the questions but it should do that for the no.

Can anyone point me in the right direction.

$(document).ready(function(){


   $('.show_hide').showHide({            
        speed: 1000,  // speed you want the toggle to happen    
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 1, // if you dont want the button text to change, set this to 0
        showText: 'Yes',// the button text to show when a div is closed
        hideText: 'No' // the button text to show when a div is open

    }); 


});

</script>

<form class="form-signin" role="form">
 I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv"  id="1" value="Yes">Yes
    <div id="slidingDiv">
        I am having a username and password issue.
      <input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
      <input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
    </div>   
 <a href="#" class="show_hide" rel="#slidingDiv_2"></a><br />
    <div id="slidingDiv_2">
    I need to reset my password
      <input type="radio" name="password" id="password-0" value="No" checked="checked" required> No
      <input type="radio" name="password" id="password-1" value="Yes" required>   Yes
      </br>
        My username needs updated.
      <input type="radio" name="username" id="username-0" value="No" checked="checked" required> No
      <input type="radio" name="username" id="username-1" value="Yes" required> Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No
      <input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br>
I am experiencing other problems
      <input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
      <input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
    </div> 

Here is my plug in

(function ($) {
    $.fn.showHide = function (options) {

    //default vars for the plugin
        var defaults = {
            speed: 1000,
            easing: '',
            changeText: 0,
            showText: 'Show',
            hideText: 'Hide'

        };
        var options = $.extend(defaults, options);

        $(this).click(function () {
// optionally add the class .toggleDiv to each div you want to automatically close
                      $('.toggleDiv').slideUp(options.speed, options.easing);
             // this var stores which button you've clicked
             var toggleClick = $(this);
             // this reads the rel attribute of the button to determine which div id to toggle
             var toggleDiv = $(this).attr('rel');
             // here we toggle show/hide the correct div at the right speed and using which easing effect
             $(toggleDiv).slideToggle(options.speed, options.easing, function() {
             // this only fires once the animation is completed
             if(options.changeText==1){
             $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
             }
              });

          return false;

        });

    };
})(jQuery);

And here is the live link. http://jcsites.juniata.edu/students/bookhjr10/flashpoint/test2.html

My questions are how to get the No to hide the questions and the yes to display them. I am going to have a bunch of nested questions this is just the first nest.

Thanks

I believe the check is not moving to Yes because you're returning false in your event handler. "No" will never do anything because your plugin is run on elements with class '.show_hide', which is only on your "Yes" radios.

That said, this is going to get unwieldy fast and is not a great approach. I highly recommend storing your questionnaire as an object, and writing some methods that render the form as necessary...

var questionnaire = {};

questionnaire["cloud-office"].question = "I am having a Cloud My Office log in issue";
questionnaire["cloud-office"].children = {};
questionnaire["cloud-office"].children["login"].question = "I am having a username and password issue";
questionnaire["cloud-office"].children["other-problem"].question = "I am having a problem with something else";
questionnaire["cloud-office"].children["other-problem"].children = {};
questionnaire["cloud-office"].children["other-problem"].children["slow-computer"].question = "My computer is slow";
questionnaire["cloud-office"].children["other-problem"].children["dirty-keyboard"].question = "My keyboard is super gross";

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM