Develop Reference

Refactoring keyup function

I'm trying to make a form previewer.
The idea is to make a layer that shows user info printed on a div by default, but with the possibility of modifying their data in real time and show it in the box.
My code works, but I don't know how to simplify it.
Here's my code:
function preview() {
$('#previewName').html($('#Name').val());
$('#Name').keyup(function () {
$('#previewName').html($(this).val());
});
$('#previewDirection').html($('#Direction').val());
$('#Direction').keyup(function () {
$('#previewDirection').html($(this).val());
});
$('#previewPostal').html($('#Postal').val());
$('#Postal').keyup(function () {
$('#previewPostal').html($(this).val());
});
$('#previewCountry').html($('#Country option:selected').text());
$('#Country option:selected').change(function () {
$('#previewCountry').text($(this).text());
});
}
<form id="form">
<div>
<div>
<label>Name</label>
<input type="text" id="Name" name="Name" value="">
</div>
<div>
<label>Direction</label>
<input type="text" id="Direction" name="Direction">
</div>
<div>
<label>Postal</label>
<input type="text" id="Postal" name="Postal">
</div>
<div>
<label>Country</label>
<div>
<select name="Country" id="Country">
<option value="">x</option>
<option value="">y</option>
</select>
</div>
</div>
</div>
<div>
<div class="box">
<p class="strong" id="previewName"></p>
<p class="mb0" id="previewDirection"></p>
<p id="previewPostal"></p>
<p id="previewCountry"></p>
</div>
</div>
</form>
Any idea?

You can simplify this by querying the form input elements and using the id and value to update the preview.
// cache form selector
var form = $('#form');
// cache all form input elements
var inputs = form.find('input');
// cache all form select elements
var selects = form.find('select');
inputs.keyup(function(){
var id = this.id,
value = this.value;
$('#preview' + id).html(value);
});
selects.change(function(){
var id = this.id,
option = $(this).find('option:selected'),
value = option.val();
$('#preview' + id).html(value);
});
or a condensed version
$('#form input').keyup(function(){
var id = this.id,
value = this.value;
$('#preview' + id).html(value);
});
$('#form select').change(function(){
var id = this.id,
option = $(this).find('option:selected'),
value = option.val();
$('#preview' + id).html(value);
});
Demo

Javascript on submit from multiple select

I have this code :
<div class="st-form-line">
<span class="st-labeltext">Countries</span>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1"/> Selected</label>
<div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
<div style="padding:5px"></div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Excluded Countries</b></p>
<select size="10" name="excluded2" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])" multiple >
<?php foreach($arrayCountries as $country) {?>
<option value="<?= $country ?>" ><?= $country ?></option>
<?php } ?>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])">
</div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Selected Countries</b></p>
<select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])" multiple >
</select>
</div>
</div>
<div class="clear"></div>
</div>
This code look like this:
after i choose some countries from left side is adding me to right side, ok, that's good, but my problem is if is not selected as in this photo
is not adding in my database, and in this screnshoot it added only Canada and Germany that is selected and normally i want to add all countries that is added in right side.
This is js code:
<script type="text/javascript">
$(document).ready(function () {
if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
$('#clist_div').show('slow');
}
$('#members_create_campaign_form_countrySelectionType_0').click(function () {
$('#clist_div').hide('slow');
});
$('#members_create_campaign_form_countrySelectionType_1').click(function () {
$('#clist_div').show('slow');
});
function selectDiff(s1Id, s2Id) {
var selected = $('#' + s2Id + ' option').map(function(){
return this.value;
}).get()
var excluded = $('#' + s1Id + ' option').each(function() {
if (selected.indexOf(this.value) != -1) {
selected.splice(selected.indexOf(this.value), 1);
$(this).remove();
}
}).get()
};
selectDiff('clist_div', 'members_create_campaign_form_countries');
});

1st : you need to select the all option in selected countries on submit
2nd : simple add selected attribute in all option in selected countries
Note : consequently if your adding to selected countries and removing from selected countries means . option loose the selected attribute so you need to add the selected attribute on submit
$(document).on('submit','#submit_button',function(){
$('#members_create_campaign_form_countries option').prop('selected',true);
});

You can take the selected countries as array and keep pushing selected countries in to that.
For example:
var selected_countries=[];
//on select country
selected_countries.push('country selected');
use selected_countries array add to DB.

Not working select option dynamic field in jquery

jQuery(function() {
var currentCount = 0;
jQuery('#addMoreEmail').click(function() {
currentCount = cloning('#MoreEmailDetails', '#MoreEmails', currentCount);
return false;
});
function cloning(from, to, counter) {
var clone = $(from).clone();
//console.log(clone);
counter++;
// Replace the input attributes:
clone.find(':input').each(function() {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val();
});
// Replace the label for attribute:
clone.find('label').each(function() {
var newFor = jQuery(this).attr('for').replace(0, counter);
jQuery(this).attr('for', newFor);
});
// Replace the text between html tags:
clone = clone.html().replace(1, counter);
jQuery(to).before(clone);
return counter;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MoreEmailDetails">
<div class="form-group users">
<input type="text" required="required" id="LeadEmailDetail0FirstName" value="" name="data[LeadEmailDetail][0][first_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<input type="text" id="LeadEmailDetail0LastName" value="" name="data[LeadEmailDetail][0][last_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<select id="LeadEmailDetail0CountryId" class="select-replace select2-offscreen" name="data[LeadEmailDetail][0][country_id]" tabindex="-1" title="Country">
<option value="">Choose a country</option>
<option value="2">SOUTHEASTERN EUROPE</option>
</select>
<label for="LeadEmailDetail0CountryId">Country</label>
<input type="checkbox" id="LeadEmailDetail0PrimaryEmail" value="1" name="data[LeadEmailDetail][0][primary_email]">
<label for="LeadEmailDetail0PrimaryEmail">Primary Email</label>
</div ">
</div">
<div id="MoreEmails"></div>
<input type="submit" value="Add More" id="addMoreEmail">
In above code input type text and checkbox working fine (adding dynamic fields after click add more) but i m getting below error in case select option
TypeError: jQuery(...).attr(...) is undefined

You need to add a null check for jQuery(this).attr('name')) . JSFIDDLE
Following is the modified JS code block.
clone.find(':input').each(function() {
if(jQuery(this).attr('name')) {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val(); }
});

Use a Slide Down in jquery to display hidden form fields

I am having trouble applying the slidedown effect from jquery to display hidden div of form fields. I am trying to display each set of form fields if a specific value is selected from the select dropdown.
Script:
$(document).ready(function(){
$("#role").change(function(){
if ($("#role").val() == "student" ){
$(".hide1").slideDown("fast"); //Slide Down Effect
} else {
$(".hide1").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "faculty" ) {
$(".hide2").slideDown("fast"); //Slide Down Effect
} else {
$(".hide2").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "alumni" ) {
$(".hide3").slideDown("fast"); //Slide Down Effect
} else {
$(".hide3").slideUp("fast"); //Slide Up Effect
}});
});
HTML:
<form id="myform" class="form-control">
<select name = "role" class = "btn btn-primary" id ="role">:
<option>Role</option>
<option value = "student"> Student </option>
<option value = "faculty"> Faculty/Staff </option>
<option value = "alumni"> Alumni </option>
</select>
<br/><br/><br/><br/><br/><br/>
<div class="hide" id ="hide1">
<label for="address">Campus Address:</label>
<input type="text" id = "campadd" name="campadd" class= "form-control"/>
<label for="Major">Major:</label>
<input type="text" id = "major" name="major" class= "form-control"/>
</div>
<div class="hide" id = "hide2">
<label for="department">Department:</label>
<input type="text" id = "dept" name="dept" class= "form-control"/>
<label for="location">Location:</label>
<input type="text" id = "locations" name="location" class= "form-control"/>
</div>
<div class="hide" id ="hide3">
<label for="graduationdate">Graduation Year:</label>
<input type="text" id = "gradyear" name="gradyear" class= "form-control"/>
<label for="Major">Degree:</label>
<input type="text" id = "degree" name="degree" class= "form-control"/>
</div>
<br/>
</form>

You are using class selector instead of id selector in the slide up/down command
$(".hide2").slideDown("fast");
instead of
$("#hide2").slideDown("fast");
it can be shorten as
$(document).ready(function () {
var map = {
student : '#hide1',
faculty : '#hide2',
alumni : '#hide3',
}
$("#role").change(function () {
var target = $(map[this.value]);
$('.hide').not(target).stop(true, true).slideUp("fast");
target.stop(true, true).slideDown("fast");
});
});
Demo: Fiddle
Another way to look at this is: Fiddle

Fill inputs by clicking on div - jQuery

I wanna fill a form automatically by clicking on a div which has all the contents required for the form.
My div -
<div class="ab">
<ul>
<li>Sahar Raj</li>
<li>Address.</li>
<li>City</li>
<li>State</li>
<li>Pin</li>
<li>9876543210</li>
</ul>
</div>
Form -
<input class="required" type="text" name="name" />
<textarea name="address" class="required"></textarea>
<input class="required" type="text" name="city" />
<select name="state">
<option value="0">State1</option>
<option value="1">State2</option>
</select>
<input class="required" type="text" name="pin" />
<input class="required" type="text" name="phone" />
Any idea how to achieve this? Thanks

Try this:
$(document).ready(function () {
$(".ab").on("click", function () {
$(".ab ul >li").each(function (x, value) {
var text = $(this).html();
var dom = $("input,textarea,select").get(x);
$(dom).val(text);
});
})
});
JSFIDDLE DEMO

You can use a mix of map and each methods to get it working.
Remember that the order is important to get it working. If you have haphazard order, you can use the data-* attributes to store the related field info and then populate it.
$(function () {
$('div.ab').click(function() {
var data = $('.ab li').map(function () {
return this.innerHTML;
// or return $(this).text();
}).get();
$('input').each(function (i) {
this.value = data[i];
// or $(this).val(data[i]);
});
});
});
Check Fiddle
UPDATE
I have used data-* attributes to establish a relationship between the elements as they are no more of the same kind. This will be mapped to the name attribute of the field. Also encased the fields in a container as that makes them easier to select.
HTML
<div class="ab">
<ul>
<li data-key="name">Sahar Raj</li>
<li data-key="address">Address.</li>
<li data-key="city">City</li>
<li data-key="state">State2</li>
<li data-key="pin">Pin</li>
<li data-key="phone">9876543210</li>
</ul>
</div>
<div class="container">
<input class="required" type="text" name="name" />
<textarea name="address" class="required"></textarea>
<input class="required" type="text" name="city" />
<select name="state">
<option value="0">State1</option>
<option value="1">State2</option>
</select>
<input class="required" type="text" name="pin" />
<input class="required" type="text" name="phone" />
</div>
JS
$(function () {
$('div.ab').click(function () {
$('.container').children().each(function() {
// Get the corresponding key value from li.
var $this = $(this),
key = $this.attr('name');
// Find the li with that key
var txt = $('.ab li[data-key="'+ key +'"]').text();
$this.val(txt);
});
});
});
Check Data Fiddle

I'm guessing your inputs are all in a form and that the ul is always in the right order.
If that is true you can use:
$(function(){
$('div.ab').on('click',function(){
$('form input').each(function(index){
$(this).val($('div.ab ul li:eq(' + index + ')').html());
});
});
});

You can add id for every <li> and bind the click, for example the name:
HTML:
<li id="name">Sahar Raj</li>
jQuery:
$('.ab').on('click', function(){
$('input[name="name"]').val($('#name').html());
});

var counter = 0;
$("#clickme").click(function() {
$("#list li").each(function() {
var text = $(this).text();
$("input:eq(" + counter + ")").val(text);
counter++;
});
});
http://jsfiddle.net/PgYjH/1/

You can use this
$('div ul li').click(function () {
var divIndex = $(this).index();
var divText = $(this).text();
$('input').each(function () {
if ($(this).index() == divIndex) {
$(this).prop('value', divText);
}
});
});
On the click of one <li> it will read its index position and take its value/text. Then look for the <input> with same index and give the value/text to it.
The best would be to have data- attributes on both input and li, to avoid problems if you mix up the order how they are.
DEMO HERE