I'm wanting to have a dropdown on my form, the options will be titles to content in my database, I want the content to show in a ckeditor when delected.
I'm looking to do something like the below with jquery and need a little help.
if 'dropdown' value is not 'please select'
CKeditor value equals php variable from database.
end statement
I'm fairly happy getting the variables in php so just need some jquery to change the ckeditor value dependant on the dropdown not being defaulted.
Hope this makes sense and thanks in advance for any responses.
html:
<select name="select" id="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>
jQuery dont forget to include the jquery file
$(document).ready(function(){
$('#select').change(function() {
var option = $(this).val();
$.get('select.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});
your php file (select.php)
if(!empty($_GET['select'])) {
//call database and bring back the content for this selection and echo it
}
First you would need to populate the "option" elements of your select box using php, which I believe you said you are comfortable with.
Then, using jQuery:
$(document).ready(function(){
$('#myCKEditorTextArea').text($('#mySelectBox').val());
});
for pre-population on page load, or:
$('#mySelectBox').change(function(){
$('#myCKEditorTextArea').text($(this).val());
});
for population when the user changes the select box value.
Related
I need to run a jquery function if a certain dropdown option is selected.
<select name=dropdown size=1>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
I have the commands in the function ready, Im just not sure on how to make it so if option 2 is currently active in the dropdown, then run the function.
(dropdown doesnt have a submit button, i want it ran when the user highlights the option)
Try this demo http://jsfiddle.net/JGp9e/
This will help, have a nice one!
code
$('select[name="dropdown"]').change(function(){
if ($(this).val() == "2"){
alert("call the do something function on option 2");
}
});
HTML
<select name="dropdown" size=1>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
use
$("#idofselectbox").change(function(){
// your code here
});
hope this helps....
Try this one, Demo on JsFiddle
$('select[name="dropdown"]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
alert($(this).val());
});
});
You need to use change function
$('select[name=dropdown]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
if($(this).val()==2){
//do what u want here
}//u can check your desired value here
});
});
I think you want this.
A simple way can be as following:
<select name="select" id="select" onChange="window.location = this.value">
<option value="/en">English</option>
<option value="/ps">Pashto</option>
</select>
I have custom registration system based on url parameters.
Step1: I have some buttons and when you click one of the buttons it will pass value to next page, where i'm able to get value by using <?php echo $_GET['step1'];?> (this works fine)
Step2: I want to use just two select boxes (don't want to use form here) and on <a> click I want to pass that selection to url.
Here is my code:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
So here is what I want to pass to the next page:
http://domain/step1/step2/step3?parameterfromstep1=something&gender=male&color=red
How should I make it? Should I use php on a button click or jquery?
Thanks
<a id="next" href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
use below code
$('#next').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var gender = $('[name="gender"]').val();
var color = $('[name="color"]').val();
if( gender && color ){
window.location.href = url+'?&'+gender+color;
}
});
Well, this is maybe not the best or most beautiful approuch but i think the code below will work for you:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Next
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on('click', '#nextButton',function( event ) {
// Stop default action
event.preventDefault();
window.location.href = $(this).attr('href') + '&gender='+$('select[name="gender"] option:selected').text()
+ '&color='+$('select[name="color"] option:selected').text();
});
</script>
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
My code reads 2 data from the database, and if those data are specific value, then it should remove values 2,3,4,5,6,7,8 from the select called smjer. Values from database are read in external .php script, and then sent back to web page using GET. My problem is next: In one specific case, when the second select in code is set to 3, then code should remove only 2nd and 3rd value from select smjer. I've done this with jQuery,and it works ,but my problem is that when i change value of other select, for example, from 2, I select value 3, nothing happens, so I have to refresh the page, so my changes would apply.
Selects look like this:
<select name="smjer" class="smjer">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
Second select:
<select name="godina" class="upis">
<option value="1" >1.</option>
<option value="2" >2.</option>
<option value="3">3.</option>
</select>
And the code for removal:
<?php }
if(($_GET['program1'])=='1'&&($_GET['stupanj_spreme1']=='2'))
{?>
<script>
$(document).ready(function(e) {
var ary=[2,3,4,5,6,7,8];
var provjera=$('.upis').val();
if(provjera=='3')
{
var ary=[2,3];
}
$('[name=smjer] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);
}).remove();
});
</script>
<?php } ?>
I have been reading on net that something like this should be done with AJAX, but I don't know anything about AJAX, an I would like to avoid it. Tnx in advance.
Instead of running your javascript once onready, bind it to the change event of the select in question:
$(document).ready(function(e) {
// When the value of the select changes, run this:
$('.upis').change(function(){
var ary=[2,3,4,5,6,7,8];
var provjera=$('.upis').val();
if(provjera=='3')
{
var ary=[2,3];
}
$('[name=smjer] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);
}).remove();
});
});
Also, best practice: if you don't want "upis" to EVER apply to another element on this page, consider using id instead of class.
Using smarty, take a look at the code below:
<select name="unitSelect" class="uniForm" id="unitSelect" style="width:1250px;" onchange="location.href='{$ABS_MANAGER_URL}/managerEditUnit.php?unit_id={$set[i].id}'; return false">
<option value="0" selected="selected">Select Unit</option>
{section name=i loop=$set}
<option value="{$set[i].id}" >{$set[i].unitName}</option>
{/section}
</select>
What I want, is for the value in the options to load into the select onchange"" call, for the GET variable... I can't figure out how to do this with javascript...any ideas anyone?
Thanks.
UPDATE
It wasn't easy, but between a few of your comments I got one working, thanks all:
<script type="text/javascript">
function viewUnit(value) {
var url = "managerEditUnit.php?unit_id=";
url += value;
document.location.href=url;
}
</script>
Here is an example:
<select onchange="alert(this.options[this.selectedIndex].value)">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
EDIT:
Sorry for the duplicate.
If you want to use it with a function:
function yourfunction(value) {
alert(value);
}
And ofcourse change alert in the above HTML to yourfunction.
You could get the value in the select object by doing this in the onchange event:
onchange="alert(this.options[this.selectedIndex]"
Since you can get that value, then you can dynamically build up your GET request. Some like this:
onchange="document.location.href='somepage.php?id=' this.options[this.selectedIndex];"
jQuery makes it even easier, you can just use:
onchange="alert($(this).val())"
This should do it:
<select onchange="yourfunction(this.options[this.selectedIndex].value);">
I could suggest you to use following for getting the value when select an option from dropdownlist -->
this.value
moving to your javascript means -->
onchange="JavaScript:userDefinedFunction(this.value);"
eg::
select name='state' onchange="JavaScript:userDefinedFunction(this.value);"