Sends a form to the server using send() method

Hi
I am a beginner in dhtmx, I try to use this form
var filtredate = new dhx.Form(“filtre_container”, {
cols: [
{
type: “datepicker”,
label: "Début: ",
labelInline: true,
labelWidth: “50px”,
width :“150px”,
date:“20/02/20”,
name: “debut”
},
{
type: “datepicker”,
label: "Fin: “,
labelInline: true,
labelWidth: “50px”,
width :“150px”,
name: “fin”
}
]
});
filtredate.events.on(“Change”, function(id,e){
if(id == “fin”)
{
this.send(“index.php”, “POST”);
alert(” “+id+” : "+e);
}
});

to send data to server. But there is no way to use the data in server side in PHP, I try to display the $_REQUEST and $_POST, but it return null value.

Can some one help me.

Since you use PHP do this.
Add this on the top of your script

$_POST = json_decode(file_get_contents('php://input'), true); 

What happens is that the form.send() is sending a json_encoded data to your server.
The php POST cannot read json encoded data by default.

You need to decode that or the best way is change the content-header of form from application/json to text before sending it to your server.

full php script

 <?php 
 $_POST = json_decode(file_get_contents('php://input'), true);
 echo '<pre>';
 print_r($_POST);
 echo '</pre>';

that should work.

1 Like

Thank you very much
it work.

1 Like

Hi,
I try the code :

<?php $_POST = json_decode(file_get_contents(‘php://input’), true); echo ‘<pre>’; print_r($_POST); echo ‘</pre>’;

In the console of broswer, the values send is display very well, but in my web page php script , the echo ‘<pre>’; print_r($_POST); echo ‘</pre>’; return NULL

What can i do to send entire my index.php when I send the form

filtredate.events.on(“Change”, function(id,e){
if(id == “fin”)
{
this.send(“index.php”, “POST”);
alert(” “+id+” : "+e);
}
});

That is so weird I run your code and it works fine.

Kindly correct me if I’m wrong or did not get correctly your problem.

I do believe you have a problem on this line.

 this.send(“index.php”, “POST”);

Can you send/attach the code of your index.php. I am not following you right there.

I tried your code and it is working well.
This is an ajax request (xhttp) I suggest you change the into another page.

change it to ajax.php this way you can retain the form values when you submit the form.

You index.php is the template/view right? I cannot help you properly since I don’t know your index.php code (project code).

Can you attached your full script here so I can check.

Thank you exejee,

I realized that everything is going well on the server side, however the front end does not update automatically.

Please, what can I do so that: I do form.send (), the update happens on the server side and on the client side too?

I need to load the entire index.php after the send() is execute.

I had the same issue. Try sending the form like this:

.send(‘file.php’, ‘POST’, ‘json’)

I’d love to help but I don’t have idea about your UI. Can you post a screenshot what is your index is.

If this is a grid with date filter. I suggest you clear the grid and replace it with the new data return by your server.

I usually do this. See below.

form.send('ajax.php', 'post', function(loader, result){
   grid.clearlAll();
   grid.parse(result, "json");
   // take not result is already filtered based on the date range value.
});

Hope this helps.

I want that after the send() method, the whole page will be update entirely according to the dates chosen in the form.

Remember this example script I wrote. You can actually use this to change the data on every date input change.

I can only suggest that you wrap your initial code (display data) into a function with date parameters.

Regarding the Chart you can also wrap this to your function and change the data accordingly.

var chartData = {} // contains initial/default code loading page

function changeChartDataGraph(data){
 chart.data.parse(data);
} 

changeChartDataGraph(chartData); // load default/initial data

filtredate.events.on(“Change”, function(id,e){
    if(id == “fin”)
    {
         this.send(“index.php”, “POST”, function(loader, response){
             // render new data from server
             changeChartDataGraph(response); 
       });
     }

});

I try it and come back to you