1

I have an HTML input element generated by the server and it looks like this:

HERE IS THE SERVER SIDE

"<input id='" + cRoadList.getRoadListNumber() + ",start_km' style='' type=\"text\" value='"+ cRoadList.getStartKm() + "' onkeypress='handleRoadListDataUpdate(\""+cRoadList.getStartKm()+"\")'

As you see the attrbutes of the input element are generated dynamically but that is not the case so let's simplify it by putting some static data like this:

"<input id='myID' style='' type=\"text\" value='100' onkeypress='handleRoadListDataUpdate(\"100\")'

The most important part of this HTML input element is the onkeypress event which calls the function handleRoadListDataUpdate

HERE IS THE CLIENT PART

function handleRoadListDataUpdate(oValue) // The function accpets the old value of the *input* element
{
   var event = handleRoadListDataUpdate.caller.arguments[0] || window.event ;

   var keyPressed = event.keyCode;
   if(keyPressed == 13)
   {
        var roadListNumber = event.target.id.split(",")[0];
        var inputId        = event.target.id.split(",")[1];
        var nValue         = event.target.value;

        if(nValue != oValue)
        {
               var userAction = confirm("Are you sure you want to change this value?\nPrevious value:   " + oValue + "\nNew value: " + nValue);
               if(userAction == true)
               {   
                    var url = "/GBS/RoadListController";
                    var params = "type=updateRoadList&roadListNumber=" + roadListNumber + "&updateData="+inputId + "&newValue="+ nValue;
                    dhtmlxAjax.post(url,params,function(loader) 
                    {
                            var xmlDoc = loader.xmlDoc.responseXML;

                            var sqlResponse = xmlDoc.documentElement.getElementsByTagName("response");
                            var result      = sqlResponse[0].getAttribute("value");

                            if(result == "sql_error")
                            {
                                alert("The operation could not be completed because of an network error!");
                                event.target.value = oValue;
                            }
                            else if(result == "sql_success")
                            {
                                alert("The operation completed successfully!");
                                //Change the parameter oValue of the parent function
                            }  
                    });
               }
               else
               {
                   event.target.value = oValue;
               }
        }     
   }    
}

Basically this function is about updating (using ajax) the database with the new value the user enters inside the input element and press key Enter. If the parameter oValue is different than the parameter in the input element an ajax request is made so the database can be updated with the new value.

When the operation completes we have the new value in the input element (which is entered by the user) but the problem is that if he press Enter again the function get executed AGAIN because its parameter oValue is not changed with the new value.

So my very question is:

How to change the handleRoadListDataUpdate() function's parameter oValue to become the same as nValue so if the user press Enter by accident the function does not execute the ajax part again?

P.S.

Please no jQuery code! Only pure javaScript!

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Joro Seksa
  • 1,525
  • 3
  • 18
  • 44
  • Why can you not retrieve the value from `event.target.value` inside `handleRoadListDataUpdate`, instead of enforcing it being passed as a parameter? – Matt Feb 17 '13 at 14:51
  • bacause it is going to be changed already with new value entered by the user! – Joro Seksa Feb 17 '13 at 14:54
  • `event.target.value` will update each time the user changes the value? – Matt Feb 17 '13 at 14:55
  • ofcourse. event.target.value is the current value the in the input element just before the user presses Enter – Joro Seksa Feb 17 '13 at 14:57
  • Ahhaaa of course, sorry. I misunderstood your code. I would recommend you use an additional attribute (`data-*` are good for this), and store the old value in there – Matt Feb 17 '13 at 14:58
  • 10x! But as far as i know it is not a part of W3C right? – Joro Seksa Feb 17 '13 at 15:00
  • Its not technically a valid attribute in < HTML5, *however*, it won't break any browsers. See http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 or http://stackoverflow.com/questions/9749276/accessing-data-tag-from-a-non-html5-browser – Matt Feb 17 '13 at 15:02
  • Can anyone answer my question? – Joro Seksa Feb 17 '13 at 20:19

0 Answers0