Автоматически добавлять форму другого типа при заполнении - PullRequest
Новая
       1

Автоматически добавлять форму другого типа при заполнении

0 голосов
/ 26 сентября 2018

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

Спасибо за помощь!Я вставлю пример одной формы для вас, чтобы работать на 

<div class="command">

  <form method="post" action="traitement.php">
    <label for="article">Articles:</label><br>
    <input type="text" name="article" placeholder="Ex: T-shirt, XL" id="article">
  </form>

</div>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Вот простой пример, 

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#article").keyup(function(){
                    $('body').append('<form method="post" action="traitement.php" id="secondForm"></form>');
                    $('#secondForm').append('<input type="text" id="secondArticle" name="secondArticle">');
                });
            });
        </script>
    </head>
    <body>
        <div class="command">
            <form method="post" action="traitement.php">
                <label for="article">Articles:</label><br>
                <input type="text" name="article" placeholder="Ex: T-shirt, XL" id="article">
            </form>
        </div>
    </body>
</html>

Вам нужно создать новую форму, когда мы введем что-либо в существующую форму.Итак, мы можем использовать функцию KeyUp в jquery.После ввода чего-либо в текстовое поле будут созданы новая форма и текстовое поле ввода.

Это простой пример.Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: 

$("#article").keyup(function(){
    if($('#secondForm').length == 0){
        $('body').append('<form method="post" action="traitement.php" id="secondForm"></form>');
        $('#secondForm').append('<input type="text" id="secondArticle" name="secondArticle">');
    }
});
0 голосов
/ 26 сентября 2018

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

<script type='text/javascript'>
    function addFields(){
        // Number of inputs to create
        var number = document.getElementById("article").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("container");
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Article" + (i+1)));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "text";
            input.name = "article" + i;
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));
        }
    }
</script>
</head>
<body>

<input type="text" id="article" name="article" placeholder="Ex: T-shirt, XL" value="">Number of Article (enter a number)<br />
<a href="#" id="filldetails" onclick="addFields()">Click Me</a>
<div id="container"/>

РЕДАКТИРОВАТЬ 

<script type='text/javascript'>
    function addFields(){
        for (i=0;i<1;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Article"));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "text";
            input.name = "article";
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));
        }
    }
</script>
</head>
<body>

<input type="button" id="article" onclick="addFields()" name="article" placeholder="Ex: T-shirt, XL" value="">Number of Article (click to add an article)<br />
  
<div id="container"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...