This is the language select box.
<select name="lang" id="lang" browser="Indicated by the browser">
<option value="en">English</option>
<option value="fr">French</option>
<option value="ch">Chinese</option>
<option value="sp">Spain</option>`enter code here`
</select>
This is script i have written.
<script type="text/javascript">
jQuery(document).ready(function() {
loadBundles('en');
jQuery('#lang').change(function() {
var selection = jQuery('#lang option:selected').val();
loadBundles(selection != 'browser' ? selection : null);
jQuery('#langBrowser').empty();
if(selection == 'browser') { jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
}
});
});
function loadBundles(lang) {
jQuery.i18n.properties({
name:'Messages',
path:'bundle/',
mode:'both',
language:lang,
callback: function() {
updateExamples();
}
});
}
function updateExamples() {
var ex1 = 'Firstname';
var ex2 = 'Lastname';
var ex3 = 'Youremail';
var ex4 = 'Reenteremail';
var ex5 = 'Newpassword';
var ex6 = 'Dateofbirth';
var ex7 = 'Signup';
var ex8 = 'Itsfreeandalwayswillbe';
var ex9 = 'Birthlabel';
var ex10 = 'Termslabel';
var ex11 = 'Summarylabel';
var ex12 = 'PersonalLabel';
var ex13 = 'Interestlabel';
var ex14 = 'Addlabel';
var ex15 = 'Editlabel';
var ex16 = 'Deletelabel';
var spreadsheet_label = 'Spreadsheetlabel';
var invite_google_label = 'Invitegooglelabel';
var invite_facebook_label = 'Invitefacebooklabel';
var upload_label = 'Uploadlabel';
var subBut='Submit';
var dialogTitle = 'DTitle';
jQuery("#first_name_label").text(eval(ex1));
jQuery("#first_name_label1").text(eval(ex1));
jQuery("#last_name_label").text(eval(ex2));
jQuery("#last_name_label1").text(eval(ex2));
jQuery("#email_label").text(eval(ex3));
jQuery("#email_label1").text(eval(ex3));
jQuery("#reenter_email_label").text(eval(ex4));
jQuery("#new_password_label").text(eval(ex5));
jQuery("#date_of_birth_label").text(eval(ex6));
jQuery("#date_of_birth_label1").text(eval(ex6));
jQuery("#sign_up").text(eval(ex7));
jQuery("#label1").text(eval(ex8));
jQuery("#button").val(eval(ex7));
jQuery("#birth_label").text(eval(ex9));
jQuery("#terms_label").text(eval(ex10));
jQuery("#summary_label").text(eval(ex11));
jQuery("#personal_label").text(eval(ex12));
jQuery("#interest_label").text(eval(ex13));
jQuery("#add_label").text(eval(ex14));
jQuery("#edit_label").text(eval(ex15));
jQuery("#delete_label").text(eval(ex16));
jQuery("#spreadsheet_label").text(eval(spreadsheet_label));
jQuery("#invite_google_label").text(eval(invite_google_label));
jQuery("#invite_facebook_label").text(eval(invite_facebook_label));
jQuery("#upload_label").val(eval(upload_label));
jQuery("#submit_button").val(eval(subBut));
jQuery("#ui-dialog-title-dialog").text(eval(dialogTitle));
}
</script>
Everything is working fine for the labels. But in the case of dynamic drop down i got problem. How to localize the dynamic drop down data when the user selected the language.
The data in the drop down is coming from the database.
I have a language select drop down box, after selecting one language from dropdown list am able to change the text filed names and all other text in the language that is selected.
At the same time i have another dropdown, in that data is generated dynamically form the database. After the user selecting the language from dropdown list i have to change the data in this drop down list also. please suggest me if u have any idea.
Thank you.
I suggest you to use ajax for this issue.
You can bind ajax to first drop down and then fill secound dropdown by data which you get from back-end.
You can do something like this :
<select name='lang'>
<option value='eng'>Eng</option>
<option value='french'>French</option>
</select>
<!-- below div is another div whose data changes as per the language selected -->
<div id="another_div"></div>
JS:
$("select[name='lang']").live({
change: function(e){
var selected_lang = $("select[name='lang'] option:selected").html();
data = {}
data['selected_lang'] = selected_lang;
$.ajax({
url: "required url",
data: data,
success: function(res){
$("#another_div").text(res); // if result is a direct text sent from server
// or
$("#another_div").text(res.content); //if result is an object with the required content present in the key 'content'
},
error: function(err){
alert("error occured");
}
});
}
});
I would use one of the many Cascading jQuery Dropdowns:
http://www.ryanmwright.com/2010/10/13/cascading-drop-down-in-jquery/
Related
I have a dropdown that is filled by a database and everything works well. However I want to pass a parameter to php based on the value of the dropdown which I can do. If I force the var to have a particular number it gets the corresponding item in the database. I'm having a problem to get the value of a dropdown. I've tried all the suggestions here in the forum and nothing works in this particular area of my code. I have it working on another piece of my code but not on this particular one and I don't know why. Here is my code:
<select id="servicos" onChange="return selectServ();">
<option value="item" class="itemoption">Serviço</option>
This is the code that is not working:
function selectServ() {
var e = document.getElementById("servicos");
var idserv = e.options[e.selectedIndex].value;
$.getJSON("http://ib.esy.es/gestao/_php/servicos_threadingpreco.php", { serv: idserv }, null).then(function(data) {
console.log(data);
var tr = data
for (var i = 0; i < data.length; i++) {
var tr = $('<tr/>');
// Indexing into data.report for each td element
$(tr).append("<td>" + data[i].preco + "</td>");
$('.table1').append(tr);
}
});
}
If I put
var idserv = "1"
It is working, however this:
var e = document.getElementById("servicos");
var idserv = e.options[e.selectedIndex].value;
Is not getting a value. The console log gives:
selectdynamicpreco.html:76 Uncaught TypeError: $(...).value is not a function
You should consider using jQuery to get the value of the dropdown:
$('#dropdown').val() will give you the selected value of the drop down element. Use this to get the selected options text.
$("#dropdown option:selected").text();
Should get you the text value of the dropdown.
This is working on another piece of the code
<script>
function selectCat(){
$('#servicos').change(function() {
$('#demo').text($(this).find(":selected").text());
});
//for textbox use $('#txtEntry2').val($(this).find(":selected").text());
var e = document.getElementById("categoria");
var servSelected = e.options[e.selectedIndex].value;
var url = "";
var items="";
if(servSelected === "1"){
url = "http://ib.esy.es/gestao/_php/servicos_threading.php";
}
if(servSelected === "2"){
url = "http://ib.esy.es/gestao/_php/servicos_sobrancelhas.php";
}
if(servSelected === "3"){
url = "http://ib.esy.es/gestao/_php/servicos_manicure.php";
}
$.getJSON(url,function(data){
$.each(data,function(index,item)
{
items+="<option value='"+item.ID+"'>"+item.servico+"</option>";
});
$("#servicos").html(items);
});
};
</script>
I have a problem whit my dropdown list,
I need to change location page when option selected using value option attribute, but the first option element not functional,
This is the html code:
<form>
<select class='language-select' name='URL' id='URL'>
<option value="index.php?lan=EN" selected> English</option>
<option value="index.php?lan=FR">Français</option>
</select>
</form>
and this is the Js function:
$('#URL').on('change', function(event){
event.preventDefault();
event.stopPropagation();
var $this = $(this);
window.location.href = $(this).val();
alert($(this).val());
});
also there an error ' uncaught exception: out of memory'
One thing, when i add an empty option element it works well, i can toggle bettwen two links: index.php?lan=FR and /index.php?lan=EN
Thanks
Your html marks the first option as selected no matter what. So, for example, when the French page is loaded, your dropdown still says "English". Instead, what you need to do is detect on page load which option should be selected. You can use a function like this:
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
And your markup would be:
<form>
<select class='language-select' name='URL' id='URL'>
<option id="EN" value="index.php?lan=EN"> English</option>
<option id="FR" value="index.php?lan=FR">Français</option>
</select>
</form>
Finally, in your jQuery on ready function, you would have:
$(function() {
var lan = GetURLParameter('lan');
$('#' + lan).prop('selected', true);
});
Hope it helps!
I am currently working on an online store. I have succeeded in coding a script that calculates a product's price and shows this price on the product page when the user clicks on an 'update price' button. Is there a way of doing this without a submit button? In other words: is there a way to make the price show and update automatically?
(I have not included my .php file because it uses data from a database.)
Any help would be greatly appreciated!
<form action="/" id="updatePrice">
<h3>Size</h3>
<select class="form-control" id="sizejquery" name="size">
<option>A0</option>
<option>A1</option>
<option>A2</option>
</select>
<h3>Type of paper</h3>
<select class="form-control" id="paperjquery" name="paper">
<option>white coated paper</option>
<option>photo paper</option>
</select>
<h3>Quantity</h3>
<select class="form-control" id="quantityjquery" name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<input class="btn btn-default" type="submit" value="update price">
</form>
<div id="price">
<h3>$0.00</h3>
</div>
<script>
// Attach a submit handler to the form
$("#updatePrice").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery").val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
});
</script>
You can register the blur() event on Quantity drop down ad then pus the results.
I have modified the script. Please see if it works for your implementation.
<script>
$(document).ready(function(){
$("#quantityjquery").blur(function(){
// Get some values from elements on the page:
var size = $("#sizejquery").val();
var paper = $("#paperjquery").val();
var quantity = $("#quantityjquery").val();
var url=$("#updatePrice").attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
});
});
</script>
Right, so, try the following:
$(function() {
$formBtn = $("#updatePrice").find("input.btn-default");
$formBtn.on("click", function(event) {
//all your code (the one you already have) here....
});
$(window).on("load", function() {
$formBtn.trigger("click");
});
$("#updatePrice").on("change", ".form-control", function() {
$formBtn.trigger("click");
});
});
Full code:
$(function() {
$formBtn = $("#updatePrice").find("input.btn-default");
$formBtn.on("click", function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $("#updatePrice"),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery")
.val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find(
"#content");
$("#price").empty().append(
content);
});
});
$(window).on("load", function() {
$formBtn.trigger("click");
});
$("#updatePrice").on("change", ".form-control", function() {
$formBtn.trigger("click");
});
});
Call that method at document ready api in jquery as
$(document).ready(function(){
// your logic
});
In terms of your code
function fetchPrice(){
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $(this),
size = $form.find("#sizejquery").val(),
paper = $form.find("#paperjquery").val(),
quantity = $form.find("#quantityjquery").val(),
url = $form.attr("action");
// Send the data using post
var posting = $.post(url, {
size: size,
paper: paper,
quantity: quantity
});
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#price").empty().append(content);
});
}
$(document).ready(function(){
fetchPrice(); // calls as the page load complete
});
Hope it helps ..........
I have a question that I am designing a webpage to process database. So the idea is,
I have a dropdown
When user click on of the options,
Directly open a new window containing another webpage
On the new page, getting the value from the dropdown on the new page for the database monitoring with $_POST
The problem is, When I click the option, it redirects to that new page but not in the form of a new window.
And how do I send the selected value to be used on the new page with
$newVal = strval($_POST['PROJECT_NAME']);
My code is,
<script>
$(function(){
$('#cd-dropdown').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = "monitorIndex.php"; // redirect
}
return false;
});
});
</script>
And the markups:
$projectParse = oci_parse($conn, 'SELECT DISTINCT PROJECT_NAME FROM MASTER_DRAWING '
. 'ORDER BY PROJECT_NAME ASC');
oci_execute($projectParse);
echo '<select name="cd-dropdown "id="cd-dropdown" class="cd-select">';
echo '<OPTION VALUE="">PROJECT SELECT</OPTION>';
while($row = oci_fetch_array($projectParse,OCI_ASSOC)){
$projectName = $row ['PROJECT_NAME'];
echo "<OPTION VALUE='$projectName'>$projectName</OPTION>";
}
echo '</select>';
Try this one.
$('#cd-dropdown').change(function(){
var id = $(this).val();
window.location = 'monitorIndex.php?id=' + id;
});
Try the below code
$('#cd-dropdown').change(function(){
var id = $(this).val();
$.ajax({
type: "POST",
url: "monitorIndex.php",
data: { PROJECT_NAME: id }
})
.done(function( msg ) {
var myWindow = window.open("", "MsgWindow", "width=800, height=800");
myWindow.document.write(msg );
});
});
This method should take you to new window with ProjectName in URL.
$('#dropdown').change(function(){
var id = $(this).val();
window.open ('monitorIndex.php?id=' + id ,'_blank');
});
Or another way is if you are using HTML5 , you can use local storage,
You can basically keep the value on client side localstorage and can access it on any other page.
// Store
localStorage.setItem("projectname", "abc");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("projectname");
I have three dropdowns. Based on the option selected in first dropdown i am populating the second dropdown using javascript.
First dropdown
<select id="continent" onchange="secondMenu(this,'country')" >
<option value="1">Asia</option>
<option value="2">Europe</option
</select>
Second dropdown
<select id="country" >
</select>
Third dropdown
<select id="population" >
</select>
My script
<script>
function secondMenu(ddl1,ddl2){
var as=new Array('Japan','China');
var eu=new Array('Germany','France');
switch (ddl1.value) {
case 1:
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < as.length; i++) {
createOption(document.getElementById(ddl2), as[i], as[i]);
}
break;
case 2:
document.getElementById(ddl2).options.length = 0;
for (i = 0; i < eu.length; i++) {
createOption(document.getElementById(ddl2), eu[i], eu[i]);
}
break;
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
</script>
Now based on the option selected in second dropdown i want to run a mysql query and populate the third dropdown. Any help on how to go about populating the third dropdown.
Use AJAX to send a request to your server and run mysql query. Assuming, you are not using JQuery, pure AJAX looks something like this:
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = xmlhttp.responseText;
//populating your select
}
}
xmlhttp.open("GET", "yourmethodpath", true);
xmlhttp.send();
}
Use Ajax, I do something very similar in one of my projects, so heres an example:
$('#product_series_text', $('#product_form')).change(function() {
var $series = $(this).val();
// Ajax request to get an updated list of product models
$.getJSON(
"<?php echo url::site('product/get_model_like_series'); ?>",
{ series: $series },
function(data) {
$("#product_model",
$('#product_form')).form_utils('replaceOptions', data);
});
});
Theres a lot of jQuery there, but the idea is to have an eventlistener for a change in one dropdown, then fire off an Ajax query (which polls the database and sends back a Json list of results), which then create a dropdown list for us (just the options are changed as the dropdown list already exists)