Twitter Bootstrap Question posted in

How to prevent input from displaying in address bar-Twitter bootstrap

I want to ask for help from you guys, I have tried coding my javascript so that it doesn’t display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven’t edited and it’s still tidy, but the input is still displayed in address bar in the web browser.

Next is my code version before revision: (JavaScript)

(function ($) {
    "use strict";

    /*==================================================================
    [ Validate ]*/
    var input = $('.validate-input .input100');

    $('.validate-form').on('submit',function(){
        var check = true;

        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }

        return check;
    });


    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
        });
    });

    function validate (input) {
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(]?)$/) == null) {
                return false;
            }
        }
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }
    }

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).removeClass('alert-validate');
    }

    
    
    /*==================================================================
    [ Simple slide100 ]*/

    $('.simpleslide100').each(function(){
        var delay = 7000;
        var speed = 1000;
        var itemSlide = $(this).find('.simpleslide100-item');
        var nowSlide = 0;

        $(itemSlide).hide();
        $(itemSlide[nowSlide]).show();
        nowSlide++;
        if(nowSlide >= itemSlide.length) {nowSlide = 0;}

        setInterval(function(){
            $(itemSlide).fadeOut(speed);
            $(itemSlide[nowSlide]).fadeIn(speed);
            nowSlide++;
            if(nowSlide >= itemSlide.length) {nowSlide = 0;}
        },delay);
    });


})(jQuery);

please help me also to place it in the coding that I have made, apologize that I am still a beginner and I’m confused how to do it anymore, all the help will be appreciated 🙂

This is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AN Newsletter | Subscribe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>



    <div class="flex-w flex-str size1 overlay1">
        <div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
            <div class="wrappic1">
                <a href="../main/index.html">
                    <img src="images/icons/logo.png" alt="IMG">
                </a>
            </div>

            <div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">

                <h3 class="l1-txt1 p-b-34 respon3">
                    Post Box
                </h3>

                <p class="m2-txt1 p-b-46">
                    Follow me for update now!
                </p>

                <form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
                    <div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: [email protected]">
                        <input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">

                        <button class="flex-c-m ab-t-r size2 hov1 respon5">
                            <i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
                        </button>

                        <div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
                            <span>Subcribe Now:</span>
                        </div>
                    </div>
                </form>

            </div>

            <div class="flex-w flex-m">
                <span class="m2-txt2 p-r-40">
                    Follow me
                </span>

                <a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-facebook"></i>
                </a>

                <a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-twitter"></i>
                </a>

                <a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-instagram"></i>
                </a>

                <a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-linkedin"></i>
                </a>

            </div>
        </div>


        <div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
        </div>
    </div>





<!--===============================================================================================-->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
    <script src="js/main.js"></script>

</body>
</html>

P.S:

please don’t block me, I’m still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you

Tags:

2

Answers


  1. 0

    If you are referring to browser address bar with result of your input email address that looks like this:
    /success/success.html?email=xxxx

    This is because you haven’t specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.

    If you do not want to display this data, you should specify your form submit method like this:

        <form class="contact100-form validate-form m-t-10 m-b-10" 
action="../success/success.html" method="POST">

    Keep in mind you have to fetch data on other side as POST also.
    Read more about this here.

    Login or Signup to reply.
  2. 0

    Replace GET method with POST method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search