Enrique García Enrique García - 27 days ago 8
PHP Question

Can't catch input ID when calling JS function from PHP

I don't know why but JavaScript can't catch my input:

Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...."/>


Is built to when I submit the PHP detect it and call the JS function:

function ClearFields() {
var e = document.getElementById("mensaje");
e.value='';
}


My form never reload the page and I can submit a text without reloading. The problem is that the value of textbox is always kept. That's why I'm trying to use JavaScript, to clear this textbox when it is submitted.

I get this error in JS console:

(index):24 Uncaught TypeError: Cannot set property 'value' of null(…)


Full code:

<html>

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<title>Chat de SL</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript">
$(document).ready(function() {
rsdfsdfsd();
asd();
});

function rsdfsdfsd() {
$('#nax').load('./funcionmensaje.php');
setTimeout(rsdfsdfsd, 200);
}

function ClearFields() {
var e = document.getElementById("mensaje");
e.value = '';
}
</script>
<script>
var contador = 0;

function asd() {
if (contador < 2) {
contador++;
var elem = document.getElementById('nax');
elem.scrollTop = elem.scrollHeight;
setTimeout(asd, 100);
}
}
</script>
<script>
</script>
</head>

<body>
<?php
if(isset($_POST['subname'])) {
echo '<script>',
'ClearFields();',
'</script>'
;

if ($_POST['mensaje'] == "") {

}
else {
file_put_contents('mensajeaenviar', $_POST['mensaje']);
file_put_contents('var', '0');
$fp = fopen('mensaje.php', 'a');
$mensaje = $_POST['mensaje'].PHP_EOL;
fwrite($fp, 'Tú: '.$mensaje .'<br>');
}
}
?>
<fieldset>
<font color="#c50000">Lugar:</font> Attached |
<font color="#c50000">Avatares cercanos:</font>

</fieldset>

<fieldset>
<legend>Chat</legend>

<td>
<div id="nax" style="height:70%; overflow:auto">

</div>
</td>
</fieldset>
<style>
nax {
font-family: 'Open Sans', serif;
font-size: 18px;
}

fieldset {
font-family: sans-serif;
border-radius: 10px;
background: #eee;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
position: relative;
border: 2px groove threedface;
}

legend {
position: absolute;
top: -2px;
background: #fff;
padding: 10px 20px;
border: 2px groove threedface;
border-top: none;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
font-weight: bold;
}

legend span {
display: block;
margin: -20px;
background: #fff;
padding: 0px 20px;
}

footer {
font-family: sans-serif;
margin-top: 2%;
background: #ddd;
border-radius: 5px;
padding: 15px;
}

iframe {
display: none;
}
</style>

<fieldset style="margin-top:10px;height:3%;">
<form id="formulario" method="post" target="tar">
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...." />
<input type='submit' value='Enviar' name='subname' />

</form>
</fieldset>
<iframe name="tar" src="localhost/a.php">
</iframe>

</body>
<footer>EnriqueGF Utilities</footer>

</html>

Answer

You post to the iframe so, as you said yourself, the page is not reloaded and therefore the ClearFields function isn't executed on submit. Add an onsubmit handler to your form and call ClearFields from that.