Значения новых входных данных (by appendChild) не передаются формой

Question

Значения новых входных данных (by appendChild) не передаются формой

0

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

с sql + php я печатаю старые datapairs и новый чистый набор данных (2 входа)
если пользователю требуется более 2 новых входных данных, он может использовать klick для "большего количества данных", а 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
        )

    ...
)

Может, кто-то подходил?

EDIT: я изменил свой код, но это не решает проблему; (

(thanx @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>

Dennis Peters 20 сен. 2013, в 10:53

Источник

Теги:

javascript

html

forms

dom

input

1 ответ

Ещё вопросы

Dima Shevtchuk · Answer 1 · 2013-09-20T06-01-00.000Z

почему вы не использовали 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">

Вы правы, код теперь выглядит лучше, но это не решило проблему. (Я редактировал свой первый пост.)