Using JQuery to refresh an HTML form (located on a PHP page)

Question

I'd like to update a form, more exactly I wish to display an extra scroll menu, depending on the user's choice in a first scroll menu.

I have a page, mypage.php page on which there is a form. Here it is :

<form method="post" action="wedontcare.php" enctype="multipart/form-data">

     <label for="base">3 - Select a DB </label><br />

<?php
include 'functions.php';
offers_choice_DB();
if (isset($_POST['base_name_choice'])){
    offers_choice_table($_POST['base_name_choice']);
}

I have a separated file "functions.php" where are declared all the functions I use here. offers_choice_DB() displays a scroll menu where I can select a database (actually, this function performs a MySQL query and echoes the result in a scroll menu). If the user selects a database, then $_POST['base_name_choice'] exists. And it does, because when i only work with PHP/HTML, all is doing fine.

My purpose is to allow the user to select a database, then for this database I'd like to display a second scroll menu that displays some tables from this DB. This scroll menu will only be displayed if a POST value has been set. The offers_choice_table($_POST['base_name_choice']) function takes this value as an argument, then echoes the HTML for the scroll menu, containing the tables. Here we are !

Oh, and the submit button is not important here, because I want to have my second scroll menu displayed before the user clicks on the submit button, so we just disregard the target page, ok ?

Before, everything was OK : I used tests, conditions (isset...) but it was not dynamic, I had to call other pages, ...etc. And now I want, as you guessed, to use jQuery to refresh mypage.php as soon as the user selects a database so that an extra menu appears.

I started to listen to a change in my scroll menu, but then I don't know what to do to refresh my page with a POST parameter containing the selected database. Anyway, here is my code :

<script type="text/javascript">
            $( '#base_name_choice' ).change(function() {
                var val = $(this).val(); //here I retrieve the DB name
                alert( val ); //I notify myself to check the value : it works

                $.ajax({
                    type: 'POST', //I could have chosen $.post...
                    data: 'base_name_choice='+val, //I try to set the value properly
                    datatype: 'html', //we handle HTML, isn't it ?
                    success: function(){ 
                        alert( "call ok" ); //displays if the call is made

                    //and here...???? I don't know whatto do

                    }
                })

            });
        </script>

Here it is...any help will be appreciated ! Thanks :)

Regards

You should use `GET` instead of `POST` if you're just getting data: http://stackoverflow.com/questions/1872965/get-vs-post-in-ajax — Matthew Rapati, Feb 06 '15 at 21:54
you can append data like this `$('element').append('what do you want to append');` for example: `$('form').append(data);` — Bardh Lohaj, Feb 06 '15 at 23:34

Bardh Lohaj · Accepted Answer · 2015-02-06T23:33:17.510

The issue here is that your page is rendered first (html + php preprocessing). That means that once your page is rendered, you won't be able to make direct php method calls such as offers_choice_table or change the $_POST parameters.

How you normally do this, is by making an AJAX call from your javascript to a PHP script/method which than generates the second menu based on the parameter that the user chose.

So, you don't need this part:

if (isset($_POST['base_name_choice'])){
    offers_choice_table($_POST['base_name_choice']);
}

because you will call "offers_choice_table" method with an ajax call.

You make the ajax call to a url which will return the second menu

$.ajax({
  type: "GET",
  url: "generate_second_menu.php",
  data: { base_name_choice: val},
  success: function(data){ 
       alert( "call ok" ); //displays if the call is made
       // here you can append the data that is returned from your php script which generates the second menu
       $('form').append(data);

  }
})

score 0 · Answer 2 · edited May 23 '17 at 12:12

You should use GET instead of POST, in your new PHP file:

if (isset($_GET['base_name_choice'])) {
    offers_choice_table($_GET['base_name_choice']);
}

You SHOULD check if the variable has a value set, especially if your function is expecting one. You can use whatever functions you want in this file, it is like any other PHP file you would write. Include any files that you want.

You should make sure to avoid SQL injection when using a GET or POST value in a query: How can I prevent SQL injection in PHP?

In the .ajax() call, there is a callback function success, this runs if the server response is good (i.e. not a 404 or 500). There first parameter in that function is what the server returned. In your case, it would be the HTML you echoed out. You can use jQuery to append the response to an element:

$.ajax({
    type: "GET",
    url: "generate_second_menu.php",
    data: { base_name_choice: val},
    success: function(data) {
       // it looks like you're only returning the options of the select, so we'll build out the select and add them
       var $newSelect = $('<select></select>');
       $newSelect.append(data);

       // and then add the select to the form (you may want to make this selector for specific)
       $('form').append($newSelect);
    }
});

Thanks for your help guys, it's almost working now ! ...however, my selection menu displays twice : once within the form, once at the bottom of the page OUTSIDE the form...any idea ? — Fafanellu, Feb 07 '15 at 10:33
Ok I got it ! I've 2 forms in my page...actually as I have a "return" button at the bottom of my page, called by a PHP function which echoes a form, the instruction $('form').append...appends my result to both of the forms. What is the best way to deal with this? Create DIVs ? thanks — Fafanellu, Feb 07 '15 at 10:50
Solved :) I gave a class name to the first form, and it works like a charm ! Thank you all for you help :) — Fafanellu, Feb 07 '15 at 11:00

Using JQuery to refresh an HTML form (located on a PHP page)

2 Answers2