I need to update a div after the user enters data in input , but I can not. The div appears, but then disappears.
My Code:
function.js
window.onload = function(){
var mydata = document.getElementsByTagName("input");
if(mydata != null){
for(var i=0; i< mydata.length; i++) {
if(mydata[i].type == "text"){
if(mydata[i].id == "qtd") {
mydata[i].onchange = function () {
send(this);
};
}
}
}
}
}
function send(box){
if (box == null) { return; }
var nameBox = box.name;
var url="process.php?nameBox="+nameBox+"&value="+encodeURIComponent(box.value);
requisicaoHTTP("GET",url,true);
}
function dataNew(){
var info = ajax.responseText;
if(info != null){
var out= document.getElementById("myDIV");
out.innerHTML = info;
}
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="Ajax.js"></script>
<script type="text/javascript" src="functions.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="javascript:void%200">
<input type="text" name="test" id="test" value="">
</form>
<div id="myDIV"></div>
</body>
</html>
I want the div to appear and update after I enter the data in input.
You can use the .html function from jQuery.
$('#txt_box').keyup(function(event){
// Get the typed text
var txt = $(this).val();
// Insert the text to the div
$("#myDIV").html(txt);
});
(Remember to add jQuery to your code)
UPDATE
So your complete function with your code should be something like this:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="functions.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form id="txt_form" action="">
<input type="text" name="test" id="test" value="">
<input type="submit" value="Submit" id="txt_send">
</form>
<div id="myDIV"></div>
</body>
</html>
Functions.js
$("#txt_send").click(function(event){
event.preventDefault();
var field_name = $("#test").attr("name");
var field_val = $("#test").val();
// POST to update the text.
$.ajax({
type: "POST",
url: "process.php?nameBox="+field_name+"&value="+encodeURIComponent(field_val),
dataType: "html"
}).done(function(data) {
// Display the text on the div.
$("#myDIV").html(field_val);
}
});
});
});
Full Code Fiddle Example I commented out the Ajax because of course there no php on fiddle.