Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, March 16, 2018

How to add/remove text-box dynamically using JQuery/JavaScript?

This example demonstrates how to add/remove text field in the form dynamically. I saw so many examples on the web related to this query, but this is the simplest method in all of them.

Includes

<link rel="stylesheet"  href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>I have a blue left border.


Script

<script>
    $(document).ready(function () {
        //maximum input boxes allowed
        var max_fields = 5;
        //Fields wrapper
        var wrapper = $(".input_fields_wrap");
        //Add button
        var add_button = $(".add_field_button");

        //Initlal text box count
        var x = 1;
        //On add input button click
        $(add_button).click(function (e) {
            e.preventDefault();
            //Max input box allowed
            if (x < max_fields) {
                //Text box increment
                x++;
                //Add input box
                $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field btn-danger">Remove</a></div>');
            }
        });
        //User click on remove text
        $(wrapper).on("click", ".remove_field", function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });
</script>


Styles

<style type="text/css">
    body{
        position: absolute;
        width: 600px;
        height: 200px;
        z-index: 15;
        top: 50%;
        left: 30%;
        margin: -100px 0 0 -150px;
    }
    .box{
        background: grey;
        padding-top: 10px;
        padding-left: 60px;
        padding-bottom: 10px;
        width: 500px;
        height: auto;
    }
    .btn-success{
        padding: 5px;
    }
    input{
        margin-top: 10px;
    }
</style>


Body

<body>
    <div class="input_fields_wrap box">
        <a href = "http://www.phpjavascript.com/" class="btn-success">Add</a>
        <button class="add_field_button btn-success">Add More Fields</button><br>
        <input type="text" name="mytext[]"><br><br>
<a href = "http://www.phpjavascript.com/" class="btn-success">More</a>
    </div>
</body>


Result


14 comments:



  1. This is exactly what I was looking for. Thanks for sharing this great article!
    That is very interesting Smile I love reading and I am
    always searching for informative information like this!

    https://idkapparel.com/

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank You For Amazing Information Admin Please Check My Article On.gangstar vegas mod apk zombie tsunami mod apk cooking fever mod apk

    ReplyDelete
  4. Thanks for sharing such great piece of information with us. Digital Signature Certificate

    ReplyDelete
  5. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog. Digital Signature Certificate

    ReplyDelete
  6. Digital signatures have really improved the security level .To make the documents secure digital signature and encryption is the best way. And temperament is really not easy. Class 2 Digital Signature Certificate

    ReplyDelete
  7. This is exactly what I was looking for. Thanks for sharing this great article. The quality of your articles and contents is great.
    Digital Signature Certificate in Delhi

    ReplyDelete
  8. Great article indeed. very helpful. I will surely recommend this to my friends.
    Private Detective Agency in Mumbai

    ReplyDelete
  9. I found your article very awesome thanks for sharing these information.You have very strong information about latest topic.
    Private Detective Agency in Mumbai

    ReplyDelete
  10. I found your article very awesome thanks for sharing these information.You have very strong information about latest topic.
    Private Detective Agency in Mumbai

    ReplyDelete
  11. This is exactly what I was looking for. Thanks for sharing this great article. The quality of your articles and contents is great.
    Digital Signature Certificate in Delhi

    ReplyDelete
  12. This is a very good post. This post gives truly high quality information. thank you so much. Keep up the good works.
    NEGIS BOUTIQUE HOME STAY

    ReplyDelete

More Posts

FOLLOW