2016-05-18 2 views
1

Ich möchte den Textarea-Wert in Servlet immer wenn der Textarea Wert ändert. Meine Seite wird automatisch alle 30 Sekunden aktualisiert. Also möchte ich, dass der Textarea-Wert alle 30 Sekunden automatisch in das Servlet eingeht, ohne dass ein Knopf gedrückt wird. Unten ist mein Code:Get textarea Wert in Servlet automatisch ohne Knopfdruck, wenn Wert ändert

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <meta http-equiv="refresh" content="10" /> 


     <link rel="stylesheet" href="css/home.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

var x,y; 
x=41.689844; 

var origin = new google.maps.LatLng(x,-74.044874), 
    destination = new google.maps.LatLng(42.2569387,-71.0043555), 

    service = new google.maps.DistanceMatrixService(); 

var str1,str2,str3,str4; 

function showlocation(){ 

    navigator.geolocation.watchPosition(callback1); 


} 

function rel(){ 
    location.reload(true); 


} 
function showlocation2(){ 

    navigator.geolocation.watchPosition(callback2); 
} 

function callback1(position){ 
    // document.getElementById('latitude').innerHTML=position.coords.latitude; 
    // document.getElementById('longitude').innerHTML=position.coords.longitude; 

    /* var str = 'Latitude: ' + position.coords.latitude  + '<br>' + 
        'Longitude: ' + position.coords.longitude  + '<br>' + 
        'Timestamp: ' + position.timestamp  + '<br>\r\n' ; 
     document.getElementById('result').value += str; 
    */ 

    str1=position.coords.latitude; 
    str2=position.coords.longitude; 
    // document.getElementById('result1').value += str1; 
    // document.getElementById('result2').value += str2; 

    document.getElementById('result1').value = str1; 
    document.getElementById('result2').value = str2; 

    document.getElementById('originatt').value = "."; 
    document.getElementById('destatt').value = "."; 
    document.getElementById('distatt').value = "."; 

    document.getElementById('message1').innerHTML ="Trip Recording has started"+"<br>"+"Click Get Origin Address"; 
} 


function callback2(position){ 
    //document.getElementById('latitude').innerHTML=position.coords.latitude; 
    //document.getElementById('longitude').innerHTML=position.coords.longitude; 

    /* var str = 'Latitude: ' + position.coords.latitude  + '<br>' + 
        'Longitude: ' + position.coords.longitude  + '<br>' + 
        'Timestamp: ' + position.timestamp  + '<br>\r\n' ; 
     document.getElementById('result').value += str; 
    */ 
    str3=position.coords.latitude; 
    str4=position.coords.longitude; 
    document.getElementById('result3').value += str3; 
    document.getElementById('result4').value += str4; 
    document.getElementById('originatt').value = "."; 
    document.getElementById('destatt').value = "."; 
    document.getElementById('distatt').value = "."; 


    document.getElementById('message1').innerHTML ="Trip Recording has stopped"+"<br>"+"Click to Get Destination Address"; 

} 

service.getDistanceMatrix(
    { 
     origins: [origin], 
     destinations: [destination], 
     travelMode: google.maps.TravelMode.DRIVING, 
     avoidHighways: false, 
     avoidTolls: false 
    }, 
    callback 
); 

function callback(response, status) { 
    var orig = document.getElementById("orig"), 
     dest = document.getElementById("dest"), 
     dist = document.getElementById("dist"); 




    if(status=="OK") { 
     orig.value = response.destinationAddresses[0]; 
     dest.value = response.originAddresses[0]; 
     dist.value = response.rows[0].elements[0].distance.text; 
    } else { 
     alert("Error: " + status); 
    } 
} 

function delay(ms) { 
    ms += new Date().getTime(); 
    while (new Date() < ms){} 
} 

$("myform").submit(function() { 
    $(this).submit(function() { 
     return false; 
    }); 
    return true; 
}); 
</script> 
</head> 
<body> 
    <div id="img1"> 
    <img src="images/home/logo.jpg" style="width:80%;"> 
    </div> 
    <div id="main"> 
    <form name="myform" action="TripRecorder" method="POST"> 
     <h4> Click Start to record Origin and Stop to record Destination </h4> 

<!--<span id="latitude" name="latit" hidden> </span> 

<span id="longitude" hidden> </span> 
<br>--> 


<input type="button" name="start" class="st1" id="st" value="Start Trip" onclick="showlocation()"/> 


<br><br/> 
    <span id="message1" name="msg1"> </span> 
</br></br> 




    <input id="originatt" type="text" value="<%=request.getAttribute("origin5")%>" ><br><br> 

    <textarea id="result1" name="res1" value="str1" cols="20" rows="1" ></textarea> <br> <br/> 
     <textarea id="result2" name="res2" value="str2" cols="20" rows="1" ></textarea> 
     <input class="one" id="s1" type="submit" name="submit1" value="Get Origin Address" /> <br> <br/> 

    <!-- <input class="one" id="s1" type="submit" name="submit" value="Submit" /> <br> <br/> --> 


<input type="submit" name="Submit" > <br> 
    </form> 
    <br> 

      <input type="button" value="Back to Submission Page" name="back" onclick="document.location.href='submission.jsp'" /> <br> <br/> 
     <h5>Check distance using Google Maps</h5> 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.1219514911336!2d76.32904011409968!3d10.006784275664728!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b08729de9da66b7%3A0x3ede9e0d7ae9f2fa!2sIGA+TECH+Industrial+Electronics+Pvt+Ltd!5e0!3m2!1sen!2sus!4v1456591588301" width="100" height="100" frameborder="0" style="border:0" allowfullscreen></iframe> 

     <br> 
     </div> 
</body> 
</html> 

<script type="text/javascript"> 

window.setTimeout(function() { 

    repeat(); 

}, 1); 


    function repeat(){ 

    document.getElementById("st").click(); 

    } 



function showvalue(){ 
//var someValue = $('#lat span').text(); 
var div = document.getElementById("test"); 
var spans = div.getElementsByTagName("span"); 

for(i=0;i<spans.length;i++) 
{ 
    alert(spans[i].innerHTML); 
} 
} 

function submitForm() { 
     document.getElementById("myform").submit(); 
    } 

    document.getElementById('submit1').onclick = function() { 
     setTimeout(submitForm, 3000); 
    }; 


</script> 

Mein Servlet doPost Methode:

protected void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     // processRequest(request, response); 
     String str1=request.getParameter("res1"); 
     String str2=request.getParameter("res2"); 
     System.out.println("coord="+str1+"/"+str2); 

     RequestDispatcher view = request.getRequestDispatcher("navigator_1.jsp"); 
       view.forward(request, response); 
    } 
+1

Ich glaube nicht, 30 sec Benutzer für mehr Zeit warten machen würde, stattdessen schreiben onkeyup funciton –

+0

Hallo @SundarBons könnten Sie mich mit einigem Beispiel code.I bieten wirklich hier stecken sind !!! –

+1

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeyup - versuchen Sie dieses Beispiel von w3school, ich hoffe, es wird hilfreich sein –

Antwort

1

Verwenden Sie die folgenden in Ihrem jsp .... geben id Ihrem Formular und geben Sie Ihre Textbereich innerhalb Form, wenn Sie don‘ Wenn Sie es in Ihr Formular aufnehmen möchten, können Sie es ausblenden, sodass es nicht sichtbar ist und keinen Platz auf Ihrer Seite benötigt.

window.setInterval(function(){ 

submit();/// call your function here 

}, 30000); 
<script language="javascript"> 
function submit(){ 
document.getElementById("myForm").submit(); 
} 
</script> 
+0

Danke das funktioniert –