I am quite a noob when it comes to jQuery and I'm trying to select the next element using the next() selector but having a little trouble in getting it to work!
What I'm trying to do is to activate slideDown() once the user has finished making their selection on a ui slider. Here is my code:
$('.slider').slider({
stop: function(event, ui) {
$(this).nextAll('.secondq:first').slideDown('slow')
}
});
Trouble is, this doesn't work at all. It will only work if I put the 'secondq' question inside the parent div of the ui slider. Here is my HTML:
<div class="option">
<h2 align="left">How high is your ceiling from the floor?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderFt slider"></div>
</div>
</div>
<!-- End Option -->
<div class="option">
<h2 align="left">How many windows do you have?</h2>
<input type="text" align="right" name="bonus" class="value" disabled="disabled" />
<div class="slidewrap">
<div class="sliderWinDoor slider"></div>
</div>
<div class="secondq" style="display:none;">
<h2>What type of material are your windows made of?</h2>
<div class="radiocont">
<label>Wood</label>
<input type="radio" class="styled" value="wood" name="windowtype" />
</div>
<div class="radiocont">
<label>Metal</label>
<input type="radio" class="styled" value="metal" name="windowtype" />
</div>
<div class="radiocont">
<label>PVC</label>
<input type="radio" class="styled" value="pvc" name="windowtype" />
</div>
</div>
</div>
nextAll only gets siblings. Based on your HTML structure, you could do:
$(this).parent().next()
To make it more independent from the structure, you could also do:
$(this).closest('.slidewrap').nextAll('.secondq:first')
Related
I need some help I have a drupal webform in which new form elements show conditionally if the previous text input has content.
What I’m trying to do is select all inputs that are currently visible and then specifically target the last one (the most recently shown).
The issue is this targets the last child within each .form-item rather than the last form item itself directly.
$(".webform").on("change", function() {
$(".form-item:visible").each(function() {
if ($(this).is(":last-of-type")) {
//Do whatever
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="webform">
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:block">
</div>
<div class="form-item" style="display:none">
</div>
</div>
You can simplify your flow by using this jQuery:last selector
$('.form-item:visible:last')
You may apply the below code on form field change or form submit, depending on your requirements.
<div class="webform">
<div class="form-item" style="display:block">
<input type="text" value="1" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="2" />
</div>
<div class="form-item" style="display:block">
<input type="text" value="3" />
</div>
<div class="form-item" style="display:none">
<input type="text" value="4" />
</div>
</div>
<script>alert($(".form-item:visible:last input").val());</script>
I have a lists of html div and i want to arranged/sort it by drag and drop using jquery/javascript. This is my html to be drag and drop.
<div id="wrap">
<div>
<input type="text" name="qs1-type" value="Hi1">
....
</div>
<div>
<input type="radio" name="qs2-type" value="True">
<input type="radio" name="qs2-type" value="False">
....
</div>
<div>
<input type="text" name="qs3-type1" value="OKs">
<input type="text" name="qs3-type2" value="Number">
....
</div>
...
<div>
<input type="text" name="qs8-type" value="Bolder">
....
</div>
<div>
<textarea name="qs9-type"> some text</textarea>
....
</div>
</div>
right now I based my code here : Moving node Div Up and Down using Javascript/Jquery
but I want it to be drag and undroppable.. any idea? I have search in the internet bt no luck for having same issues as I do.
Hi I needed assistance with having the “show/hide div” below show and hide when you click on either of the checkboxes in a section. I am planning on having multiple sections and the number is unknown, so it will not be possible to use ID's. So I was looking for a generic way if a checkbox in one region is clicked the “show/hide” only shows up in that region. I know you can probably achieve this by writing individual code and assigning ID’s for each section, but is there a way to make it function like I am visioning to avoid having to constantly update of the code? Is it possible to just target the closest div or next to element to achieve this when the checkbox is checked/unchecked or call css classes?
Here is my HTML
<!--section 1 -->
section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 2
<!--section 2 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 3
<!--section 3 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 4
<!--section 4 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
Once you fix the invalid html (you need to add a closing </div> for <div class="custom-input">), you could use
$(this).closest('.custom-input').prev('.ShowHideDiv') //where $(this) is the checkbox
Refer this fiddle for an example (based on the comments) that hides the <div> if none of the checkboxes are checked, and displays the <div> if one or both the checkboxes are checked
I would do it like this:
$('.checkbox').on('click', function(){
$(this).closest('.custom-input').prev('.showHideDiv').toggle();
});
Just make sure your markup is closed properly and all your showHideDiv classes are exactly the same (i.e. right now some start with lowercase and some start with uppercase)
updated
http://jsfiddle.net/EEj29/
My form code is here.
<div class="threeleft second" id='displayallformshow' style="float: none;width: 80%;padding:10px;">
<form action="investor_submit.php">
<div class='formdiv'>
<div style='width:35%;margin-top:12px;'>Published :</div>
<div style='width:41%;text-align:justify'>
<div style="float: left;">
<input type="radio" name="published" id="" value='publishedyes'>
</div>
<div style="float: left;width: 237px;">Yes, allow users who follow links to my venture URL the ability to see my venture page.</div>
<br>
<br>
<div style="float: left;">
<input type="radio" name="published" id="" value='publishedno'>
</div>
<div style='float: left;width: 237px;'>No, display an error message to anybody who tries to follow links to my venture except for me.</div>
</div>
</div>
<br>
<br>
<div class='formdiv'>
<div style='width:35%;margin-top:12px;'>Listed and Discoverable :</div>
<div style='width:41%;text-align:justify'>
<div style='float: left;'>
<input type="radio" name="listedanddiscoverable" id="" value='listedanddiscoverableyes'>
</div>
<div style='float: left;width: 237px;'>Yes, I want my ventureto be listed in the browser section making it discoverable to RockThePost Visitors. (Required Paid Subscription)</div>
<br>
<br>
<div style='float: left;'>
<input type="radio" name="listedanddiscoverable" id="" value='listedanddiscoverableno'>
</div>
<div style='float: left;width: 237px;'>No, do not list my venture anywhere automatically. I willmanually invite people to my venture with my venture URL.</div>
</div>
</div>
<div class='formdiv'>
<div style='width:35%;margin-top:12px;'>Describe Start Date :</div>
<div style='width:55%;'>
<input class='madetextboxlong' placeholder="Enter Describe Start Date" type="text" name="describestartdate" id="describestartdate">
</div>
</div>
<div class='formdiv'>
<div style='width:35%;margin-top:12px;'>Describe end Date :</div>
<div style='width:55%;'>
<input class='madetextboxlong' placeholder="Enter Describe end Date" type="text" name="describeenddate" id="describeenddate">
</div>
</div>
<br>
<br>
<br>
<div style="margin-left: 288px;margin-top: 423px;width: 100%;" class="formdiv">
<input type="submit" id='publishform' class="madebtnsave" name="save" value="Save" />
</div>
</form>
</div>
that form i load on click event. user click on investor tab when load.
that form is working properly but the problem is not loading the jquery ui datepicker
this is my datepicker code.
$( "#describestartdate" ).datepicker();
$( "#describeenddate" ).datepicker();
Please help me to solve that problem how to working jquery datepicker.
when i load form without click event the datepicker is display successfully.
but i load form to click event the datepicker is not showing.
dear friend try this.
$("event tab ID").click(function(){
$( "#displayallformshow #describestartdate" ).datepicker();
$( "#displayallformshow #describeenddate" ).datepicker();
});
i hope this is used full for you.
If you load your form on a click event, you have to register the datepicker handlers
$( "#describestartdate" ).datepicker();
$( "#describeenddate" ).datepicker();
after having loaded it. Put these line to the end of the form-loading callback (the on-click event). Otherwise, these lines will be executed before the target items are available, i.e. $("#describestartdate") will return an empty list and nothing happens.
Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>
Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.