Почему jquery для добавления полей ввода перестает работать, когда я добавляю $.ajax для обработки формы?

ProgramBox

Почему jquery для добавления полей ввода перестает работать, когда я добавляю $.ajax для обработки формы?

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#jquery #javascript-events

#jquery #jquery-события

Вопрос:

Я работаю над фрагментом кода, который запрашивает у пользователя ввод текста. Кроме того, у пользователя есть возможность нажать «Нажать, чтобы добавить», чтобы создать дополнительное поле ввода текста. Я смог заставить эту функциональность работать, используя приведенный ниже jQuery. Однако, когда я попытался добавить больше jQuery для обработки пользовательского ввода с помощью PHP (это начинается с настройки var dataString в файле .js ниже), я обнаружил, что начальная функциональность «нажмите, чтобы добавить» перестала работать.

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

Это мой HTML:

 <body>

<div id="form_inputs">
    <a href="#" id="add">click to add</a>
    <form method="POST">
        <div id="input">
            <p><input type="text" name="user_response[]" id="u_response" /></p>
        </div>
    </form>
    <button id="submit">submit answers</button>
</div>

Это мой текущий js-файл:

$(функция() {

 var count = $('#form_inputs p').length   1;

$('#add').live('click', function(){
    $('<p><input type="text" name="user_response[]" id="u_response" /><a href="#" id="remove">remove</a></p>').appendTo('#input');
    count  ;
    return false;
});

$('#remove').live('click', function(){
   if(count > 2)
   {
        $(this).parents('p').remove();
        count--;
        return false;
   }
});

var dataString = $('input#user_response').val();

$.ajax ({
    type: "POST";
    url: "test3.php";
    data: dataString;
    success: function(){
        $('#form_inputs').html('<div id="message"></div>');
        $('#message').html('<h4>thanks for submitting</h4>');
    }
})
});

Ответ №1:

Ваш вызов ajax не будет обрабатывать вводимые пользователем данные, поскольку он вызывается в функции ready, и его необходимо привязать к кнопке отправки с помощью обработчика событий click, как вы делали с remove и add. Также вы пытаетесь выбрать имя для строки данных (которое также должно быть в этом событии click для вызова ajax), поэтому попробуйте селектор var dataString = $('input[name=user_response]').val(); Также идентификаторы для вновь сгенерированных входных данных должны быть уникальными, поэтому используйте какое-то число, чтобы присвоить ему уникальный идентификатор (например, переменную count). То же самое должно произойти с кнопками удаления (попробуйте сделать класс remove вместо id и обновить обработчик событий click, чтобы использовать это).

 $("#submit").live("click",function()
{
   var inputs = $('input[name^=user_response]');
   var dataString = [];
   for(var i = 0; i < inputs.length; i  )
   {
          dataString.push($(inputs[i]).val());
   }

$.ajax ({
    type: "POST",
    url: "test3.php",
    data: {'user_response':dataString},
    success: function(){
        $('#form_inputs').html('<div id="message"></div>');
        $('#message').html('<h4>thanks for submitting</h4>');
    }
})
});

Если это имеет смысл в том, что вы хотите сделать, вы можете либо оставить dataString в виде массива, либо сделать его истинной строкой. Но вам захочется перебирать каждый из входных данных, иначе он вернет вам только первый (вероятно, есть более эффективные способы перебора с помощью jquery).

1. Спасибо Scrappedcola, я не уверен, что следую идентификаторам для входных данных. Если я использовал name=user_response [] в HTML, не будут ли входные данные сохранены в массиве, из которого я смогу позже извлечь их?

2. Все идентификаторы должны быть уникальными, несмотря ни на что. Только классы / имена (хотя имена — это своего рода проблема с IE в том, как он их обрабатывает, но это выходит за рамки здесь) могут иметь неуникальные значения. Входные данные нигде не будут сохранены, если вы не настроите javascript для этого. Dom поддерживает только то, что есть входные данные, которые являются дочерними элементами неназванной формы выше. Поскольку вы отправляете данные обратно не с помощью формы, а с помощью ajax, я бы не стал заморачиваться с [] в названии. Оглядываясь назад на вышесказанное (извините, это было поспешно, я должен внести изменение).