Develop Reference

How to display a form when I drag a div on drop div position?

when I drag div A and drop on Drop div, when I drop a div the form div #formnew1 will be opened.
I used the onclick function. But I want to display the #formdiv div when I drag a div
<div style="width:100%;">
<div class="d">
<div class="draggable1" style="background-color: black;color:white" id="first">A
<div style="display: none;width:196px;" id="formnew1">
<div class="container">
<form style="background-color: white;" id="targetinsert1">
<center>
<input type="hidden" name="website" id="website" value="website"/>
<input type="text" name="targetname" id="targetname" placeholder="Target Name" style="margin-bottom: 3%;"/>
<br />
<input type="text" name="targetcontent" id="targetcontent" placeholder="Target Content"/>
<input type="submit" name="submit" value="SUBMIT" id="targetinsert1"/>
<input type="button" name="cancel" value="CANCEL" id="cancel" onclick="cancel1();"/>
</center>
</form>
</div>
</div>
</div>
</div>
<div class="d1">
<div id="droppable" style="width: 25%;height:100px;background-color:grey;"></div>
</div>
</div>
js code -
$(function () {
$(".draggable1").draggable({cursor: "crosshair",
});
});
$("#droppable").droppable({
drop: function (event, ui) {
$(".draggable").draggable("disable");
}
});
Demo : https://jsfiddle.net/3ufk0u6u/4/

Just show form div on drag Event.
$( "#droppable" ).droppable({
drop: function( event, ui ) {
jQuery("#formnew1").show();
$(".draggable").draggable("disable");
}
});

on line 6 the drop event exectue a function, you need to put your code here.
juste add this :
$('#formnew1').show()
here it is : https://jsfiddle.net/3ufk0u6u/12/

JQuery getting dynamic values and populate hidden form fields

I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!

You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});

How to change value of form from drag/drop?

I have a drag and drop feature in my web app, which is shown below. I am trying to get the items that are dragged into the the #contributors div to be placed into a textbox named personalassessment_set3 but I'm not able to do so. Any advice?
form
<p>
<label for="personalassessment_set3">Set3</label><br />
<input id="personalassessment_set3" name="personalassessment[set3]" type="text" />
</p>
<input type="button" value="Set Value" onclick="$('#personalassessment_set3').val( $('#contributors').val() )" />
Drag/drop
<script>
function dragUser(user, event) {
event.dataTransfer.setData('User', user.id);
}
function dropUser(target, event) {
var user = event.dataTransfer.getData('User');
target.appendChild(document.getElementById(user));
}
</script>
<section id="user-levels">
<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)">Compensation</a>
<a draggable="true" class="user" id="raphael" ondragstart="dragUser(this, event)">Benefits</a>
</div>
<div id="contributors" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Ranking
</div>
<div class="clear"></div>
</section>

You are misusing onclick which don't accept any jquery based method or wrapped object.
You should try this instead:
<input id="test" type="button" value="Set Value" />
<script>
$(function(){
$('#test').on('click',function(){
$('#personalassessment_set3').val( $('#contributors').val() )
});
});
</script>

jquery set previous div class

I have some jQuery that sets an image as a radio button for a star rating system. I wish to include a function that when the user cicks a radio button the image changes to checked and the previous radios are also change to checked.
I have managed to change the class of the checked button and I have some code that would change the class on the previous buttons also, but on a simpler div structure. I have been able to combine the both.
The code to change the class for the radio button
$(function() {
$('input:radio').each(function() {
$(this).hide();
$('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
e.preventDefault();
$check = $(this).prev('input');
var unique = '.'+this.className.split(' ')[1]+' div';
$(unique).attr('class', 'radio');
$(this).find('div').attr('class', 'radio-checked');
$check.attr('checked', true);
});
});
html:
<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio-checked"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
Code that I tried to integrate to set previous ones to checked on hover:
$('.radio-fx').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('radio-checked');
$(this).nextAll().removeClass('radio');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('radio');
}
);
Thanks for any help.

<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
<style type="text/css">
.radio-fx { float:left;margin:10px;}
.radio-fx .radio{ background:#ff0; width:20px; height:20px;}
.radio-checked .radio{ background:#f0f;}
</style>
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
$('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
var $self = $(this);
$self.addClass('radio-checked').prevAll().addClass('radio-checked');
$self.nextAll().removeClass('radio-checked');
}).live ( "mouseout", function() { // Handles the mouseout
$(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for?
});
});
</script>
complete test code here, have a try

How to re-index select box along with hidden fields

I'm struggling to figure out how to re-index (?) a series of hidden fields with jQuery/Javascript. The sample code below is generated each time a user clicks a create button. The numerical value applied to the hidden fields within tier[] is the index of an option selected from a drop-down.
The problem I have is every block of code (except the first i.e. tier1) should have the option to be removed. When the remove link is clicked I have implemented some jQuery which removes the div with the selected ID. The main issue is that I need to alter the name of each block on removal and re-index the drop-down so the numbers are incremental. The hidden fields will need to follow the index of the drop-down too.
I'm struggling to determine how to achieve this with Javascript or jQuery.
I've tried to include an example before any removal occurs. There are 4 blocks, each is incrementally created based on the option from the drop-down. A user could attempt to remove block 3. Currently, this will remove the option from the select using the above jQuery but as a result the display will list inconsistent block numbers, the hidden fields will have the incorrect indexes and the drop-down will be 'out of synch'.
<script type="text/javascript">
$(document).ready(function() {
$("a.removeTier").live('click', function() {
var tierId = $(this).parent().parent().attr('id').match(/\d+$/);
$('#tiers option:eq('+tierId+')').remove();
$('#tier'+tierId).remove();
return false;
});
});
</script>
<p align="left">
<label style="width: 45px;" for="newTier"><b>Tier:</b> *</label>
<button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier">New Tier</button>
<select name="tiers" id="tiers">
<option value="0">Select</option>
<option selected="" value="1">Tier 1</option>
<option value="2">Tier 2</option>
<option value="3">Tier 3</option>
<option value="4">Tier 4</option>
</select>
</p>
<div id="tierRight">
//1
<div id="tier1">
<div style="text-align: left;">
Tier 1<br><label for="publication_date_1">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker"> <input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1">
</div>
<span>
<a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#">Autism Initiatives</a>
<input type="hidden" value="132" name="tier[1][panels][132][panelId]">
<input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]">
</span>
</div><br>
//2
<div id="tier2">
<div style="text-align: left;">
Tier 2 - [<a id="tier2" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[2][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08">
</div>
<span>
<a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#">Autism 2</a>
<input type="hidden" value="149" name="tier[2][panels][149][panelId]">
<input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]">
</span>
</div><br>
//3
<div id="tier3">
<div style="text-align: left;">
Tier 3 - [<a id="tier3" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[3][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15">
</div>
<span>
<a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#">Autism 3</a>
<input type="hidden" value="150" name="tier[3][panels][150][panelId]">
<input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]">
</span>
</div><br>
//4
<div id="tier4">
<div style="text-align: left;">
Tier 4 - [<a id="tier4" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[4][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22">
</div>
<span>
<a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#">Autism 4</a>
<input type="hidden" value="151" name="tier[4][panels][151][panelId]">
<input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]">
</span>
</div><br>
</div>

First you'll need to clean up your HTML - you're using id="tier1" on both a div and a a which will eventually cause problems.
Here's a simple variant that shows a possible approach:
<div class="tier">
<p class="title">Tier 1</p>
</div>
<div class="tier">
<p class="title">Tier 2</p>
<p class="delete">Delete Me</p>
</div>
<div class="tier">
<p class="title">Tier 3</p>
<p class="delete">Delete Me</p>
</div>
Javascript:
$(function() {
$(".delete").bind("click", function() {
$(this).parent().remove();
$(".tier").each( function(index) {
var tierIndex = index+1;
$(this).find(".title").text("Tier " + tierIndex);
});
});
});
Or as a jsFiddle here.