Skip to content
Advertisement

Textarea typing then show star rating

I have this star rate form and wanted you to start typing in the text area and it will show you the star rate form right away, but if the text area is empty, it will hide.

I discovered the following code:

<HTML>
<input placeholder="Enter some text" name="name" />
<p id="values"></p>

<JS>
const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

How can I combine this code into mine? Because it only does that now when I click outside of the text area and then show the stars. Please advise me on this!

@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
  margin: 0;
  padding: 0;
  font-family: roboto;
}

body {
  background: #000;
}

.cont {
  width: 93%;
  max-width: 350px;
  text-align: center;
  margin: 4% auto;
  padding: 30px 0;
  background: #111;
  color: #EEE;
  border-radius: 5px;
  border: thin solid #444;
}

hr {
  margin: 20px;
  border: none;
  border-bottom: thin solid rgba(255, 255, 255, .1);
}

div.title {
  font-size: 2em;
}

h1 span {
  font-weight: 300;
  color: #Fd4;
}

div.stars {
  width: 270px;
  display: inline-block;
}

input.star {
  display: none;
}

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked~label.star:before {
  content: 'f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked~label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked~label.star:before {
  color: #F62;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: 'f006';
  font-family: FontAwesome;
}

.rev-box {
  height: 0;
  width: 100%;
  transition: all .25s;
}

textarea.review {
  background: #222;
  border: none;
  width: 50%;
  max-width: 100%;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
  color: #EEE;
}

label.review {
  display: block;
  transition: opacity .25s;
}

input.star:checked~.rev-box {
  height: 125px;
  overflow: visible;
}
<html>

<head>
  <link rel="stylesheet" href="startratecss.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>

<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />

  <div class="cont">
    <div class="stars">
      <form>
        <div class="rev-box">
          <textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>
        </div>
        <div id="rateYo" style="visibility: hidden;"></div>
        <input type="hidden" name="rating" id="rating_input" />

      </form>
    </div>
  </div>

  <script>
    function asd(txt) {
      var something = txt.value;
      var star = document.getElementById("rateYo");
      star.style.visibility = "visible";
    }

    $(function MyFunction() {
      $("#rateYo").rateYo({

        onSet: function(rating, rateYoInstance) {
          rating = Math.ceil(rating);
          $('#rating_input').val(rating); //setting up rating value to hidden field


          var bod = document.getElementById("review").value;
          window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
        }
      });
    });
  </script>
</body>

</html>

Advertisement

Answer

I have taken the liberty of rewriting your code to accomplish what you are trying to do.

Two tips I want to give you:

  1. Decouple the data layer with the presentation layer. You are mixing CSS styles in stylesheets, HTML and JavaScript. You are also having JavaScript as strings in your HTML attributes. This gets confusing quite rapidly! We have gone a long way since HTML4 and the 90’s!

  2. If you use a library, then use it. For example, you are using jQuery, then use it as it should instead of adding event handlers directly to the HTML attributes; jQuery has $(element).on(event, handler), don’t do <div onclick="something(this)"></div>.

$(function MyFunction() {
  const textInput = $("#review").on('input', function () {
    if (textInput.val().length) {
       rateStar.show();
    } else {
       rateStar.hide();
    }
  });
  const ratingInput = $('#rating_input');
  const rateStar = $("#rateYo").rateYo({
    onSet: function(rating, rateYoInstance) {
      let inputValue = textInput.val();
      
      ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field

      console.log( rating, inputValue );
      // window.location.href = 'mailto:your@gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
    }
  }).hide();
});
@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
  margin: 0;
  padding: 0;
  font-family: roboto;
}

body {
  background: #000;
}

.cont {
  width: 93%;
  max-width: 350px;
  text-align: center;
  margin: 4% auto;
  padding: 30px 0;
  background: #111;
  color: #EEE;
  border-radius: 5px;
  border: thin solid #444;
}

hr {
  margin: 20px;
  border: none;
  border-bottom: thin solid rgba(255, 255, 255, .1);
}

div.title {
  font-size: 2em;
}

h1 span {
  font-weight: 300;
  color: #Fd4;
}

div.stars {
  width: 270px;
  display: inline-block;
}

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked~label.star:before {
  content: 'f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked~label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked~label.star:before {
  color: #F62;
}

label.star:hover {
  transform: rotate(-15deg) scale(1.3);
}

label.star:before {
  content: 'f006';
  font-family: FontAwesome;
}

.rev-box {
  /* height: 0; */
  width: 100%;
  transition: all .25s;
}

textarea.review {
  background: #222;
  border: none;
  width: 50%;
  max-width: 100%;
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
  color: #EEE;
}

label.review {
  display: block;
  transition: opacity .25s;
}

input.star:checked~.rev-box {
  height: 125px;
  overflow: visible;
}
<html>

<head>
  <link rel="stylesheet" href="startratecss.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>

<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />

  <div class="cont">
    <div class="stars">
      <form>
        <div class="rev-box">
          <textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>
        </div>
        <div id="rateYo"></div>
        <input type="hidden" name="rating" id="rating_input" />

      </form>
    </div>
  </div>
</body>

</html>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement