Welcome to WebmasterWorld Guest from 54.163.129.96

Forum Moderators: open

Message Too Old, No Replies

Ajax with php and mysql, easier wiew on resubmit

     
7:41 pm on Feb 12, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts: 1308
votes: 0


Hi,
I have a form that uses Ajax.
On submitting the form a message comes up after connecting with the database.
This works very well.
However when the form is resubmitted and the new message is similar, as the page does not reload, it can be hard to see that the message has been updated. Could seem like the resubmit has not been done.

I wonder if there is some way to highlight, change colors etc. when a result is displayed.
Any idea of improving this?
Thanks
5:12 am on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Consider removing message when any form field is changed ?
9:07 am on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts: 1308
votes: 0


Consider removing message when any form field is changed ?


Yes maybe that's a good idea,
there are only 2 fields that can be changed, and its an option field with dates.
How can this be done?
I have a div where the result from the php page are shown
inside a function.
The script does not clean the inputs wich is good in this case.
No laughing please ;).
Just guessing, not any knower at javascript:
I should put an id on the inputs, then
do something like this after the message has been displayed:

if (document.solicitud.day.options == "changed - newvalue")
{
document.getElementById("messagediv").style.display = "none";

To know if an option has been changed what to use?

Then, if functionsubmit display = "block"
12:07 pm on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


You are on the right track

In javascript include

function dataChanged() {
document.getElementById("messagediv").style.display = "none";
}

on both fields HTML add onchange

<select ... onchange="dataChanged()" ... >

then prior to where you put message up

document.getElementById("messagediv").style.display = "block";
12:46 pm on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts: 1308
votes: 0


Wow, that works like a charm!
Thanks a lot, you saved me some hours searching.

I added it in this order:

function dataChanged() {
document.getElementById("resultado").style.display = "none";
}

function sendform(){
document.getElementById("resultado").style.display = "block";
divResultado = document.getElementById('resultado');

Always wanted to study javascript but no time and thought very complicated.
However as I now uses it a lot understands more of it, and its really fascinating.

Suppose no problem as the date fields I also use on same pages for another purpose.
Not to have doubble and update doubble I added the onchange="dataChanged()" to the fields, and as the other app does not call the function its ok and no problem with usability, semanthics etc.
10:37 pm on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Glad it worked, no need to use getElementById multiple times in sendform, also use 'var' on variables local to a function such as divResultado.

function sendform(){
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block";
...
10:46 pm on Feb 13, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2003
posts: 1308
votes: 0


function sendform(){
var divResultado = document.getElementById('resultado');
divResultado.style.display = "block"

Looks nicer, thanks