I have a while loop in a form
<?php
<select>
while($select = $sql->fetchObject())
{
$name=$select->name;
$alt = $select->alt;
echo "<option value='".$alt."'>".$name."</option>";
}
</select>
?>
<div id='new_name'>Add Name</div>
I would like to some how use jquery to dynamically add a new select option (with the same options from the while loop) on click, how would I do such a thing if theres php?
Thanks a bunch!
The PHP code is run server-side, while jQuery is JavaScript and thus run client-side, so the PHP-code will not affect jQuery. What is returned from the server is just a pure HTML element. Therefor you can use jQuery's .clone() to make a copy of the select.
$('select').clone().appendTo('form');
Since you don't specify what you want to click on to add the copied select, I will just make an example of how it might look:
$("#my-id-to-click-on").click(function(){
$('select').clone().appendTo('form');
});
Note Since I don't know anything about classes or ID's used on your forms and inputs, these examples use very general selectors and if you have multiple forms or multiple selects in your DOM, this will become a problem. I suggest you add ID's or classes to your forms and selects, and use those to select on instead. That way it will be more bullet proof.
You might also want to add an if-statement to make sure that the select is only copied the first time you click. If that is how you want it to behave.
You can also:
Generate the selects with PHP, disable and hide them, then on click enable and show.
Set a javascript variable with all the data (name-alt pairs) using PHP and json_encode, and then on click use the variable contents to generate HTML selects with javascript.
Related
I currently have a <select> element populated by data from a DB (See screenshot below)
The PHP that renders it is simple:
print "<select>";
print "<option name=\"$wo_num\" value=\"$wo_num\">$order_date: #$wo_num - $client ($problem)</option>";
print "</select>";
The <select> element looks like this currently:
http://www.captainscall.site11.com/temp_stuff/select.png
I want to know the best approach to making my <select> element displayed more like a table than straight lines of data while maintaining the ability to 'choose and option'
I have tried simply embedding a <table> inside the <select> to no avail.
I don't necessarily need a <table>; I'm just going for a better aesthetic for the user.
You might need to rethink what you are trying to do here. Clearly there is allot of data in the select element, which would be better separated from the actual select option you are trying to give the user- A radio is one option already suggested.
The bottom line is that the input should be short and concise and the data should be displayed via HTML. This not only opens up the door for better styling via CSS but it would be allot easier for your users to read and understand what they are actually selecting.
Use a <table> and put a radio button in one of the columns instead of using a select element.
how about this:
<select size="20" name="namehere" multiple>
set the size to the be the same as the number of records. Use CSS to style the multiple select box. Note this approach however will allow multiple selections.
In every column there should be a print option. When a particular option is clicked, it will be printed in a certain design or format, but not all the data at a time in PHP MySQL. If anyone knows how to do this, please help me.
As per I understand , you want print button or a link for print. So use this two method
<input type="button" onClick="javascript_print_function">Print
Print
One way would be to have the "print" button invoke a new window which contains just the single row of data, then print that. Maybe that can call print() onload.
Trying to have all the print buttons on one page, and have it select a one from a selection of special print.css file is probably possible, but I have never seen this being done, and sounds as if it could get messy if you have a variety of pages to cater for.
Google multiple print css files suggests some ways of doing this, but I suspect it would be easier to pull off using divs instead of tables.
I am trying to get three different bits of php to work in order and work in a way that is easy for the user. This is the some of the code I have already that gets data from a database. I have a similar statement to this in a drop down that I need to populate using the answer from this first bit of code when it changes I also need to take the answers of both of these and put them into another sql statement that will display a set of results. I know I need to use something like jquery or ajax but I am unsure of how to use it in WordPress to get the desired effect.
<select name="raceTrack2" onchange="">
<?php
$postids = $wpdb->get_col("SELECT trackName FROM " . $trackTableName . ";");
foreach ($postids as $value)
{
echo '<option>' . $value . '</option>' ;
}
?>
</select>
Any help would be appreciated
There are several ways to skin this cat. Since you mentioned jQuery/Ajax I will guide you through the high level steps using those technologies:
Write a javascript function that makes an Ajax call to a PHP script that returns the data in JSON format to populate your 2nd dropdown with. Inside your ajax() method, upon successful completion of the call, parse the JSON data and construct HTML code for the values for your 2nd dropdown. Then using jQuery selectors, select your 2nd dropdown and set the HTML contents of it using html() method.
Modify the onchange() event handler for your 1st dropdown to call the JS function created in Step 1.
Write another javascript function that grabs the selected value from your 1st dropdown and that from your 2nd dropdown. Then make another Ajax call to a PHP script that takes those two values as input and does whatever it needs to do with those values.
Lastly, modify the onchange() event handler for your 2nd dropdown to call the JS function created in Step 3.
At a high level, this should do it. As I said, there are many ways to skin this cat. This is probably the simplest way to go and does not require a post-back/round-trip to your server.
Hey guys, there is a form where the user select some of his friends and I'm curious on how I can implement a list that searches simultaneously while the user is typing a friend's name and when he selects the name the name is written in the text box(jQuery). And if the user wants to select more than one friend, when I'm inserting the names in the database, how can I separate the names that are written in one input field?
You should take a look at the jquery auto-complete plugin:
http://docs.jquery.com/Plugins/autocomplete
Also, you could separate the names using commas.
Are you looking to write your own plugin or would you like to use an existing one?
If you want something ready made, here are a few examples
if you want something extremely light, only 6kb packed, this one would be the best choice
Autosuggest jQuery Plugin
Older one but still good
Tokenizing Autocomplete
This what already asked here on this site.
Facebook style JQuery autocomplete plugin
The accepted answer cited this jQuery code.
https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin
http://jqueryui.com/demos/autocomplete/
Although think twice about including the whole jquery ui library for this one plugin
I've implemented this a couple of times, it is not that difficult to achieve decent results and the basic idea that I used was...
1) create an input box.
2) create a div positioned directly underneath the input box.
3) create a jquery keypress handler. if there are more than x characters typed, ajax request.
4) loop through the results, and if they exist, append result divs to the result box.
5) show the result box.
I can dig up some example code if you would like. Not sure what you are talking about with the select multiple, but you could keep a variable of selected, and change the color of the result div when it is clicked on, this way many results can be selected and then processed later.
I have a form which has two inputs. The first input allows a user to select two values (either 1 or 2). My second input allows the user to select a range of available dates (which is populated from a separate php/mysql query).
I would like to achieve the following:
At page load, the second box is simply 'non-clickable'. The user must make a selection in part 1.
Once a user makes a selection in box 1, the values of part 2 are dynamically created accordingly as the value selected from part 1 (either 1 or 2) is used in a php pdo prepared statement into a mysql database.
is this possible?
Yes, it's very achievable using jQuery . When the page is ready, you'd disable the second input, and bind it being enabled to the first one being filled out. Then you'd use the jquery ajax function to get the data for the next one and populate it that way.
You should probably read a basic jQuery tutorial, then read the documentation for the specific functions like ajax().
Trust me, you'll be really glad to know jQuery as it comes in handy for all types of things, especially situations like these where you need to setup somewhat complex dynamic forms with ajax calls to your server along the way.
Yes you want to use ajax. I would advice you to take a look at jquery.
Jquery would help you to work around doing the ajax calls and manipulating elements in your page.
Your example should fairly simple to implement using the library.
window.onload = function() {
var input1 = document.getElementById('input1'),
input2 = document.getElementById('input2');
input2.disabled = true;
input1.onchange = function() {
input2.disabled = false;
// Build whatever you want here
input2.value = 'whatever';
}
}