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.
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'm facing a problem with my project. My user can create a new div by clicking a button, but he can remove whatever div he wants, expect the first one. So if he create 2 new divs here is what the code will look like:
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container2">
<input type="text" id="title2"><br />
<input type="text" id="description2">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
If the user remove the second div my code will look like this.
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
Pretty simple. Now I want to use the information entered by the user in the text inputs, but I don't know how to select the active divs. Is there a way to select the container1 and container3 in the example above?
Keep in mind that the user can use up to 99 new div.
Your help is appreciated. Thank you,
Just apply a CSS selector:
<div id="parent">
<div id="container1">
<input type="text" id="title"><br />
<input type="text" id="description">
</div>
<div id="container3">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
</div>
$('#parent > div')
See here for more information: https://api.jquery.com/category/selectors/
You can add a class to each item. You would need to amend your code that is called when the button is clicked to handle this.
Let's say you gave all titles a class of "myTitle" and you gave all descriptions a class of "myDescription". Your div created would look something like this:
<div id="container1">
<input type="text" id="title" class="myTitle">
<br />
<input type="text" id="description" class="myDescription">
</div>
Now, in order to get all titles and descriptions you'd use jQuery and say:
$('.myTitle').each(function () {
console.log($(this).val());
});
$('.myDescription').each(function () {
console.log($(this).val());
});
First of all, you have multiple divs with the id "title" and "description", so change those to class. You can select the nth div with jquery: $("#container" + n)
you can select the title of the nth div: `$("#container" + n).children(".title");
you can select all of the divs by adding a class to them, such as .container
I like the alignment of the main Site URL, the first one is always there, once you click add site, more keep adding , how could I just make them align the same?I tried padding and margin, but it still doesn't make them quite sit the same, since either something would be wrong with Auto Approvement or Site URL
JS code:
<script>
function add_fields() {
document.getElementById('add').innerHTML += '<span style= "font-size:15px;">Site URL: <input type="text" style= "margin-right: 15px;width:220px;font-size:16px;"> Auto Approvements: <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled <br></span>\r\n';
}
</script>
Html:
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Add a Site!</h2>
<hr class="light">
<p class="text-faded">
<div id= "add">
<form style= "font-size:16px;">
Site URL:
<input type="text" name="firstname" style= "margin-right:10px;">
Auto Approvements
<input type="radio" name="site" value="enable"> Enabled
<input type="radio" name="site" value="disable"> Disabled
</form>
</div>
</p>
<input type="button" id="more_fields" onclick="add_fields();" class="page-scroll btn btn-default btn-xl sr-button" value="Add another site" />
Generate Code
</div>
</div>
</div>
</section>
Im using a template from bootstrap and put my work on it.
I updated the javascript to match the initial html:
<script>
function add_fields() {
document.getElementById('add').innerHTML += '<form style= "font-size:16px;">Site URL: <input type="text" name="firstname" style= "margin-right:10px;"> Auto Approvements <input type="radio" name="site" value="enable"> Enabled <input type="radio" name="site" value="disable"> Disabled </form>';
}
</script>
https://plnkr.co/edit/ghWDeZRySfaUT4Sffr1X?p=preview
Here you see that the alignment is done exactly the same. If this is not giving you the same result, please supply the css styling and other things that might influence the look and feel as well.
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')
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.