Develop Reference

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.

Make a multiselect form

I have this select form to add in my database countries.
https://jsfiddle.net/Da4m3/394/
I want to change this form into this:
this is html code:
<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="excludedcountries" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])" multiple >
<option value='97'>Afghanistan</option>
<option value='191'>Aland Islands</option>
<option value='105'>Albania</option>
<option value='114'>Algeria</option>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])">
</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="members_create_campaign_form[countries][]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])" multiple >
</select>
and with this js:
$(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');
});
selectDiff('clist_div', 'members_create_campaign_form_countries');
});
function sortSelect(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
function SelectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = true;
}
}
function hasOptions(obj) {
if (obj!=null && obj.options!=null) {
return true;
}
return false;
}
function moveSelectedOptions(from,to) {
if (!hasOptions(from)) { return; }
for (var i=0; i<from.options.length; i++) {
var o = from.options[i];
if (o.selected) {
if (!hasOptions(to)) { var index = 0; } else { var index=to.options.length; }
to.options[index] = new Option( o.text, o.value, false, false);
}
}
// Delete them from original
for (var i=(from.options.length-1); i>=0; i--) {
var o = from.options[i];
if (o.selected) {
from.options[i] = null;
}
}
if ((arguments.length<3) || (arguments[2]==true)) {
sortSelect(from);
sortSelect(to);
}
from.selectedIndex = -1;
to.selectedIndex = -1;
}
how i can do that? i have tried but all time don't insert in to my database!
Is from this value allTarget that put me all, and this value countries[] for multiselect, i don't know where and how i can put this values.
I have do some modifications and i have this code that when i select from left side is working, is adding to my database but when i push options to right side is not adding in database.
<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="www" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="www" 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="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],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['countries[]'],this.form['countries[]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['[countries[]'],this.form['countries[]'])">
</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['countries[]'])" multiple >
</select>
</div>
</div>
<div class="clear"></div>
</div>

Quickly coded, but is this what you're looking for?
https://jsfiddle.net/Da4m3/398/
(didn't bother to write the css)
The magic happens in the js code
s = $('#selected');
n = $('#not-selected');
l = $('#left');
r = $('#right');
l.on('click', function() {
move = s.find('option:checked');
move.attr('selected', false);
n.append(move);
});
r.on('click', function() {
move = n.find('option:checked');
move.attr('selected', false);
s.append(move);
});

Disable input if checkbox checked

i want to disable inputs when a checbox is checked.
part of html:
<div class="span1 ">
<div class="control-group" id="niedziela">
<label class="control-label" for="">Niedziela</label>
<div class="controls">
<input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
<input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
<input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
<input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamknięte
</div>
</div>
</div>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end"
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas
i tried with :
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>

You'll need to listen to the click event of the checkboxes. Since you've tagged the question with jQuery too,
$(function(){
$('#klient_open_4_end').on('click', function(){
if($(this).is(':checked')){
$('#nightlife_open_7_start').attr('disabled', true);
} else {
$('#nightlife_open_7_start').attr('disabled', false);
}
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
if($(this).is(':checked')){
$('.controls input:text, .controls textarea').attr('disabled', true);
} else {
$('.controls input:text, .controls textarea').attr('disabled', false);
}
});
});
Update
You can shorten this even more and use the following instead:
$(function(){
$('#klient_open_4_end').on('click', function(){
$('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
$('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));
});
});

This is fairly simple, you can do it like this
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially.

You can achieve this as
$('#chk').change(function(){
if($(this).is(':checked'))
$('#inp1').prop('disabled','disabled')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

checkout this simple code
<html>
<body>
<input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
<input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#klient_open_4_end").change(function(){
if($(this).prop("checked")){
$("#nightlife_open_7_end").prop("disabled",true);
}
else{
$("#nightlife_open_7_end").prop("disabled",false);
}
});
});
</script>
</html>
In above code
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use
$('#nightlife_open_7_end').attr('disabled', true/false);

It is for onclick disable and enable
<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
function check() {
if(document.getElementById("myCheck").checked == true)
{
document.getElementById("input").disabled = true;
}
else{
document.getElementById("input").disabled = false;
}
}
</script>
</body>
</html>

Jquery change function is not working?

I am trying to change css of two divs on a change in a select tag when specific value is selected so can you please take a look over my code that what am I doing wrong?
$(document).ready(function() {
$('#ads_site').change(function() {
if ($(this).val() == 'boss.az') {
$("#boss.az").css("display", "block");
}
elseif($(this).val() == 'jobsearch.az') {
$("#jobsearch.az").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="process.php">
<select name="ads_site" id="ads_site">
<option value="boss.az">boss.az</option>
<option value="jobsearch.az">jobsearch.az</option>
</select>
<div id="boss.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_page" name="from_page" placeholder="From Page No">
<input type="text" class="to_page" name="to_page" placeholder="To Page No">
</div>
<div id="jobsearch.az" style="display:none;">
<center>
<h3>::Ads To Be Added::</h3>
</center>
<br>
<input type="text" class="from_ad" name="from_page" placeholder="From Ad No">
<input type="text" class="to_ad" name="to_page" placeholder="To Ad No">
</div>
<input type="submit" name="submit" class="login login-submit" value="Submit">
</form>

There are 2 problems:
There is no elseif in JavaScript, you should use else if instead.
Since your IDs contain . you should escape them, otherwise jQuery tries to select an element that has boss ID and az class name.
$(document).ready(function () {
$('#ads_site').change(function () {
if ( this.value === 'boss.az' ) {
$("#boss\\.az").show();
// in case that you want to hide the other element
// $("#jobsearch\\.az").hide();
}
else if ( this.value === 'jobsearch.az' ) {
$("#jobsearch\\.az").show();
}
});
});

Javascript Hidden/Show data as input Radio

I created a code which displays an information by clicking on a RADIO and other information by clicking on another RADIO.
Works normally, but when I update the page, even CHECKED, shows no information. Then I have to click again on the RADIO that is already CHECKED information to appear.
Anyone know how to solve?
Follow the code below:
<script>
// COLOR BG OR IMG BG
$(document).ready(function(){
$("input[name$='userBgOrImg']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
<style type="text/css">
.desc { display: none; }
</style>
<div><label><input type="radio" name="userBgOrImg" value="1" <?php $id = $res_select["id"]; if ( $userBgOrImg == 1 ) { echo "checked=\"checked\"";} else { echo "";}?>>Cor de Fundo</label></div>
<div><label><input type="radio" name="userBgOrImg" value="2" <?php $id = $res_select["id"]; if ( $userBgOrImg == 2 ) { echo "checked=\"checked\"";} else { echo "";}?>>Imagem de Fundo</label></div>
<div> <br /> <br /> </div>
<div id="1" class="desc">
<label for="userBgBody">Cor do fundo do Site</label>
<input type="text" class="form-control bscp span12" value="<?php $id = $res_select["id"]; echo $userBgBody; ?>" id="userBgBody" name="userBgBody">
<hr />
</div>
<div id="2" class="desc">
<label for="userImgBody">Imagem de fundo do site</label>
<input type="text" class="span12" name="userImgBody" id="userImgBody" placeholder="Imagem do fundo do site" value="<?php $id = $res_select["id"]; echo $userImgBody; ?>" />
<hr />
<label for="userImgBodyRepeat">Repetir imagem de fundo</label>
<span> <input type="radio" name="userImgBodyRepeat" value="repeat"> Sim</span> <span> <input type="radio" name="userImgBodyRepeat" value="no-repeat" selected="selected"> Não
<hr />
</div>
Thank you in advance for your help.

Try this,
$(document).ready(function(){
var did=$("input[name$='userBgOrImg']:checked").val();
if(did)
{
$("#"+did).show();
}
// your remaining code
});// document.ready function close
Demo

You need to try
$(document).ready(function(){
$("input[name$='userBgOrImg']").change(function() {
var test = $(this).val();
$("div.desc").hide();
if(this.checked) {
$("#"+test).show();
}
}).filter(':checked').change();
});

Tr this..
$(document).ready(function () {
$("input[name$='userBgOrImg']").click(function () {
var value = $(this).val();
if(value)
{
$("#"+value).show();
}
});