CODEWITHSUNDEEP
javascripthtmlcss
Jason12
Jason12

Reputation: 369

Browser is not ouputting webpage with textbox and submit button

I have written a CSS/HTML code which is supposed to show the images of three cars and when you click on an image, a text box appears and you can write comments about the car into the text box and click on the submit button. I have checked and rechecked my codes and everything seems to be in order. I have saved the codes in the htdocs folder of XAMPP. Now, no PHP is involved in my codes, so I don't need a server to execute the file, but as far as I know, this should not matter. So, I type "localhost/index1.php" into the address bar and press return. What I get, surprisingly, is just the images of the three cars, but no submit button. And when I place my pointer on each car, the individual car image gets bigger (as expected) BUT a textbox does NOT appear. This should not be happening. So I decided to rename my file index1.html and saved it in the htdocs folder as before but STILL the situation persists. Please could someone tell me why I am not getting the textbox to appear when I click on the icon, and why no submit button appears either?

I HAVE NOW ADDED JavaScript to my code, and it's STILL not working!!!





<!DOCTYPE html> <html> <head> <style> body {
  background-color: #ADD8E6;
}
#form {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}
.car {
  float: left;
  margin: 2% 2% 5% 2%;
}
.car label img {
  transform: scale(0.8);
  transition-duration: 0.2s;
}
.car label img:hover {
  cursor: pointer;
  transform: scale(1);
}
.comment {
  position: absolute;
  visibility: hidden;
}
.comment input {
  width: 128px;
  font-size: 1em;
}
.car label img {
  width: 128px;
  display: block;
}
#button {
  position: relative;
  left: 66%;
  margin: 2%;
  visibility: hidden;
}
</style> </head>

   


<div id="form">
  <form method="post" action="#">

    <div class="car">
      <label for="mercedesbenz">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment">
        <input type="text" id="mercedesbenz" placeholder="Merc" />
      </div>
    </div>
    <div class="car">
      <label for="porche">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment">
        <input type="text" id="Porche" placeholder="Porc" />
      </div>
    </div>
    <div class="car">
      <label for="bmw">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment">
        <input type="text" id="bmw" placeholder="Beemer" />
      </div>
    </div>
    <input id="button" type="submit" name="submit" value="Submit">
  </form>

</div>







 <script>
 $('.car').click(function() {
 $('.comment').css("visibility", "hidden");
 $('#button').css("visibility", "hidden");

 var id = $(this).children('label').attr('for');
 var buttonOffset;
 switch(id) {
    case 'mercedesbenz':
        buttonOffset = '0';
        break;
    case 'porche':
        buttonOffset = '33%';
        break;
    case 'bmw':
        buttonOffset = '66%';
        break;
}

$(this).children('.comment').css("visibility", "visible");
$('#button').css("left", buttonOffset);
$('#button').css("visibility", "visible");
});

$('.comment').mouseleave(function() {
  setTimeout(function () {
    $('.comment').css("visibility", "hidden");
    $('#button').css("visibility", "hidden");
    }, 500);
});

</script>
</body>
</html>

Upvotes: 0

Views: 182

Answers (2)

Alvaro Montoro
Alvaro Montoro

Reputation: 29655

I think that what you need is JavaScript to handle the click events:

  • When you click on an image: show the submit button and the comment box.
  • When you click on the submit button: hide the button and the comment box.

Note: I changed your button from type submit to button so you can see the effect. You should put it back as submit on your side.

// show comment box when clicking on image
$("img").on("click", function() {
  $(".comment").css({visibility:"hidden"});
  $(".comment." + $(this).parent().attr("for")).css({visibility:"visible"});
  $("#button").css({visibility:"visible"});
});

// hide button and comment when submitting
$("#button").on("click", function() {
  $(".comment").css({visibility:"hidden"});
  $("#button").css({visibility:"hidden"});
});
body {
  background-color: #ADD8E6;
}
#form {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}
.car {
  float: left;
  margin: 2% 2% 5% 2%;
}
.car label img {
  transform: scale(0.8);
  transition-duration: 0.2s;
}
.car label img:hover {
  cursor: pointer;
  transform: scale(1);
}
.comment {
  position: absolute;
  visibility:hidden;
}
.comment input {
  width: 128px;
  font-size: 1em;
}
.car label img {
  width: 128px;
  display: block;
}
#button {
  position: relative;
  left: 66%;
  margin: 2%;
  visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="form">
  <form method="post" action="#">

    <div class="car">
      <label for="mercedesbenz">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment mercedesbenz">
        <input type="text" id="mercedesbenz" placeholder="Merc" />
      </div>
    </div>
    <div class="car">
      <label for="porche">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment porche">
        <input type="text" id="porche" placeholder="Porc" />
      </div>
    </div>
    <div class="car">
      <label for="bmw">
        <img src="http://tinyurl.com/on964r9">
      </label>
      <div class="comment bmw">
        <input type="text" id="bmw" placeholder="Beemer" />
      </div>
    </div>
    <input id="button" type="button" name="submit" value="Submit">
  </form>

</div>

Upvotes: 1

taesu
taesu

Reputation: 4580

.comment {
    position: absolute;
}

You have comment boxes hidden

Change your submit button css to:

#button {
   position: relative;
   left: 66%;
   margin: 2%;
}

Thus, here is the complete version:

http://jsfiddle.net/2khqdxtr/1/

Upvotes: 1

Related Questions