动态地将字段添加到HTML表单,发送数据并记住添加的字段和值

时间:2018-01-30 16:04:15

标签: 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']);
    ?>

1 个答案:

答案 0 :(得分:1)

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

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