bootstrap jQuery поле не выровнено и отформатировано - PullRequest
Новая
       6

bootstrap jQuery поле не выровнено и отформатировано

0 голосов
/ 13 марта 2020

Я делаю форму, которая будет иметь 3 ввода (имя, фамилия и адрес электронной почты). Должна быть возможность добавить дополнительные группы входов.

3 поля и кнопка должны быть одной строкой и правильно расположены. Тем не менее, они появляются один под другим. не уверен, где ошибка.

Это код 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Customer Query</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            //group add limit
            var maxGroup = 5;
            
            //add more fields group
            $(".addMore").click(function(){
                if($('body').find('.fieldGroup').length < maxGroup){
                    var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                    $('body').find('.fieldGroup:last').after(fieldHTML);
                }else{
                    alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });
            
            //remove fields group
            $("body").on("click",".remove",function(){ 
                $(this).parents(".fieldGroup").remove();
            });
        });
    </script>
</head>

<body>
    <form  method="post" action="submit.php" style="widows: 500px; margin:auto">

        <div class="form-group fieldGroup">
            <div class="input-group">
                <input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
                <input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
                <input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
                <div class="input-group-addon">
                    <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                </div>
            </div>
        </div>

        <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />

    </form>

    <!-- copy of input fields group -->
    <div class="form-group fieldGroupCopy" style="display: none;">
        <div class="input-group">
            <input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
            <input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
            <input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
            <div class="input-group-addon">
                <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
            </div>
        </div>
    </div>
</body>

</html>

любая помощь будет отличной

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Я смог решить проблему. делимся кодом: 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>L</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            //group add limit
            var maxGroup = 5;
            
            //add more fields group
            $(".addMore").click(function(){
                if($('body').find('.fieldGroup').length < maxGroup){
                    var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                    $('body').find('.fieldGroup:last').after(fieldHTML);
                }else{
                    alert('Maximum '+maxGroup+' groups are allowed.');
                }
            });
            
            //remove fields group
            $("body").on("click",".remove",function(){ 
                $(this).parents(".fieldGroup").remove();
            });
        });
    </script>
    <style>
        form {
            padding: 40px 40px 30px !important;
            background: #ebeff2;
        }

        .mt32 {
            margin-top: 32px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="mt32"> Customer Query</h2>

        <form class="form-inline mt32" action="#">
            <div class="form-group fieldGroup">
                <div class="input-group">
                    <label for="FirstName">FirstName</label>&nbsp;
                    <input type="text" class="form-control" id="FirstName"
                        placeholder="FirstName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="LastName">LastName</label>&nbsp;
                    <input type="text" class="form-control" id="LastName"
                        placeholder="LastName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="email">Email</label>&nbsp;
                    <input type="email" class="form-control" id="email" placeholder="Your email">&nbsp;&nbsp;
                    <div class="input-group-addon">
                        <a href="javascript:void(0)" class="btn btn-success addMore"><span
                                class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
                    </div>
                    <br/>
                    <br/>
                </div>
            </div>
        </form>
        <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
        <div class="form-group fieldGroupCopy" style="display: none;">
            <div class="input-group">
                <label for="FirstName">FirstName</label>&nbsp;
                <input type="text" class="form-control" id="FirstName"
                    placeholder="FirstName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="LastName">LastName</label>&nbsp;
                <input type="text" class="form-control" id="LastName"
                    placeholder="LastName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="email">Email</label>&nbsp;
                <input type="email" class="form-control" id="email" placeholder="Your email">&nbsp;&nbsp;
                <div class="input-group-addon">
                    <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
                </div>
                <br/>
                <br/>
            </div>
        </div>
    </div>
</body>

</html>
0 голосов
/ 13 марта 2020

Это можно сделать с помощью встроенной формы.

Ссылка bootstrap ссылка: https://getbootstrap.com/docs/4.0/components/forms/ Inline form sample

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...