Блог

Главная - Вопросы по программированию - Как создать динамический переключатель с помощью javascript

Как создать динамический переключатель с помощью javascript

#javascript #php #jquery #html

#javascript #php #jquery #HTML

Вопрос:

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

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

Предположим, я создал две строки, и в одной строке я выбираю пол, например, мужской, а во второй строке я хочу выбрать женский, тогда значение переключателя исчезнет из первой строки. Итак, я хочу выбрать разные значения переключателя для разных нескольких строк.

Вот мой код:

 var counter = 0;
$(function(){
  $('p#add_field').click(function(){
    counter  = 1;
    $('#container').append(
      '</br><strong>Item '   counter   '</strong><br />'
        '<input id="field_'   counter   '" name="item[]'   '" type="text" />' 
       '<strong>quantity '   counter   '</strong>' 
       '<input class="qty" id="quantity'   counter   '" name="quantity[]'   '" type="text" />' 
       '<strong>rate '   counter   '</strong>' 
       '<input id="rate'   counter   '" name="rate[]'   '" type="text" />' 
       '<strong>Amount '   counter   '</strong>' 
       '<input id="field_'   counter   '" name="amount[]'   '" type="text" />' 
       '<strong>img '   counter   '</strong>' 
       '<input id="field_'   counter   '" name="image[]'   '" type="file" />' 
       '<strong>Gender '   counter   '</strong>' 
       '<input id="male_'   counter   '" name="gender[]'   '" type="radio" value="male"/>Male' 
       '<input id="female_'   counter   '" name="gender[]'   '" type="radio" value="female"/>female'   
    );
  });
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>

<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
  <div id="container">
    <p id="add_field"><a href="#"><span>Add Field</span></a></p>
  </div>

  <input type="submit" name="submit_val" value="Submit" />
</form>

Пожалуйста, дайте мне знать, где я ошибаюсь.

Ответ №1:

Из списка переключателей с одинаковым названием можно выбрать только один переключатель. т.е. почему вы не можете выбрать переключатель для каждой строки. Чтобы решить эту проблему, используйте counter, чтобы присвоить отдельные имена каждой добавляемой строке, например '<input id="male_' counter '" name="gender' counter '[]" type="radio" value="male"/>Male' 

 var counter = 0;
$(function(){
    $('p#add_field').click(function(){
    counter  = 1;
    $('#container').append(
        '</br><strong>Item '   counter   '</strong><br />'
          '<input id="field_'   counter   '" name="item[]'   '" type="text" />' 
         '<strong>quantity '   counter   '</strong>' 
         '<input class="qty" id="quantity'   counter   '" name="quantity[]'   '" type="text" />' 
         '<strong>rate '   counter   '</strong>' 
         '<input id="rate'   counter   '" name="rate[]'   '" type="text" />' 
         '<strong>Amount '   counter   '</strong>' 
         '<input id="field_'   counter   '" name="amount[]'   '" type="text" />' 
         '<strong>img '   counter   '</strong>' 
         '<input id="field_'   counter   '" name="image[]'   '" type="file" />' 
         '<strong>Gender '   counter   '</strong>' 
         '<input id="male_'   counter   '" name="gender'   counter    '[]" type="radio" value="male"/>Male' 
         '<input id="female_'   counter   '" name="gender'   counter   '[]" type="radio" value="female"/>female'   
        );
    });
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">

     <div id="container">
     <p id="add_field"><a href="#"><span>Add Field</span></a></p>
     </div>

     <input type="submit" name="submit_val" value="Submit" />
     </form>


    </body>
    </html>

Комментарии:

1. рад помочь варуну 🙂

Ответ №2:

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

Итак, измените свой переключатель следующим образом : 

  '<input id="male_'   counter   '" name="gender_' counter '[]" type="radio" value="male"/>Male' 
 '<input id="female_'   counter   '" name="gender_' counter '[]" type="radio" value="female"/>female'