Search code examples
htmlmaterialize

Select input type not working. Suspect Initialize but I've checked the code multiple times


I'm using Materialize 1.0 and can not get the select input type to work. Nothing shows below the label. I believe I have the initialize correct as I copy and pasted from their website.

I'm following a tutorial https://www.youtube.com/watch?v=KxdCIbeO4Uk and can't seem to produce the same result as the author Amit Agarwal. He finished the section I'm having issues with at 17:00 min into the tutorial. The select/option input field is not working. He is using Materialize 1.0. I've checked the code at least 10 times for syntax errors and everything works but the select.

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $('select').formSelect();
    });

    function sendEmail(e) {
      e.preventDefault();
      var data = {
        from: $('#from').val(),
        to: $('#to').val(),
        subject: $('#subject').val(),
        body: $('#body').val();
      };
      alert("You just submitted: " + JSON.stringify(data));
    };
  </script>

</head>

<body>
</body>
<div class="container">
  <div class="row">
    <div class="col s12">
      <h4 class="light"> Mailman </h4>
    </div>
  </div>
  <form onsubmit="sendEmail(event)">
    <div class="row">
      <div class="input-field col s12">
        <select name="from" id="from">
          <option value="email1">email1@g.com</option>
          <option value="email2">email2@g.com</option>
        </select>
        <label for="from"> Sender Email Address</label>
      </div>
      <div class="input-field col s12">
        <input type="email" placeholder="Enter email here" id="to">
        <label for="to" Recipient's Email Address></label>
      </div>
      <div class="input-field col s12">
        <input type="text" placeholder="Enter subject" id="subject">
        <label for="subject" Subject Line></label>
      </div>
      <div class="input-field col s12">
        <textarea id="body" class="materialize-textarea"></textarea>
        <label for="body" Email Body></label>
      </div>
    </div>
    <div class="row">
      <div class="col s12">
        <button type="submit">Send Email</button> </div>
    </div>
  </form>
</div>

</html>

I expect to see a dropdown selector.


Solution

  • There are couple of mistakes here in your code First: You have declared container div outside body tag. Second: Remove the semi colon from "body: $('#body').val();" and run the script. It will work.