This is just me thinkign of jazzing up a mundane input field.
Ok so we have an input element, and we have pre-propagated small db table with id , name and image name
So this is what I am thinking.
We have an input element, where user begins typing. Lets say APPL...
Drop down ( for live auto suggest pops up ) with APPLE , they select APPLE and within another div element elsewhere on the page, a image div displays apple.png
Likewise if they choose banana , similarly banana.png shows in that div .
Ok so what have we got now.
Well I have auto suggest ( live search auto complete done ) all fine and dandy.
I have input element working, and they can select as they type from suggestions.
What I cannot figure out is how, to use ( possibly ajax I suppose ) hmm .. or other method, a way of displaying an image elsewhere, that reflects the choice they made.
To make things easier.
All auto completes are the exact same as the image file name, so:
APPLE becomes apple.png
CAKE becomes cake.php
I am sure js can help here. Just not sure how. I would have thought getElementById
Anyhoo .. sometimes, asking a question may invoke a response from someone who has done something similar.
Cannot show code, as the element I want to create , doesnt exist yet.
But for simplicity sake, lets take a select box method:
<select id="fruit" name="fruit">
<option value="">Please select a Fruit</option>
<option value="apple">Apple</option>
<option value="cake">Cake</option>
</select>
Presently the Auto Suggest , Auto complete looks like this:
<div class="field"><label for="fruit">Pick a Fruit </label>
Any help appreciated...
You can do this easily with jQuery. Copy the code sample below and paste it between the body tags of an html file. Replace the "myselector" element's option values with your own. When you select an item from the drop menu, the image will dynamically change.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#myselector").change(function() { // Assign a handler.
if ($("#myselector").val() != '') {
$("#myimage").attr('src', $("#myselector").val()); // Change the image.
}
});
});
</script>
<select name="myselector" id="myselector">
<option value="">Select Image</option>
<option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option>
<option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option>
</select>
<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />
Add an image on your page:
<img src="default.jpg" id="result_image" />
When your autocomplete code fills in the text, change the image as well
document.getElementById('result_image').src = autocompleted_text + ".jpg";
Related
Is there a way to mimic the C input/select box where you have a pull down with a blank text-entry at the top? Users would either type a new value or select from the list. Has anyone figured a way to do this with PHP/Javascript? An AJAX type of solution would even be better.
I'm not sure what to call this type of box, I don't think it is a "combo box" like most people think of.
You have a few options.
Here's a quick function I threw together in jQuery that will do what you want. This option required the client have JavaScript enabled to work.
http://jsfiddle.net/QrA4N/25/
If you don't want to make JavaScript a requirement
If you want a solution without JavaScript (client side code). You are stuck with placing an input box with the same "name" as your select box next to it or after it and adding an "Other" option to your select box.
<select name="selAnimals" id="selAnimals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="guineapig">Guinea Pig</option>
<option value="">Other</option>
</select>
<input type="text" name="selAnimals_Other" id="selAnimals_Other" />
Now your PHP will have to check both $_POST["selAnimals"] and $_POST["selAnimals_Other"] to derive the correct value.
The best option is to combine the HTML above and the JavaScript above that to create a gracefully degrading solution for those with JavaScript enabled or disabled.
http://jsfiddle.net/QrA4N/26/
I added the extra HTML INPUT tags to the jsfiddle from the top of the answer and only changed 1 line of the jQuery function (makeInputSelect).
var $inp = $("#" + id + "_Other");
You can use famous Chosen library for that :)
BTW, see the second example of countries.
Suppose a form.php file, and there is "add" button, once it's clicked, a drop down list will show, to let you choose which type of input type you want. For example:
<select name="Type">
<option value="Text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
My question is, I don't know how to implement the function that, once the type is chosen, suppose checkbox, then a checkbox will shown, and could let you input the label of each checkbox, you can do this one by one.
Also I want to make this process could happen iteratively. I'm not sure if I explain clearly, it's a little bit like the google form function. Any ideas? If providing some codes would be better. Thanks!
Here is plain vanilla old school HTML/JS
<select name="Type" onchange="showformelement(this.value)">
<option value="text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
<script>
function showformelement(whichelement){
//use whichelement to embedd element in DOM
}
</script>
If you can use jQuery or similar toolkit it may be a much simpler job
I know what are you looking for, just let you know that it isn't a simple script, it will have way too many functions and will be little hard to build.
Just to start, if you search on the web for PHP and jQuery based form builders and similar other things, you will find many ready to use scripts. Well, if you don't want to search for one, the principle logic will look like following:
PS: I will explain how to develop using jQuery.
<select id="options">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
<script>
$(document).ready(function(){
$('#options').change(function(){
var optSelected = $('#options option:selected').val()
if(optSelected == 1){
// Shows up and div with Checkboex for edit
}
if(optSelected == 2){
// Shows up and div with Combobox for edit
}
if(optSelected == 3){
// Shows up and div with Textbox for edit
}
})
})
</script>
After doing that, you will need to build the options of each type...
There is too much work... look, I didn't write here your script, I just explained you how to build...
This is a huge system...you will need to know a bit of JavaScript to make one of these...
Even simpler, without needing to do any casing or conditioning, (uses jQuery).
Example: http://jsfiddle.net/SMAfA/
$(function() {
$("#type").change(function() {
type = $("option:selected", this).text();
$("#target").append("<input type="+type+">");
})
})
I have a select list like such:
<select name="taxonomy[1][]" multiple="multiple" class="form-select" id="edit-taxonomy-1" size="7">
<option value="13">Glaciers</option>
<option value="14">Lake Ice</option>
<option value="17">Permafrost</option>
<option value="16">River Ice</option>
<option value="15">Sea Ice</option>
<option value="12">Snow</option>
</select>
This list is being dynamically created and I'm not sure how to change the output display. I have seen tutorials like this: http://www.netvivs.com/convert-regular-select-into-a-drop-down-checkbox-list-using-jquery/ which convert a select into a dropdown check list. Is there a way using php,javascript,jquery, to convert the select to display as a checklist? Preferably in table form so I get 2 rows with 3 columns?
You could do it in a custom way like so:
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
$('#checkboxes tbody tr').append('<td><input type="checkbox" value="'+value+'">'+label+'</td>');
});
Or just use the plugin: http://code.google.com/p/dropdown-check-list/
Looks like the example link does it using jquery...
Just make sure you have a source to jquery.js library, as well as a source to the library that site has offered as a download.
Then just call,
$("#edit-taxonomy-1").dropdownchecklist();
I havent tried it, but thats what the tutorial says to do...
Good luck.
PS - I had a hard time trying to find the download of the actual library from that site, so here it is. http://code.google.com/p/dropdown-check-list/
I have this webpage. It has a page called "services.php". I have several buttons (made of classes), that belong to different "package" prices i offer.
I want the links that say "Select" to autofill a form in another page, or alternativly in a popup form in the page..
I don't really know how to explain it, but as short as possible:
When link is pressed autofill form (in this or other page) with the type of package they chose. Only text autofill
What you seem to be asking is 'loading' a page pre-filled with specific information, you can do this a number of ways, either by utilizing javascript (like jQuery for instance). Or using your PHP, make links that pass variables (say a flag or a reference to pre-fill the fields -- if you want a popup or next page, etc).
Your url would like like the following for the button that a user presses (button would be a simple http link):
http://mywebsite.com/prefill.php?user=bob&package=2
This would have the values bob as the user that requests it (you can reference an id for user info here as well), and package=2 to designate your package options.
Then on the prefill.php page, you would have something that checks for:
$user = $_GET['user'];
$package = $_GET['package'];
Hope that helps
This will populate form fields with whatever you pass to the autoFill() function. This would be a same page example.
<html>
<body>
<form>
<input type="text" id="packageDescription">
<input type="text" id="packagePrice">
</form>
<script>
function autoFill(packageDescription, packagePrice) {
document.getElementById('packageDescription').value = packageDescription;
document.getElementById('packagePrice').value = packagePrice;
}
</script>
Premium Package<br>
Platinum Package
</body>
</html>
You could do something like this:
<select id="packages">
<option value="package1">Package 1</option>
<option value="package2">Package 2</option>
</select>
Submit
When the link is clicked, the following javascript will fire off:
function submitPackage()
{
var package = $("#package").val();
window.open("http://your-site.com/some-script.php?package=" + package);
}
The above will open a pop up window to a page such as this:
http://your-site.com/some-script.php?package=package1
In some-script.php you will do something like this:
You selected the package: <b><?php echo $_GET['package'];?></b>.
Or:
<?php
//Put the packages in an array:
$packages = array();
$packages['package1'] = 'Package 1';
$packages['package2'] = 'Package 2';
//...
?>
<select id="package">
<?php foreach ($packages as $name => $text):?>
<? $selected = ($name == $_GET['package']) ? 'selected' : '';?>
<option value="<? php echo $name;?>" <?php echo $selected;?>>
<?php echo $text;?>
</option>
<? endforeach;?>
</select>
The above will auto select the package they selected in a dropdown box.
if i understood your problem, you want to fill some input fields with information when the user clicks on some links
i can think of 2 ways of doing this : either have the links point to a page like services.php?req=package1 (or any other url you want) and on that page generate the input fields with the information you need (set the default values in the fields with the ones you want), or, use javascript to change the values of the forms without changing the actual page (either via ajax or predefined values)
for javascript you can use the jQuery framework, it has a pretty extensive community of enthusiasts and plenty of examples to get you started with it.
an example for your case would be
$('#btn1').bind('click', function() {
$('#input1').val("value");
$('#input2').val("value2");
});
replace btn1 with the id of the first button or link you have, input1 with the id of the first input in your form, and value with the value you want
I just did this myself. My solution was with jQuery. Just assign an id to your link. The first ID in the code is the link id and the second is the id for the input element you want to populate.
Here is the script:
<script>
$(document).ready(function() {
$('#link_id').click(function() {
$('#input_id').val( $(this).text() ).keyup();
return false;
});
});
</script>
Hope it works!
I've ran several time into the same issue, so I had to write my own script doing this. It's called Autofiller and its pretty simple but does great job.
Here is an example
http://example.com/?autofiller=1&af=1&pof=package&package=package1
So basically it takes several parameters to init the script:
autofiller=1 - init AutoFiller
af=1 - Autofill after page is loaded
pof=package - Find the parent form element of the select with name attribute package. Works also with input form elements.
package=package1 - Will set the select element's value to package1
Hope it helps you! :)
I am working with php and want to have a page that has a drop down on top. elements in the drop down have some id associated with them. Underneath the drop down there is a text box and underneath the text box some images. so like the following
<drop down box>
______________
<textbox _content_ loaded via ajax onchange of drop down box>
<some images loaded via ajax onchange of drop down box>
I want to query the DB everytime the drop down menu is changed and populate the text box with info from DB and load the images that were fetched from the DB.
is there some ajax library that can be used for this? I assume there will be a php page to execute the query and send the result back to the main page?
can you guys tell me some examples/tutorials I should be looking at.
Short answer: jQuery.
Here's an example of how to deal with dropdown controls in jQuery
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
The easiest way is using Jquery. For example you could do something like this.
$('#dropdown').change(function(){ //listen for the change event of #dropdown box
$.get('example.com/script.php',
{$('#dropdown').val()}, //send the value of dropdown as GET parameter 'val'
function(data){
$('#content').html(data.content);
//first clear the image area:
$('#imgs').empty();
//Insert all the images
for(x in data.imgs){
$('#imgs').append('<img src="'+data.imgs[x]+'">');
}
}, 'json');
});
That is supposing your HTML looks something like this:
<select id='dropdown'>
<option value='1'>Option1</option>
<option value='2'>Option2 etc.</option>
</select>
<div id='content'>I contain the content, I might as well be a textarea or something else, as long is my id='content'</div>
<div id='imgs'><img src='iContainImgs.jpg'></div>
Then on the server side you create a Json object with the following structure:
content: "all the content",
imgs: array('img1.jpg', 'img2.jpg', 'etc')
You might also want to look at YUI's version on the same thing. The rich autocompletes that you can create there are pretty cool as well.
http://developer.yahoo.com/yui/autocomplete/
If you need to retrieve more complex data, You will have to retrieve json data instead of plain html.
For images you dont need ajax, just create an image tag and the image will be retrieved. You cant transmit files using ajax.
One way you could do this is to use the prototype library.
Assuming you have a page to output the HTML content for the textbox and a page that outputs the image or images, you would do something like the following:
<script type="text/javascript" src="javascript/prototype.js">
<script type="text/javascript">
function select_changed() {
// get the selected value
var parms = 'selection='+$F('selectbox');
// request the textbox value and pop it into the textbox
new Ajax.Updater(
'textbox',
'http://example.com/textbox_handler.php',
{
method: 'post',
parameters: parms
});
// request the image(s) and pop them into the image container div
new Ajax.Updater(
'image_container',
'http://example.com/images_handler.php',
{
method: 'post',
parameters: parms
});
}
</script>
<select id="select" onChange="javascript:select_changed();">
<option value="1">First Value</option>
<option value="2">Second Value</option>
</select>
<textarea name="textbox"></textarea>
<div id="image_container"></div>