How to clear what was echoed into a span tag

Question

so i have an issue with a form made in php. I am echoing an error message in a span tag and i want to clear that message once clicking "clear form" button

This is my php for determining error message when the field hasnt been filled in

<script>
function clearForm(){
    document.getElementById("firstName").value = '';
    document.getElementById("email").value = '';
    document.getElementById("lastName").value = '';
    document.getElementById("subject").value = '';
    document.getElementById("message").value = '';
    document.getElementsByTagName("span").value = "";
}
</script>
      <?php
      $confirm= "";
      $firstName = $lastName = $Email = $Subject = $Message = '';
      if ($_SERVER['REQUEST_METHOD'] == "POST") {
        if (isset($_POST["firstName"]) && $_POST["firstName"]!=null) {$firstName = $_POST['firstName'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["lastName"]) && $_POST["lastName"]!=null) {$lastName = $_POST['lastName'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Email"]) && $_POST["Email"]!=null) {$Email = $_POST['Email'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Subject"]) && $_POST["Subject"]!=null) {$Subject = $_POST['Subject'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Message"])&& $_POST["Message"]!=null) {$Message = $_POST['Message'];} else {
          $confirm ="Please fill it in";
        }
      }
      if (isset($_POST["Clearform"])) {
        $confirm= "";
      }

      ?>

And this is how it looks in body

<form name="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
<p>Your Name: <br>
<input type="text" name="firstName" id="firstName" value="<?php echo $firstName;?>"><span id="confirm"><?php echo $confirm; ?></span></p>
</form>

And the code for the button "Clear form"

<input class="button" type="button" name="Clearform" value="Clear Form" onclick="clearForm();"/>

So i have made this little function that sets the variable $confirm to no content but it doesn't work.

Please help

You forgot to include the code of that little `clearForm` function, since that seems to be the most important part and what is not working. — IncredibleHat, Mar 02 '18 at 20:12
do you mean the javascript code for onlclick event ? if yes then i am adding it but still it is java not php — Agnieszka Zimolag, Mar 02 '18 at 20:15
I don't think it is Java, I assume it is Javascript and it is really important — Jose Rojas, Mar 02 '18 at 20:17
Well you said "*So i have made this little function that sets the variable $confirm to no content but it doesn't work.*" ... so I thought it being relevant. So change `document.getElementsByTagName("span").value = "";` to `document.getElementById("confirm").innerHTML = "";` — IncredibleHat, Mar 02 '18 at 20:17
@IncredibleHat I tried that and it didn't work. thanks for helping : ) — Agnieszka Zimolag, Mar 02 '18 at 20:23
Sorry, if that didn't work, then I guess I don't follow what you are trying to accomplish :( — IncredibleHat, Mar 02 '18 at 20:25
I am doing php form validation and need to echo the error message into a span class, right and then by clicking a button "clear" it clears the content of that form as well as the error message @IncredibleHat — Agnieszka Zimolag, Mar 02 '18 at 20:29
Ok. So... why doesn't the answer below by Hossam work? Its basically the same as what I mentioned to change (except he used .innerText instead of .innerHTML). — IncredibleHat, Mar 02 '18 at 20:32
@IncredibleHat maybe because that span error becomes sticky, not sure — Agnieszka Zimolag, Mar 02 '18 at 20:39
Once the page is output by PHP, then javascript has FULL reign of all elements in the DOM. You can clear them, you can change their styles, you can even make them bounce around the window ;) So... even though php has echo'd some text into the span... your javascript "clearForm" should have rights now to clear whatever is in that span. — IncredibleHat, Mar 02 '18 at 20:42
Just a side tip - You set all the same message to `$confirm`, you'd be better off using an array with all your form elements in and looping it, setting the things which are present, or once setting (for the first time) something isn't present (ideally another array with the form element as a value so you know which things need filling in) — James, Mar 02 '18 at 20:57

score 0 · Answer 1 · answered Mar 02 '18 at 20:23

0

The problem is in your clearForm() you shouldn't use .value instead, you can use innerHTML, innerText or textContent. To see the difference between them check this link

function clearSpan() {
  let mySpan = document.getElementById('errorSpan');
  mySpan.innerText = '';
}

<span id="errorSpan">This is text to be cleared on button click</span>
<button onclick="clearSpan();">Clear</button>

answered Mar 02 '18 at 20:23

Hossam Houssien

359
4
14

Hi, thanks for your answer. But you see i am creating error message with php, so my concern is how to echo an error message into a span and then to clear it – Agnieszka Zimolag Mar 02 '18 at 20:26
@AgnieszkaZimolag in the clearForm() you are getting the span using "getElementsByTagName" which returns an array not a single object hence you can access it by "getElementsByTagName('span')[0].innerText" or to get the span using "getElementById" – Hossam Houssien Mar 02 '18 at 20:40

score 0 · Answer 2 · answered Mar 02 '18 at 20:53

This should do the trick. Use JQUERY .hide() to hide the error.

$("#btn").on("click", function(){
  $("#errmsg").fadeOut("slow");
});

#errmsg{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click to remove error.</button><br>
<span id="errmsg">Your error</span>

How to clear what was echoed into a span tag

2 Answers2