新输入的值(通过appendChild)不会通过表单传输

时间:2013-09-20 08:18:57

标签: javascript html forms dom input

我想创建一个包含可变数量的附加信息对的数据集。 这是我意识到的,例如,如果这个数据集编辑一个:

  • 使用sql + php我打印旧的datapairs和一个新的干净数据集(2个输入)
  • 如果用户需要2个以上的新输入,他可以点击“更多数据”,javascript会附加2个新输入

这样可以正常工作,但如果用户提交表单,则不会传输新输入。

我认为代码会更好地解释它:)

这里是js ......

  <script type="text/JavaScript"> 
    input_daten_de_nr=<?php echo count($produkte_daten_de)+2; ?>; 
    function new_input_data_de(){

        var data_input_container = document.getElementById("dynamic_input_daten_de");

        input_daten_de_nr++; 

        var input_1 = document.createElement('input');
        input_1.setAttribute('type', 'text');
        input_1.setAttribute('id',   'daten_de_'+input_daten_de_nr);
        input_1.setAttribute('name',   'daten_de['+input_daten_de_nr+']');
        input_1.setAttribute('value', '');
        data_input_container.appendChild(input_1);

        input_daten_de_nr++; 

        var input_2 = document.createElement('input');
        input_2.setAttribute('type', 'text');
        input_2.setAttribute('id',   'daten_de_'+input_daten_de_nr);
        input_2.setAttribute('name',   'daten_de['+input_daten_de_nr+']');
        input_2.setAttribute('value', '');
        data_input_container.appendChild(input_2);

        var input_br = document.createElement('br');
        data_input_container.appendChild(input_br);

    }
</script> 

......这里是表格......

<form name="form1" method="post" action="index.php" enctype="multipart/form-data">
    ...
    <div id='dynamic_input_daten_de'> 
        <?php
        $number = 1;
        if($produkte_daten_de) foreach($produkte_daten_de AS $daten_de){

            echo "<input type='text' id='daten_de_".$number."' name='daten_de[".$number."]' value='".$daten_de["text"]."'>";
            $number++;

            if(($number % 2)==1) echo "<br>";
        }
        echo "<input type='text' id='daten_de_".$number."' name='daten_de[".$number."]' value=''>";
        $number++;
        echo "<input type='text' id='daten_de_".$number."' name='daten_de[".$number."]' value=''>";
        $number++;
        echo "<br>";
        ?>
    </div> 
    <h3 onClick="new_input_data_de();"> <u style="cursor:pointer;">more data</u></h3>
    ...
</form>

...这里的代码在运行时,点击一下“更多数据”...

<div id="dynamic_input_daten_de">
<input id="daten_de_1" type="text" value="" name="daten_de[1]">
<input id="daten_de_2" type="text" value="" name="daten_de[2]">
<br>
<input id="daten_de_3" type="text" name="daten_de[3]" value="">
<input id="daten_de_4" type="text" name="daten_de[4]" value="">
<br>
</div>

..和print_r($ _ POST)提交后......

Array
(
    ...
    [daten_de] => Array
        (
            [1] => a
            [2] => b
        )

    ...
)

也许某人有办法?


编辑:我改变了我的代码,但这并没有解决问题;(

(感谢@ Dima Shevtchuk这个更好看的代码。)

  <script type="text/JavaScript"> 
    daten_de_nr=<?php echo count($produkte_daten_de)+2; ?>; 
    $( "#new_input_data_de" ).click(function() {
        daten_de_nr++; 
        var e1 = "<input type='text' value='' id='daten_de["+daten_de_nr+"]' name='daten_de["+daten_de_nr+"]'>";
        $("#dynamic_input_daten_de").append(e1);
        daten_de_nr++; 
        var e2 = "<input type='text' value='' id='daten_de["+daten_de_nr+"]' name='daten_de["+daten_de_nr+"]'><br>";
        $("#dynamic_input_daten_de").append(e2);
    });
    $( ".absenden" ).click(function() {
        $("form").submit();
    });
</script> 

1 个答案:

答案 0 :(得分:0)

为什么你没有使用jquery?你的代码会更好。并且可以修理你的包。

 var addInput = function() {
     var el = "<input value = '' name = 'name'>";
     $("form").append(el);
 };

 $("h3").on("click", addInput); 

尝试用JS提交表单

var sendForm = function() {
 $("form").submit();
};

$(".some").("click", sendForm);

追加形成此按钮

<button class = "some" name="Click">