javascript - 动态添加字段到 HTML 表单、发送数据并记住添加的字段和值

标签 javascript php jquery html

我有以下问题:

我想将文本字段添加到我的 html 表单中,将它们发送到我的脚本,然后重定向回来并显示字段数量及其值。

通过 jQuery 添加字段工作正常,但稍后我无法存储这些值,因为它是通过添加 DIV 完成的,并且它们具有相同的名称。

有人能指出我正确的方向吗?

这是我的index.php 和action.php 中的代码

index.php

    <?php
    session_start([
    'cookie_lifetime' => 3600,
    ]);
    ?>
    <html>
    <head>
     <!-- HTML5 -->
    <meta charset='utf-8'>
     <!-- HTML 4.x -->
     <meta http-equiv='content-type' content='text/html; charset=utf-8'>
     <link rel='stylesheet' href='https://unpkg.com/purecss@1.0.0/build/pure-min.css' integrity='sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w' crossorigin='anonymous'>
     <link rel='stylesheet' href='style/style.css'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>
    myDrop2
    </title>
    <script src="scripts/jquery.js"></script>
    </head>
    <body>
    <script>
    function showLoadingMessage() {
      document.getElementById('content').style.display = 'none';
      var message = document.createElement('div');
      message.innerHTML = '<center><h1>Wird gearbeitet, bitte warten!</h1></center>';
      document.body.appendChild(message);
    }
    function checkRemove() {
        if ($('div.d1_drops').length == 1) {
            $('#remove').hide();
        } else {
            $('#remove').show();
        }
    };
    $(document).ready(function() {
        checkRemove()
        $('#add').click(function() {
            $('div.d1_drops:last').after($('div.d1_drops:first').clone());
            $('div.d2_drops:last').after($('div.d2_drops:first').clone());
            checkRemove();
        });
        $('#remove').click(function() {
            $('div.d1_drops:last').remove();
            $('div.d2_drops:last').remove();
            checkRemove();
        });
    });
    </script>
    <center>
    <div id='header'>
       <b>myDrop2</b>
    </div>
    <br><br>
    <div id='content'>
    <br>
    <button id='add'>[ + ]</button>
    <button id='remove'>[ - ]</button>
    <form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'>
    <!-- <form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'> -->
    <div id='settings1'>
    <br>
      Belichtung starten
      <br><br>
      <label>Warten (ms) <input name='firstwait' type='number'></label>
    </div>
    <div id='ventile'>
    <div id='ventil1'>
       <input type='radio' id='v1' name='ventile' value='1' checked='checked'>
       <label for='v1'><h2>1 Ventil</h2></label>
       <br><br>
       <div class='d1_drops'>
      <label>Tropfen 1 Dauer (ms) <input name='d1_drop[]' type='number'></label>
      <br><br>
      <label>Warten (ms) <input name='d1_wait[]' type='number'></label>
       <br><br>
      </div>
    </div>
    <div id='ventil2'>
       <input type='radio' id='v2' name='ventile' value='2'>
       <label for='v2'><h2>2 Ventile</h2></label>
       <br><br>
       <div class='d2_drops'>
      <label>Tropfen 1 Dauer (ms) <input name='d2_drop[]' type='number'></label>
      <br><br>
      <label>Warten (ms) <input name='d2_wait[]' type='number'></label>
      <br><br>
      </div>
    </div>
    </div>
    <div id='settings2'>
      Blitzen
      <br><br>
      <label>Warten (ms) <input name='lastwait' type='number'></label>
      <br><br>
      Belichtung stoppen
      <br><br>
    </div>
    <div id='run'>
      <button type='submit'>ausführen</button>
    <br>
    <br>
    </div>
    </form>
    </div>
    </center>
    </body>
    </html>

action.php

    <?php
    session_start();
    include ('../conf.php');
    $d1_array_drop = $_POST['d1_drop'];
    $d1_array_wait = $_POST['d1_wait'];
    $d2_array_drop = $_POST['d2_drop'];
    $d2_array_wait = $_POST['d2_wait'];
        (...) do stuff with the data (..)
    header('Location: ' . $_SERVER['HTTP_REFERER']);
    ?>

最佳答案

你可以使用sessionstorage或localstorage来记住值,如果你想从php输出值,请先将它们重定向后存储在session|files|db中,然后将值输出到js中即可

<?php
$data=$_SESSION["data"];
?><script>
var data=<?php echo json_encode($data);?>;
</script>

关于javascript - 动态添加字段到 HTML 表单、发送数据并记住添加的字段和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48525740/

相关文章:

javascript - ExtJs 在 ENTER 按键上模拟 TAB

javascript - 显示动态增长的列表

javascript - Express-mysql-session 防止 Passport 反序列化用户运行

php - 如何检查安装的 OpenSSL 版本是否 >= 0.9.8k

javascript - jQuery - 隐藏 <table> 中的最后一个子 <td>

jquery - CSS 不影响特定元素

javascript - 基于网络的计时器

php - Javascript window.location.href 重定向不起作用

php - 如何在 php 中设置输出命令的样式

javascript - 元素不会垂直粘在屏幕中间