Basically I have two forms
The first form Is a simple select box which submits it's value to be processed and inserted into a database (mysql)
However on the same page I have a second form with a select box which will be auto populated with the results from the database(ajax / php), depending on which option was chosen from the first forms select box
So anyway I need some way to store the first select box's chosen value in a variable without submitting the form
You can try.
$('#firstForm').submit(function(){
var firstValue = $('#firstForm select').val()
//do your ajax call.
return false //then return false or
//preventDefault should keep the form from submitting
})
Related
Programming in Bootstrap and PHP I am trying to create a dynamic form which has the following.
User uses a dropdown to select number from 1 to 10.
The page then displays x number of dropdowns.
Each dropdown is the same and displays a list of userID from a MySQL table tblUsers
Once the user makes a selection from each dropdown, it then shows a second dropdown immediately underneath showing a list of videos from a second MySQL table tblVideos. Meaning that the second dropdown is based on the results from the first.
Once all dropdowns have been selected. Submit is pressed and the results are sent as an array to the table tblVideoStored
Any ideas how the PHP and MySQL would be in a simple form..
Based on what you plan to achieve, you may want to look into combining php with ajax (Javascipt). Below are some examples that should set you on the right path
https://www.sitepoint.com/community/t/using-ajax-to-populate-dropdown-menu/4350/2
http://blog.chapagain.com.np/using-jquery-ajax-populate-selection-list/
i want to fetch the value corresponding to textbox value and the results from database show to the select box.
For eg: in a textbox i have entered "abc" now i want whatever database having abc related information come to select box.
You are looking for autcomplete functionality. You can use select2 or something similar.
Doing a search form in PHP YII in which i need to enter 2 dates field Startdate and enddate, after submitting i will be fetching all the records from table where the contacteddate falls between these start and end date.
The problem is after submitting my textbox values are vanishing. How to retain after submitting?
You could use ajax to retrieve the results, instead of the default submit, that way your filter values will not change. The default submit behavior loads(navigates) to a url, hence your values disappear.
You can use CHtml::ajaxSubmitButton() to easily implement this functionality. A sample:
echo CHtml::ajaxSubmitButton(
'AjaxSearch', // label
$url,// url that will search
array('update'=>'#resultdiv'),// the element with id 'resultdiv' will be updated with the search result
$htmlOptions
);
Let's say I have a simple form, with a select combobox and a table that has a checkbox for each row, to choose the rows you want.
Now, on the server-side, I need to associate all the items selected from the table (using the checkbox for each row), with the item selected in the combobox.
I know the value in the combobox will be submitted with the form, but how can I send all the selected elements from the table? do I have to use AJAX or something? or is it possible to do it via POST/GET?
The form needs to enclose (be an anscestor of) both the table and the combo box.
The table row checkboxes should all look like
<input type="checkbox" name="rows[]" value="ROW ID"/>
And then on the server side you'll get, in addition to the combobox value, $_POST['rows'] as an array containing the ids of the checked rows.
I have 6 select boxes (sbs), 3 to a row so two rows. The top three sbs contain a list of options that gets populated via php, data is pulled back from mysql. When an option from each box is selected I'm using jquery (via ajax) to pull back option items for the sb immediately below it and populate said sb with corresponding data. I click 'create' and the data is sent via ajax to a php script which then stores the data in a table and returns the submited dropdown data (albeit formatted) in a table below the form. So you might have something that looks like this after creating a 'combination'. Eveyrthying to the left of the colon was an option on the top row of select boxes and then you have selected options from the corresponding box below displayed to the right.
Color: Red | Capacity : 4GB | Model : ABC | EDIT
Color: Blue | Speed: 2GHZ | Capacity : 2GB | EDIT
etc.
If I want to edit the record I click edit and jquery finds the id of the edit button clicked, passes it via ajax to another php script which then returns a json object with the relevant data and this is then used to repopulate the dropdown boxes with the selected options. Everything so far works fine.
My problem is this, only the top row of sbs get one of the options selected when edit is clicked. The child options don't get selected and I can't figure out why. I can get the right options to display but can't set the selected state for whatever matching value is returned in my json object. I've been 8 hours trying to figure it out and tried various things on SOverflow and other sites, none of worked - i'm not that experienced with javascript/ajax to be honest.
Upon a successful ajax process i.e success: I am doing the following:
var jObj = $.parseJSON(html);
//parentVariations# is the select boxes in the top row where
//Color, capacity, model options are displayed.
//The trigger fires off my ajax function which is responsible for
//populating the corresponding child select box with relevant data.
$('#parentVariations1').val(jObj.groupAttr1).trigger('change');
$('#parentVariations2').val(jObj.groupAttr2).trigger('change');
$('#parentVariations3').val(jObj.groupAttr3).trigger('change');
//childVariations# is the child option box, i have the same code for each child
//box but am only showing the first one here for simplicitys sake.
//What I thought I was doing here is getting each option then if the value
//matches that held in my corresponding json object set that option to selected...
//Doesn't work :'(
$("#childVariations1 option").each(function()
{
if($(this).val() == jObj.childAttr1)
{
$("#childVariations1 option").attr('selected','selected');
}
});
Any help would be very welcome as it's driven me over the edge.
$("#childVariations1 option") is an array of all the options. You need to specify which one:
$("#childVariations1 option").eq(1).attr('selected','selected');
If your case, use a for loop and use the index for get the current position, instead of using .each. (or set up a counter)