labas GamePage visogero labas GamePage visogero - 1 year ago 86
Javascript Question

JS stops working when adding FORM

I want to close up comment box when I click "Cancel" button and also don't let post if there are 0 symbols in comment box. This code is working fine:

$(function () {
$('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) {
var $panel = $(this).closest('.panel-google-plus');
$comment = $panel.find('.panel-google-plus-comment');



if ($panel.hasClass('panel-google-plus-show-comment')) {
$('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) {
var $comment = $(this).closest('.panel-google-plus-comment');

if ($(this).val().length >= 1) {

And when I add FORM in html:

<form method="POST" action="/komentuoti/{{$p->id}}">
{!! csrf_field() !!}
<div class="panel-google-plus-textarea form-group">
<textarea rows="2" cols="60" class="form-control" name="body" placeholder="Rašykite komentarą"></textarea>
<button type="submit" class="btn btn-success disabled">Post</button>
<button type="reset" class="btn btn-default">Cancel</button>
@foreach($p->comment as $com)
<ul class="list-unstyled">
<li><strong>{{$com->user->name}}</strong> {{$com->body}}</li>
<div class="clearfix"></div>

The JS doesnt work anymore, the comment box won't close up. How to fix this ? It working fine without

Answer Source

I'm pretty sure it's because the selector .panel-google-plus-comment > .panel-google-plus-textarea goes through correctly without the form inside, but fails with it. Consider the two snippets below:

<!-- Snippet 1 -->
<div class="outer">
  <div class="inner"></div>

<!-- Snippet 2 -->
<div class="outer">
  <div class="hello">
    <div class="inner"></div>

In the first snippet, the selector .outer > .inner matches because the inner element is a direct child of the outer element. In the second, the selector .outer > .inner does not match, because the inner is the hello's child, not the outer's. Instead, .outer > .hello > .inner would match, because hello is outer's child, and inner is hello's child.

Now, if you used .outer .inner, it would not be a problem in either case, because instead of trying to match direct children, all you care is that it's a descendant. That includes child like the first snippet, grandchild like the second snippet, great-grandchild, and so on. Or, in other words, .outer .inner would even match the <input> in this:

<div class="outer">
  <span class="what">
    <a class="in">
      <em class="the">
        <strong class="world">
            <input class="inner">

If you wanted to just use child selectors to get there, you'd have to use .outer > .what > .in > .the > .world > form > .inner at least.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download