Welcome to WebmasterWorld Guest from 23.22.250.113

Forum Moderators: open

Message Too Old, No Replies

Ajax with php and mysql, easier wiew on resubmit

     

helenp

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

WebmasterWorld Senior Member 10+ Year Member



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

daveVk

5:12 am on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Consider removing message when any form field is changed ?

helenp

9:07 am on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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"

daveVk

12:07 pm on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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";

helenp

12:46 pm on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

daveVk

10:37 pm on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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";
...

helenp

10:46 pm on Feb 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Looks nicer, thanks
 

Featured Threads

Hot Threads This Week

Hot Threads This Month