在表单中单击按钮时创建文本输入

Posted

技术标签:

【中文标题】在表单中单击按钮时创建文本输入【英文标题】:Create text-input on button click in form 【发布时间】:2021-12-08 15:32:17 【问题描述】:

我想创建另一个输入字段,每次单击表单内的按钮“+”。我搜索了一个解决方案,但我找不到任何东西。输入字段应在“+”按钮上方的表单内创建。

这是我当前的代码:

<div class="row">
        <div class="col-md-12">
          <form method="post" id="create-form" action="create.php" enctype="multipart/form-data">
            <?php
            /* getting sample questions */
            /* checks result and creates variables from result */

            if ($sampleamount > 0)  // amount
              $samplequery->bind_result($questionid_sample, $question_sample);
              while ($samplequery->fetch())  // while page can use this variables
                /* echo text-box, value from db */
                $required = $questionid_sample === 1 ? "required" : ""; // one question is always required
                echo "<input class='question-box' type='text' name='" . $questionid_sample . "' placeholder='Write your question in here.' maxlength='255' size='70' value='" . $question_sample . "'" . $required . "> <br>";
              
             else 
              /* no result (db=sample_question) */
              header('Location: ../index.php');
            

            $samplequery->close();
            closeDB($conn);

            /* adds more input for user */
            for ($i = ($sampleamount + 1); $i <= ($additionalquestions + $sampleamount); $i++) 
              echo "<input class='question-box' type='text' name='" . $i . "' placeholder='Write your question in here.' maxlength='255' size='70'> <br>";
            
            ?>
            <br>
            <input class="createsurvey2" type="button" id="addqbtn" name="addqbtn" value="+" >
            <br>
            <input class="createsurvey2" type="submit" name="btnSubmit" value="Create Survey!" >
          </form>
        </div>
      </div>
    </div>
    <script>
            function addquestion() 
              var counter = 2;
              var addqbtn = document.getElementById('addqbtn');
              var form = document.getElementById('create-form');
              var addInput = function() 
                counter++;
                var input = document.createElement("input");
                input.id = 'additionalquestion-' + counter;
                input.type = 'text';
                input.class = 'question-box';
                input.name = 'name';
                input.placeholder = 'Write your question in here.';
                form.appendChild(input);
              ;
              addqbtn.addEventListener('click', function()
                addInput();
              .bind(this));
            ;
          </script>

【问题讨论】:

***.com/questions/39103510/… 【参考方案1】:
<html>
<body>
<button onclick="createNewFiled()" id="incrementBtn" type="button">Click here</button>
    <form id="form" action="">
    </form>
</body>
</html>

<script type="text/javascript">

    var counter = 0;
    var incrementBtn = document.getElementById('incrementBtn');
    var form = document.getElementById('form');

    var createNewFiled = function() 
        counter++;

        var input = document.createElement("input");
        var br = document.createElement("br");  // If you need new line after each input field

        input.id = 'input-' + counter;
        input.classList.add("inputClass");
        input.type = 'text';
        input.name = 'name'+counter;
        input.placeholder = 'Input field ' + counter;

        form.appendChild(input);
        form.appendChild(br);  // If you need new line after each input field
    ;
    
</script>

【讨论】:

它现在终于创建了一个输入字段。但是我需要为新创建的输入提供一个类名,使其看起来像上面的输入字段,并且它还在“+”按钮下方创建输入字段,但它应该在上面添加它们。有可能吗? 类名现在可以工作了,但它仍然在按钮下方添加了输入,有谁知道如何修复它? 根据您的需要编辑答案。请将答案标记为已接受。

以上是关于在表单中单击按钮时创建文本输入的主要内容,如果未能解决你的问题,请参考以下文章

在编辑任何输入时呈现数据表单列表?

当用户单击“打开”时上传文件输入表单

安装输入时如何在输入中选择文本(Vue3)

单击按钮时输入附件视图

使用按钮从组合框中将值传递给文本框单击 MS ACCESS

从表单中获取 .innerhtml 和警报文本