I need help here.. I want to create some form for submit data to db. I have no problem with the form and inserting data to db. but I stuck when I want to add new value to db table column. I have create 1 select button and on the select button value list from db column (e.g category). picture attached.
Top: select the value from db and input disable
bottom: select create new and input enable to create new value
Sorry stackoverflow does not allow me to attach img. Here is the link
http://dl.dropbox.com/u/121852/form-elements.jpg
Hope you guys are clear and can help me.. thanks in advance!
If I'm getting you correctly - you want an final option on the select's options list with "create new one"?
Than you should give it a unique value like "createcategory" and put onchange event on that select box
<select name="..." onchange="javascript:checkSelect(this.value);">
As you can see - I called the javascript function checkSelect that you should create with somethis like that:
function checkSelect(val)
{
if(val == "createcategory")
document.getElementById('the_input_id').disabled = false;
else
document.getElementById('the_input_id').disabled = true;
}
What I did in this function is to check on every change of the select-box if the value of the selected option is "createcategory", and if so - I'm setting the text input disabled to false, so it would work, otherwise - I'm setting it again to true
Related
Ok, so I am relatively new to php, javascript, and jquery. Here is what I have going.
I have a table that is created when the page opens that is filled up using a for from a database query (just a simple select *). The problem right now is the final <td> is a dropdown menu that the use can change (changing the item from viewed to unviewed and back). So, what i want to do is when the user selects either value in the drop down menu, i want to get the second column value (the ID value in my database) of that row and update the viewed status. My problem is I am not sure how to use JQuery to get the ID value into my update statement for the database. Here is what I have so far:
<script language="Javascript">
//cache the select and span elements
var table = document.getElementById('leads');
var mySelect = document.getElementById("mySelect");
//when it changes
mySelect.onchange = function() {
var row = this.parentNode.parentNode;
//change the tag innerHTML checking the selected value of the select
if (mySelect == "1") {
var id = table.rows[row.rowIndex].cells[1].innerHTML;
//HOW DO I GET THIS ID INTO A SELECT STATEMENT THAT CAN EXECUTED BY A PHP FUNCTION
}
}
</script>
EDIT:
Here is an attempt so far... Inside my if statement I added the following line:
$.get("updateToNew.php", {lid: id});
and here is the php (you can assume the connection to the database and everything is correct inside this file):
$query = mysql_query("UPDATE myTable SET new=1 WHERE ID=".$_GET['lid']) or die(mysql_error());
This does not throw any errors, but does not update the database. Also, I noticed as I was troubleshooting that the script only runs the first time the drop down menu is changed, any time after that it does nothing.
You would have to write an XmlHttpRequest to fulfill this action.
See what suits you best: What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get
I am building a Web App.
At some point a user needs to input data to a form.
This form has several text fields and DropDownLists.
One of the DDLs is dependent on its previous DDL.
What happens is that when the user selects a value from the first DDL, the second DDL should load data from the database that are related to the selected value of the first DDL.
Up to this point I've implemented only PHP and JS, ( no AJAX, jQuery or anything else ) for handling most of my problems.
I'd like to know how to populate the 2nd DDL from the database after an item on the first DDL was selected.
Any help would be appreciated. Thank you!
Here's an example:
http://tutorialzine.com/2011/11/chained-ajax-selects-jquery/
Google is your friend :)
Ajax is your best bet.
this will help
If the data in the second drop-down is dependent on the data in the first, then you will have to load the values of the second dropdown into a javascript object, like so:
// Given the options in the first dropdown are: "foo", "bar", and "baz"
var secondData = {
foo: ['lorem', 'ipsum'],
bar: [1,2,3],
baz: []
}
Add a 'change' event to the first dropdown, and given the value of that dropdown, load the contents of the second dropdown with the values contained in the secondData object.
If you're comfortable using jQuery (which I would highly recommend), something like this should do:
$("#dropdown").on("change", function() {//change [dropdown] to the actual ID of your dropdown
var selected=$(this).find("option:selected").val();//assuming your dropdown has a value to send, otherwise use text()
$.get("options.php?selected="+selected, function(data) {
var options=data.split("\n");
var newSelectHTML="<select name=\"whatever\">\n";
for (var i=0;i<options.length;i++) {
newSelectHTML+="<option>"+options[i]+"</option>";
}
newSelectHTML+="</select>";
$("#form").append(newSelectHTML);//again, change [form] to the correct ID.
}
}
This code simply gets the value of the currently selected option of the DDL with the ID "dropdown" (change as necessary) and sends it to PHP file options.php in $_GET["selected"];. Assuming that file then outputs a list of options separated by a new line (\n). The JavaScript then takes that, splits it by line, loops through the options, and creates the HTML for a new DDL and appends that to element ID form. No error handling is there, but that, as they say, is an exercise for the reader. Whatever is returned is in the variable data.
I have a form and I'm using the jQuery Table AddRow plugin to dynamically add rows to a table, the problem is I'm trying to when you select a Menu Item that the menu item goes into the text box to the left of it. It works on the first row but I can't figure out how to get it to work with rows that are added via the plugin.
You can see my code in action here: http://jsfiddle.net/VXNzd/
Here is the jQuery code:
// This moves the select box text to the input box
$('#mnu_names').change(function() {
var mnuProduct = $("#mnu_names").find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$('#topping_name').attr('value', mnuCleanProduct[0]);
});
// This code is needed to add and delete rows with the plugin
$(".toppings_add").btnAddRow({
It may be easier to see what I'm talking about by visiting the jsfiddle link up top. When it loads use the select box to and select something, It will put that info over into the text box without the price info. Add a new row and try it again. Won't work, can't figure out how to make it work.
The problem was as said by tomhallam your ID's are not unique. Also $.change() does not work on blocks added after you ran that. You should instead use $.on('change',...).
I updated your code and posted it on http://jsfiddle.net/PDPbn/5/.
The modified jquery-code goes as follows:
$(document).on('change','.mnu_names',function() {
var mnuProduct = $(this).find(':selected').text();
var mnuCleanProduct = mnuProduct.split(' - ');
$(this).parentsUntil('tbody').find('.topping_name').attr('value', mnuCleanProduct[0]);
});
When a user adds an event, they need to be able to add Bands from the "bands" table to the event. It's already all set up with the HABTM, and I have it working when I hard-code multiple select boxes to the page.
The problem is - I'd like to just have one select box, then an "add another band" button - which would add another select input with the list of bands - and so on - as many as they'd like.
I found this post: Add and remove form fields in Cakephp which explains how to add a field dynamically... my issue is, the list of bands is huge, and changes regularly, so I can't imagine this working for me.
Any ideas on the best way to go about this? - Adding a select input dynamically that's populated with a list of bands from my database? Ajax maybe? (I've no idea how to do ajax with cake yet) Ajax seems ok, but do I really want to pull a list of bands every time the user clicks the "add a band" button? Maybe that's ok?
Any help/direction is greatly appreciated. Code example would be GREAT, but if nothing else, a nudge in the right direction would be very helpful.
You could use a single select input with an 'add band' button. When the user hits 'add band', catch the event with javascript, copy the selected band to a list (visually), and add the id to a hidden input (to be used when the form is submitted). jQuery/CakePHP example below.
<ul id='band_list'></ul>
<?php echo $form->create('Event', array('id'=>'event_form'));?>
<?php echo $form->input('band_ids', array('type'=>'hidden', 'id'=>'band_ids')); ?>
<?php echo $form->input('bands', array('type'=>'select', 'options'=>$bands, 'id'=>'bands_selector')); ?>
<button id='add_band'>Add Band</button>
<script type='text/javascript'>
var band_count = 0;
$('#add_band').click(function(event) {
event.preventDefault();
$('<li>' + $('#bands_selector option:selected').text() + '</li>').appendTo('#band_list');
$('<input type="hidden" name="data[Band][Band]['+band_count.toString()+']" value="'+$("#bands_selector option:selected").val()+'">').appendTo('#event_form');
band_count++;
});
</script>
Basically my webpage has two comboboxes. First combo box is populated with data comming from MySql. There is a button Add to the side of combo box and when user selectes a item in combo box 1 , clicks on the Add button, that item should get added to the second combo box that is in the same page. Can anyone please tell me how to do this in javascript? or anything?
By the way my web pages are PHP pages.
Thanks.
Hey. You could use a Javascript function like this:
function moveSelectedOption() {
// Fetch references to the <select> elements.
var origin = document.getElementById('origin_select');
var target = document.getElementById('target_select');
// Fetch the selected option and clone it.
var option = origin.options[origin.selectedIndex];
var copy = option.cloneNode(true);
// Add the clone to the target element.
target.add(copy, null);
}
Then you just add a call to it to the button's onclick event.
<button onclick="moveSelectedOption()">Add</button>
If you want to move it rather than copy it, remove the cloneNode line and just add the original option.