Do not send form with the Jquery animation of the search button

Asked

Viewed 40 times

0

I have this code that animates the search button in Jquery, the problem is that my form does not send the typed data when you click on the Submit button with this animation, as I should do?

HTML

<form class="navbar-form" role="search" action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Procurar">
                        <span class="input-group-btn">
                            <button type="reset" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove">
                                    <span class="sr-only">Close</span>
                                </span>
                            </button>

                            <button type="submit" class="btn btn-default">
                                <span class="fas fa-search procurar">
                                    <span class="sr-only">Search</span>
                                </span>
                            </button>
                        </span>
                    </div>
                </form>

CSS

.navbar-collapse {
        position: relative;
        padding-top: 30px !important;
        max-height: 270px;
    }
    .navbar-collapse form[role="search"] {
    position: absolute;
    top: 35px;
    right: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 0;
}
.input_procurar {
    width: 30%;
    float: right;

}

.procurar {
    font-size: 18px;
}
    .navbar-collapse form[role="search"] button,
    .navbar-collapse form[role="search"] input {
        padding: 8px 12px;
        border-radius: 0px;
        border-width: 0px;
        color: rgb(119, 119, 119);
        background-color: rgb(248, 248, 248);
        border-color: rgb(231, 231, 231);
        box-shadow: none;
        outline: none;
    }
    .navbar-collapse form[role="search"] input {
    padding: 16px 12px;
    font-size: 19px !important;
    font-style: normal;
    color: rgb(160, 160, 160);
    box-shadow: none;
}
    .navbar-collapse form[role="search"] button[type="reset"] {
        display: none;
    }

    @media (min-width: 768px) {
        .navbar-collapse {
            padding-top: 0px !important;
            padding-right: 38px !important;
        }
        .navbar-collapse form[role="search"] {
            width: 38px;
        }
        .navbar-collapse form[role="search"] button,
        .navbar-collapse form[role="search"] input {
            padding: 15px 12px;
        }
        .navbar-collapse form[role="search"] input {
            font-size: 18pt;
            opacity: 0;
            display: none;            
            height: 50px;
        }
    .navbar-collapse form[role="search"].active {
    width: 40%;
}
        .navbar-collapse form[role="search"].active button,
        .navbar-collapse form[role="search"].active input {
            display: table-cell;
            opacity: 1;
        }
        .navbar-collapse form[role="search"].active input {
            width: 100%;
        }
    }

JS

 $(function () {
        // Remove Search if user Resets Form or hits Escape!
        $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
            console.log(event.currentTarget);
            if (event.which == 27 && $('.navbar-collapse .input_procurar form[role="search"]').hasClass('active') ||
                $(event.currentTarget).attr('type') == 'reset') {
                closeSearch();
            }
        });

        function closeSearch() {
            var $form = $('.navbar-collapse form[role="search"].active')
            $form.find('input').val('');
            $form.removeClass('active');
        }

        // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
        $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
            event.preventDefault();
            var $form = $(this).closest('form'),
                $input = $form.find('input');
            $form.addClass('active');
            $input.focus();

        });
        // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission
        // if your form is ajax remember to call `closeSearch()` to close the search container
        $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) {
            event.preventDefault();
            var $form = $(this).closest('form'),
                $input = $form.find('input');
            $('#showSearchTerm').text($input.val());
            closeSearch()
        });
    });

Libraries

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>


<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
html jquery

  • what libraries are you using? other than jquery

  • 1

    I believe it does not send anything because the input does not have name.

  • I put the name in the input but it still doesn’t do the action in the form

  • @Juliohenrique the libraries I added in the question

  • send to whom? same page?

  • he does not do the action in the form

  • then send to whom?

  • like I said when I click the form’s Submit button, it just goes back to the animation for the magnifying glass, and it doesn’t do the form action

  • 1

    Take the second event.preventDefault();.. which prevents the form from being submitted.

  • thanks for the help @sam

Show 5 more comments

1 answer

1


The problem was in the click function, it references a click on a button inside a form with the active class 

 $(function () {
        // Remove Search if user Resets Form or hits Escape!
        $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
            console.log(event.currentTarget);
            if (event.which == 27 && $('.navbar-collapse .input_procurar form[role="search"]').hasClass('active') ||
                $(event.currentTarget).attr('type') == 'reset') {
                closeSearch();
            }
        });

        function closeSearch() {
            var $form = $('.navbar-collapse form[role="search"].active')
            $form.find('input').val('');
            $form.removeClass('active');
        }

        // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
        $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
            event.preventDefault();
            var $form = $(this).closest('form'),
                $input = $form.find('input');
            $form.addClass('active');
            $input.focus();

        });
        // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission
        // if your form is ajax remember to call `closeSearch()` to close the search container
        $(document).on('click', 'button[type="submit"]', function(event) {
            event.preventDefault();
            var $form = $(this).closest('form'),
                $input = $form.find('input');
                alert('valor do input: '+ $form.find('input').val());
                console.log($input.val());
            $('#showSearchTerm').text($input.val());
            closeSearch()
        });
    });
.navbar-collapse {
        position: relative;
        padding-top: 30px !important;
        max-height: 270px;
    }
    .navbar-collapse form[role="search"] {
    position: absolute;
    top: 35px;
    right: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 0;
}
.input_procurar {
    width: 30%;
    float: right;

}

.procurar {
    font-size: 18px;
}
    .navbar-collapse form[role="search"] button,
    .navbar-collapse form[role="search"] input {
        padding: 8px 12px;
        border-radius: 0px;
        border-width: 0px;
        color: rgb(119, 119, 119);
        background-color: rgb(248, 248, 248);
        border-color: rgb(231, 231, 231);
        box-shadow: none;
        outline: none;
    }
    .navbar-collapse form[role="search"] input {
    padding: 16px 12px;
    font-size: 19px !important;
    font-style: normal;
    color: rgb(160, 160, 160);
    box-shadow: none;
}
    .navbar-collapse form[role="search"] button[type="reset"] {
        display: none;
    }

    @media (min-width: 768px) {
        .navbar-collapse {
            padding-top: 0px !important;
            padding-right: 38px !important;
        }
        .navbar-collapse form[role="search"] {
            width: 38px;
        }
        .navbar-collapse form[role="search"] button,
        .navbar-collapse form[role="search"] input {
            padding: 15px 12px;
        }
        .navbar-collapse form[role="search"] input {
            font-size: 18pt;
            opacity: 0;
            display: none;            
            height: 50px;
        }
    .navbar-collapse form[role="search"].active {
    width: 40%;
}
        .navbar-collapse form[role="search"].active button,
        .navbar-collapse form[role="search"].active input {
            display: table-cell;
            opacity: 1;
        }
        .navbar-collapse form[role="search"].active input {
            width: 100%;
        }
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Custom fonts for this template -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>


<form class="navbar-form" role="search" action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Procurar">
                        <span class="input-group-btn">
                            <button type="reset" class="btn btn-default">
                                <span class="glyphicon glyphicon-remove">
                                    <span class="sr-only">Close</span>
                                </span>
                            </button>

 <button type="submit" class="btn btn-default active">
                                <span class="fas fa-search procurar">
                                    <span class="sr-only">Search</span>
                                </span>
                            </button>
                        </span>
                    </div>
                </form>
                
  <div><p id='showSearchTerm'></p></div>

I put it like this: 

$(document).on('click', 'button[type="submit"]', function(event) {

or you can change to 

$(document).on('click', '#id-element', function(event) {

and give an id to the boot

guy:

<button type='button' id='id-element'> oi </button>

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.