Dynamically add pre populated forms from database using ajax and jquery - php

Ive been researching online for a couple days and I cant seem to find out the answer to my question. I would like to append a div or insert a pre populated form from my database depending on a drop down menu (selecting from a row in my DB). Once you press a button it will add the form field to a div or area above. Any suggestions? How should I tackle this? Im extremely new to Jquery and Ajax but know PHP fairly well.

One way is to populate the fields when the page is being loaded. (pass the values on to your html page with "value=<$php echo $someData %>"
if you want to load the data without refreshing the page each time, I'd suggest you make a different page that will load the data from the database through POST-requests and retrieve the data as JSON, so you can parse it with Javascript and update the fields accordingly.
updating the fields can be done like so:
json = YourJSONData;
$('.some-class').val(json['someData']); // if populating a form field
$('.some-other-class').html(json['someOtherData'); // if populating a div or other DOM element.
etc...

Related

How do i create a site that uses menus/radio buttons to extract data from MySQL Database?

I've managed to construct a webpage template that has all the elements for a home page but I want to use the data in my database to then submit to produce results coming out once submitted.
When I choose the menu (which has successfully come through from the database) when I click submit and have a second php page to make this submit work, I do not get any results from the database or at best showing what I have selected.
What code do I need to produce results on submit page that would hold all the data selected?
I really am a beginner at this and using PHP, HTML, and Dreamweaver as my builder.
At first you have to understand HTML form methods and how to access form data using PHP.
For getting the values of the select box you can go to this link.
Get select box value using $_POST

Update select contents without reloading form

I have quite a long form which has many HTML form selects pulling data from MySQL tables - quite often a client will be mid way through filling in the form when they realise that the value they want for department, for example, has not yet been entered into the system so is not in the list.
I have added a link to a simplified popup for adding departments but after it is added it does not appear in the select list as the contents of that select are based on what was available on the load of the page when the initial query ran - how can I get the select to update without having to submit and then edit, without the page refreshing/reloading and without the client losing the data they have currently added?
Thanks
Did read what you are asking, since its too long) But did you try javascript? changing form values after paged loaded is possible only with javascript.
When submit form on that popup, save it with ajax in database, and as response get inserted data... Then on ajax success add new option in select ( with returned data )

Dynamicly creating pop ups from dynamic created page - Mysql

I have created a page with Mysql rows displayed as a dynamicly created image grid.
The grid display i have full control over, but i need to take the (Mysql) Row ID from each image displayed and use it in a pop up of some sort.
I don't like having a full page for each Mysql row.
It could be passing it on to a new smaller info page(dynamic) or it could be a popup with the info(dynamic).
I would prefer the popup, since i would guess this is easier on the eyes.
So what i need a suggestion on a popup function, which will load/set the row ID on click.
I have seen Jquery solutions for making popups, but i need to pass in the variables allready set by each displayed image. and this is where i fail.
Thanks in advance.
/Niels
**
This is one of the things i have tried, but i can't really figure out the way to pass it in the right way:
echo "<p>Show"
When you render the page in PHP, you could use a data attribute <div data-mydata='foo' /> to store the ID you need. Then, with jQuery, use the data() function to access the data and render whatever popup you need.
HTML 5 data attribute: http://ejohn.org/blog/html-5-data-attributes
jQuery Reference: http://api.jquery.com/data

passing a dynamic html table to php as an array

I have a dynamic html table( rows are added dynamically using java script) and I want to pass whole table to a php script as an array.Is there a way to insert the table data to an array?
I have tried using phpTableExtractor but it dosen't extract dynamically added rows.
I don't see any other reliable solution but creating a HTML form along with the table and have the user click a submit button to save the table. Then you can read all content from $_POST and store it in a database.
Another solution would be to use AJAX requests to store the table content every time the focus changes or something like that. Will make your page dependent on JavaScript though.
What if you fill a JS array at the same time you create the table?
You will use the html just for display but behind you have the data you send to php.

use jquery to load form input directly into page

I have a form on one page, some of the form data is pulled from various tables in my mysql database -- the tables hold the options for different selects, so the following is the way my data will look after the php scripts are run:
<select name="vehicleStyle">
<option value="empty" selected="selected">- select -</option>
<option value="coupe">Coupe</option>
etc....
</select>
I have a second form that loads over this page in an iframe, this 2nd form allows me to update the data included in this mysql table so that I can add options to the form on the fly. Everything works absolutely fine and wonderful however, if I update (add a value) to this table on the fly, I have to refresh the page in order for the new data to show up in the first form on the main page. I've played with auto-refreshing the page, but that's kind of obnoxious.
Is there a way to add this form data directly into my original page via jquery?
I think twitter does something like this when you add a tweet (I don't use twitter) but it adds your recent tweet onto the top of the page without actually reloading the entire page.
Thanks so much!
I believe the best way is to use the load jQuery function (http://api.jquery.com/load/).
It lets you load a page from a url directly from javascript.
Here is what I would do:
move the creation of the select to a new url (fillselect.php for exemple)
load the page without creating the select: create a div tag instead (name it divforselect for exemple)
in the onload javascript event of the page, write this:
$("#divforselect").load("fillselect.php") This will result in the div tag innerText set to the content of the fillselect.php page. So the url fillselect.php will not be a complete html page but will only contain the select tag.
After that you can call $("#divforselect").load("fillselect.php") whenever you want to refresh the select!
I think you want to do DOM manipulation using JS. All you have to do is append a new OPTION tag with the user-input value to the SELECT like:
var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);
Remember: this is adding an OPTION just on the client side. So if your actual form submission (in your iframe) fails to push the data to your database, this would represent an inconsistent view for your user( where he would think new OPTION is created but its actually failed).
So, you would have to tie your UI update with your backend response. Typically, you would refresh this UI in the AJAX response of the call updating the backend.
Maybe you should be using AJAX to populate the boxes? Then you could have it refresh the data anytime you want.
jQuery Ajax

Categories