CODEWITHSUNDEEP
htmlcss
Terabyte
Terabyte

Reputation: 69

HTML - Buttons and Input

I'm creating a web-page out of HTML and whenever I hit one of the buttons, it clears all the text in my inputs. When I hit one of the buttons, I only want it to clear the text in its div. How do I do this? This is my html code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>SmartMail</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <h1><b>Welcome to SmartMail!!</b></h1>
    <form>
      <div class="recipients">
        <input type="text" class="typer">
        <br><br>
        <button class="ar">Add User</button>
        <button class="ur">Remove User</button>
        <br><br><br>
        <select name="users" class="userlist" size="24">
          <option class="listhead"> __________*Recipents*__________
          </option>
          <option class="listhead">-------------------------------
          </option>
        </select>
      </div>
      <div class="content">
        <button class="send">Send</button>
        <br><br>
        <textarea name="content" class="typec" cols="113" rows="12"> 
                    </textarea>
      </div>
    </form>
  </div>
</body>

</html>

Any help is useful! Thanks!

Upvotes: 0

Views: 58

Answers (1)

Unmitigated
Unmitigated

Reputation: 89214

Your page is always refreshing when your click on any of the buttons because a button tag inside a form tag is interpreted as a submit button (<button type="submit">). You need to explicitly give the buttons a type of button. You will also need to prevent the default action when enter is pressed in an input with event.preventDefault().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SmartMail</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1><b>Welcome to SmartMail!!</b></h1>
        <form>
            <div class="recipients">
                <input type="text" class="typer" id="typer">
                <br><br>
                <button type="button" class="ar">Add User</button>
                <button type="button" class="ur">Remove User</button>
                <br><br><br>
                <select name="users" class="userlist" size="24">
                    <option class="listhead"> __________*Recipents*__________ 
                    </option>
                    <option class="listhead">------------------------------- 
                    </option>
                </select>
            </div>   
            <div class="content">
                <button type="button" class="send">Send</button>
                <br><br>
                <textarea name="content" class="typec" cols="113" rows="12"> 
                </textarea>
            </div>
        </form>
    </div>
    <script>
    document.getElementById('typer').addEventListener("keypress", (e)=>{
      if(e.keyCode==13){
       e.preventDefault();
      }
    });
    </script>
</body>
</html>

Upvotes: 1

Related Questions