We Keep Coding

How to call function inside Javascript

<script type="text/javascript>
function submitMe() {
var checked_ids = [];
$('#your-tree-id').jstree('get_checked',null,true).each(function(){
checked_ids.push(this.id);
});
//setting to hidden field
document.getElementById('jsfields').value = checked_ids.join(',');
}
</script>
<input type="hidden" name="jsfields" id="jsfields" value="">
I'm searching the way to get checked Ids of Jstree in form submit. So this is what I get. However, how I can call this function in my program?

Use a click/submit event
$(form).submit(submitMe);
or
$('[type="submit"]').click(submitMe);
Don't forget to prevent the default event and then trigger it after the code:
function submitMe(e) {
e.preventDefault();
var checked_ids = [];
$('#your-tree-id').jstree('get_checked',null,true).each(function(){
checked_ids.push(this.id);
});
//setting to hidden field
document.getElementById('jsfields').value = checked_ids.join(',');
window.location = $(this).closest('form').submit();
}

Replace CSS line with PHP Conditional

I'm looking to replace a css line when a certain condition is met. I have a bunch of data that appears when I press Ok. Depending on what is selected in a combo-box I want the text to be red or black. I tried in javascript but it isn't working.
EDIT: I managed to change to red when I press OK, though because it reloads the data it returns to original black.
time.css
.time-title {
width:auto;
color:black;
position:absolute;
z-index:5;
}
index.php - part of it
<label> Visualizar: </label>
<select id="estado">
<option value="Normal"> Normal </option>
<option value="Crítico"> Crítico </option>
</select>
<label id="okbt">Ok</label>
</div>
<div id='placement'></div>
<script type='text/javascript'>
$("#okbt").on("click", function(){
var v1 = $("#cproc").val();
var v2 = $("#estado").val();
var tg1 = {};
var doc_ht = $(document).height();
$("#placement").css({"height":"510px"});
$(function () {
if (v2 === "Crítico") {
$(".time-title").css({"color":"red"});}
tg1 = $("#placement").timeline({
"min_zoom":1,
"max_zoom":30,
"image_lane_height":100,
"icon_folder":"timeglider/icons/",
"data_source":"pptimeline.php?ty="+v1+"&est="+v2, //add select value to url
"constrain_to_data":false
});
tg_actor = tg1.data("timeline");
var tg1_actor = tg1.data("timeline");
window.setTimeout(function() {
tg1_actor.refresh();
}, 1000);
});
});
</script>

Your JavaScript is most-likely being executed before the DOM is ready.
Try wrapping the code within a document.ready function:
<script type='text/javascript'>
$(document).ready(function() {
var v3 = $("#estado").val();
if (v3 === "Crítico")
{
$(".time-title").css({"color":"red"});
}
});
</script>

How to enter all multi-selection options into database

I have multi-selection functionality similar to this (see link): http://jsfiddle.net/eUDRV/341/.
HTML code:
<section class="container" >
<div>
<select id="list" name="list"size="15">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div>
<br><br><br>
<input type="button" id="button_left" value="<--"/>
<input type="button" id="button_right" value="-->" />
</div>
<div>
<select id="selected_values" size="15"></select>
<input name="selected_values" type="hidden"/>
</div>
jQuery/Javascript code:
$(document).ready(function () {
$("#button_right").click(function () {
var selectedItem = $("#list option:selected");
var added = false;
$("#selected_values > option").each(function() {
if ($(this).text() > $(selectedItem).text()) {
$(selectedItem).insertBefore($(this));
added = true;
return false;
}
});
if(!added) $(selectedItem).appendTo($("#selected_values"));
updateHiddenField();
});
$("#button_left").click(function () {
var selectedItem = $("#selected_values option:selected"), activeValues;
var added = false;
$("#list > option").each(function() {
if ($(this).text() > $(selectedItem).text()) {
$(selectedItem).insertBefore($(this));
added = true;
return false;
}
});
if(!added) $(selectedItem).appendTo($("#list"));
updateHiddenField();
});
function updateHiddenField () {
$('input[name="selected_values"]').val(
$.map($('#selected_values option:selected').toArray(), function (e) {
return e.value;
})
);
}
});
PHP code:
if(!empty($_POST['selected_values'])) {
$_POST['selected_values'] = explode(',', $_POST['selected_values']);
foreach($_POST['selected_values'] as $x) {
$query = "INSERT INTO $table (id1, id2) VALUES ($id1Value, $x)";
db_query($query);
My goal is to iterate through all of the values that are moved into the left column and enter them into a database using PHP. I'm able to get this functionality to work, however, I'm having the exact same issue as seen referenced here: how can I get all options in a multi-options select using PHP?. I'm accessing the values using $_POST["leftValues"] but if the user clicks on one of the options, only that one will be entered into the database. Unfortunately, the accepted solution isn't working for me.
$("form:has(#leftValues)").on('submit', function () {
$("#leftValues option").prop('selected', true);
});
Can someone please explain to me how I can get this solution to work for me or an alternative way of ensuring $_POST["leftValues"] will contain all the options instead of only the selected/highlighted? Any response is greatly appreciated.

You could add a hidden field and update that whenever the lists change.
You'd need to update your html:
<div>
<select id="leftValues" size="5" multiple></select>
<input name="leftValues" type="hidden" />
</div>
and add a function to do the updating:
function updateHiddenField () {
$('input[name="leftValues[]"]').val(
$.map($('#leftValues option:selected').toArray(), function (e) {
return e.value;
})
);
}
And call it in each of your click handlers:
$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$("#leftValues").append(selectedItem);
updateHiddenField();
});
$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected"), activeValues;
$("#rightValues").append(selectedItem);
updateHiddenField();
});
Finally, you can do this in your PHP to get what you originally expected:
$_POST['leftValues'] = explode(',', $_POST['leftValues']);

Finally got it to work. I edited the submit callback, as the original solution suggested.
Added an id to my form tag:
<form id="form" method="post">
When the form is submitted, select/highlight all options in the selected_values list:
$(#form).submit(function () {
$("#selected_values > option").each(function () {
$(this).attr('selected', 'selected');
});
return true;
});

Append multiple dropdown values to URL

I'm trying to do something similar to this:
$('#dropdown1').change(function() {
window.location = $(this).val();
});
I need to build a page with 2 dropdown lists and a textbox, and I need the values for each one to be stored and then appended to the URL when the form is submitted.
The URL needs to look similar to this when all options have been selected:
http://www.domain.co.uk/search-results/?searchOptions=dropdown1=value1|dropdown2=value2|textarea1=value3
I've figured out how to store the values of the dropdowns but I can't seem to append it to the url.. Here's where I got to:
<script type="text/javascript">
function getValues() {
var priceTo = document.form.priceTo.value;
//alert (priceTo);
}
$(document).ready(function() {
//var zip = $('#zip').val();
var initialURL = 'http://www.domain.co.uk/search-results/?searchOptions=priceto='
$('#form').submit(function(e) {
window.location.href = initialURL + priceTo
return false;
});
});
</script>
<body>
<form id="form" name="form">
Price:
<select name="priceTo" id="priceTo" onchange="getValues()">
<option value="5000">Up to £5,000</option>
<option value="10000">Up to £10,000</option>
<option value="20000">Up to £20,000</option>
<option value="40000">Up to £40,000</option>
<option value="80000">Up to £80,000</option>
</select>
<input type="submit" id="submit" value="submit"/>
</form>
</body>
For some reason this goes to:
http://www.domain.co.uk/search-results/?searchOptions=priceto=[object%20HTMLSelectElement]
EDIT:
I finally got it working on most browsers, including IE8 with this code:
<script type="text/javascript">
$(document).ready(function() {
//var zip = $('#zip').val();
var initialURL = 'http://www.selektvolvocars.co.uk/selekt-search-results/?searchOptions='
$('#form').submit(function(e) {
window.location.href = initialURL + priceTo.options[priceTo.selectedIndex].value + model.options[model.selectedIndex].value + '%7Czipcode=' +document.getElementById('zip').value + '%7Cproximitydistance=50'
e.preventDefault();
});
});
</script>
For some reason though it doesn't work in IE9... makes no damn sense to me, it just spits out a completely jumbled up URL. Any ideas?

your priceTo is the select list. Use the following to get the selected value:
$('#form').submit(function(e) {
window.location.href = initialURL + priceTo.options[priceTo.selectedIndex].value
e.preventDefault();
});

If I've understood correctly:
var initialURL = 'http://www.domain.co.uk/search-results/?searchOptions=priceto='
$('#form').submit(function(e) {
window.location = initialURL + $("#priceTo").val() + "|" + $("#anyOtherSelects").val();
e.preventDefault();
});
You can remove the rest of the Javascript.

You can use a little helper function which gets the id of a <select> or <input> element and returns it with its value. For example:
<script type="text/javascript">
//Helper function to return id and value. The id parameter shouldn't have the # sign at its beginning
function getIdVal( id ) {
return id + "=" + encodeURIComponent( $("#"+id).val() );
}
//run this when the document is loaded and ready
$(document).ready(function() {
//var zip = $('#zip').val();
var initialURL = 'http://www.domain.co.uk/search-results/?'
$('#form').submit(function(e) {
window.location.href = initialURL + getIdVal( "priceFrom" ) + "|" + getIdVal( "priceTo" );
return false;
});
});
</script>
Notes:
You get the value of the current <option> selected in a <select> element using $(...).val().
It is a good programming practice to use encodeURIComponent() for encoding the values just to make sure that no strange character is going to break your convention of using = and | as record and field separator in the search query URL.

I used onchange but the code is fired onblur plus the code is not working in IE

Issues:
In Chrome and Firefox the code works but the event is fired onblur and I need it when typing [solved by using onkeyup instead of onchange]
This is not working in IE at all! [solved by using Option object, see the update..]
HTML:
<input type="text" onchange="getLocations(this)" />
<select size="6" multiple="multiple" id="locationOpt"></select>
JavaScript:
function getLocations(element) {
var locations = Array("red","green","blue");
var location_matched = [];
for ( i in locations ){
if(locations[i].search(element.value) > -1){
location_matched.push(locations[i]);
}
}
var html = "";
for( i in location_matched){
html += "<option value =\"" + i + "\">" + location_matched[i] + "</option>";
}
document.getElementById("locationOpt").innerHTML = html;
}
Update
This the final working code:
HTML:
<input type="text" onkeyup="getLocations(this)" />
<select size="6" multiple="multiple" id="locationOpt"></select>
JavaScript:
function getLocations(element) {
var locations = Array("red","green","blue");
var location_matched = [];
for ( i in locations ){
if(locations[i].search(element.value) > -1){
location_matched.push(locations[i]);
}
}
var optionList = document.getElementById("locationOpt");
//to remove all options
while (optionList.options.length) {
optionList.remove (0);
}
for( i in location_matched){
// Option (text, value)
var locationOption = new Option (location_matched[i], i);
optionList.options.add (locationOption);
}
}

Use onpropertychange for IE(this will also fire on cut/paste).
Furthermore: Instead of manipulating the innerHTML you should use new Option() to create and insert the options.

To detect changes as the user types, you'll have to use the onkeypress event. A similar question was already answered here: Detecting "value" of input text field after a keydown event in the text field?