my code is as follows
and m getting the value from javascript
<script type="text/javascript">
function show(desig){
document.getElementById("designation").value=desig;
}
</script>
<select id="designation" name="designation">
<?php
while($row_address=mysql_fetch_array($loc))
{
<option value="" selected="selected"><?=$row_address['location']?></option>
<?php }?>
</select>
but m not able to find the solution to tick that particular value obtained from javascript
in dropdown
I tested your code tested a simplified version of your code and it works fine. The one thing to note is that you must give it a value that does exist as an option.
Here is the code i used in full:
<!DOCTYPE html>
<html>
<body>
<select id="designation" name="designation">
<option value="some value" selected="selected">some text</option>
<option value="some value 2" selected="selected">some other text</option>
</select>
</body>
</html>
<script type="text/javascript">
function show(desig){
document.getElementById("designation").value=desig;
}
show('some value 2');
</script>
Note that if I called show('blah') it would not have worked since that isn't a valid option value.
Edit: your php code seems to have a few syntax issues and you also do not specify a value= property other than an empty string - which is probably a big part of why it isn't working. Try
<?php
while($row_address=mysql_fetch_array($loc)) {
$location = $row_address['location'];
echo "<option value='$location'>$location</option>";
}
?>
Related
I am working on a project where I am stuck at a point right now. I need to change the value of a DIV live on select of the dropdown using jQuery.
Example:
I want this:-
<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
When I will select option 1 the value will be displayed in place of 0 in DIV live. The problem is that as this select value fetches data from the database I am not understanding how to do it.
Example:
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
<?php } ?>
</select>
jQuery that I used currently:-
$(document).ready(function(){
$("#pln").click(function(){
$("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
});
});
This jquery is changing the value currently but I am getting only the first value of the database i.e., 10. When I choose different option it still displays the first value from the database i.e., 10 while it should actually display the second value that is 20. Please help me. FIDDLE will be appreciated.
click is a wrong event for selection box
you can utilize change event for your result.
$(document).ready(function(){
$("#pln").change(function(){
$("#chpln").text("Plan: "+$(this).val()+" secs");
});
});
For Dropdown, click(function() is not applicable. Use change(function().
I gave you 2 way. Use any one.
I) Method - 1 (Using Ajax)
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
<?php echo $ac_fetch['adclk_clicks']; ?> clicks
</option>
<?php } ?>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
var selectBoxClicks = $('.select-box').val();
$.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
$('#chpln').html(result);
}});
});
</script>
Create a new page, namely AjaxShowClickValue.php.
AjaxShowClickValue.php (Make Sure, if you changing page name here. Then, change in <script></script> tag too. Both are related.)
<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>
II) Method - 2
<select name="" class='select-box'>
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
$("#chpln").text("Clicks: "+$(this).val()+" clicks");
});
</script>
use jQuery Ajax for making request to the php file..
and use on .change() rather than .click() for changing the dropdown value..
the code will be placed in JS file which make ajax call to the php file on your server..
The php file will takes some params (if any) and perform select query to the databases and return result in response.. in php use json_encode(data) for that..
These examples may also help:
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
You will find many other examples - Just Google It and understand the key concept!
Hope this helps.
I'm trying to make a dropdown in HTML, but I want to have it's default value to be determined by the value of a PHP variable. I wanted to do it with JavaScript, but I end up with the famous "Uncaught ReferenceError: $ is not defined" error :/.
PHP:
while(list($ArtikelID, $Type) = mysql_fetch_array($result))
{
$arid = $ArtikelID;
$te = $Type;
}
HTML + JS:
<form name="send" method="post" action="editartticlesdef.php">
articlenumber: </br>
<input readonly="readonly" name="ArticleID" value=<?php echo $arid ?>></br>
Type: </br>
<select name="Type">
<option value="Article">Article</option>
<option value="Code">Code</option>
<option value="News">News</option>
<option value="Project">Project</option>
</select></br>
<script>
document.getElementById("Type").selectedIndex = <?php echo '$te'; ?>;
</script>
</form>
I tried to place the script on other places on the page but had no success :/. I suspect the variable falls outside the scope, but I don't know how to get it back in :/.
It should be -
<select name="Type" id="Type">
And
document.getElementById("Type").selectedIndex = '<?php echo $te; ?>';
Provided $te is an integer between 0 and 3, then you need to:
Give your select an id attribute:
<select name="Type" id="Type">
<option value="Article">Article</option>
<option value="Code">Code</option>
<option value="News">News</option>
<option value="Project">Project</option>
</select>
remove the quotes areound the php variable itsself and place them in the html:
<script>
document.getElementById("Type").selectedIndex = "<?php echo $te; ?>";
</script>
Sorry for not answering the question, but you should not use mysql_, it's deprecated and unsafe (See PHP Manual). Use MySQLi or PDO.
I have an HTML table that is generated from php. I utilize javascript to do something when someone selects a particular answer in a dropdown. The part of the table I care about is here:
<td style="display:none;">
<?= $lineID ?>
<value="<?= $lineID ?>"></td>
<td>
<?= $resolution ?><br>
<value="<?= $resolution ?>">
<select name="resolution[]" class="inputbox" onchange="submitResolution(this.value)">
<option value="null">
</option>
<option value="nightmareAlias.php">ADD NEW ALIAS</option>
<option value="NO PROBLEM">NO PROBLEM</option>
</td>
and here's the script that is actioned when someone selects "ADD NEW ALIAS"
<script>
function submitResolution(str) {
console.log(str);
if (str =="nightmareAlias.php") {
document.getElementById("txtHint").innerHTML="";
$("#txtHint").load(str);
return;
}
}
</script>
Right now - this works just fine. When someone selects ADD NEW ALIAS, they are redirected to the nightmareAlias.php page. When that page loads, I need to find a way to not just submit(this.value), but to almost submit the lineID of the line on the table that the person is actioning.
How do I pass this value along as well?
<select name="resolution[]" class="inputbox" data-lineid="<?= $lineID ?>" onchange="submitResolution(this)">
<option value=""></option>
<option value="nightmareAlias.php">ADD NEW ALIAS</option>
<option value="NO PROBLEM">NO PROBLEM</option>
</select>
You need to make the line ID available, I've included it as an attribute in the select tag. Then pass this as a parameter rather than this.value so that you can access the object in its entirety.
<script>
function submitResolution(sel) {
console.log(sel);
if (sel.value === "nightmareAlias.php") {
document.getElementById("txtHint").innerHTML="";
$("#txtHint").load(sel.value + '?lineID=' + $(sel).data('lineid'));
return;
}
}
</script>
Then add a query parameter to the URL. You will need to handle a GET request for lineID within nightmareAlias.php.
Note the use of === rather than ==, it would also be worth separating your JavaScript and HTML more. For what you're trying to do here I would have probably used .change()
Re-Edited:
I went over to W3schools and played around in there javascript editor window to see what was going on. Here is a shorter script.
<html>
<body>
<script type="text/javascript">
var eType = document.getElementById("Type")
</script>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
document.write(eType);
</script>
</body>
</html>
I did what ThiefMaster suggested on how to get the element by not using the .text or .value but as you can see if you run this code I still get a null at this step of the process. From what I can see and many suggestions I am doing this correctly. I know I must be missing something. Can anyone see it?
You're trying to get the element before you've actually put it on the page. Fix the order, and don't use document.write.
<html>
<body>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
var eType = document.getElementById("Type")
document.body.appendChild(document.createTextNode(eType));
</script>
</body>
</html>
Your second code block is almost correct; you need to use the select element itself instead of its (non-existent) value:
var elem = document.getElementById("Type");
var type = elem.options[elem.selectedIndex].value;
Demo: http://jsfiddle.net/ThiefMaster/nw3nN/
If you had jQuery available you could drastically reduce the amount of code necessary:
var type = $('#Type').val();
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>