Django HTML, как передать опцию радио выбрать через AJAX и загрузить форму

Question

как передать значение, выбранное с помощью радиокнопки, на ajax url. У меня есть переключатель выбора загрузки / выгрузки. КОД:

  <form id="listofiles" action="" class="post-form" role=form method="post">{% csrf_token %}
  Select: Download:
  <input class="form-check-input" name="optionsRadios" type="radio" value="download">
  or Upload:
  <input class="form-check-input" name="optionsRadios" type="radio" value="upload">
  BUTTON: 
  <input type="submit" value="GO" id="download" name="download" class="btn btn-info" />
  <input type="submit" value="GO" id="upload"  name="upload" class="btn btn-warning" />

В зависимости от того, какая кнопка выбрана, будет отображаться. КОД:

<script>
$("input[name='optionsRadios']:radio")
  .change(function() {
    $("#upload").toggle($(this).val() == "upload");
    $("#download").toggle($(this).val() == "download"); });
</script>

Как только пользователь выберет опции, он загрузит данные из другого HTML файла в div КОД:

<div id="fetchdata" align="center">
  <!-- LOADING DATA FROM THE AJAX listofiles.html -->
</div>

AJAX КОД:

$("#listofiles").submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    url: 'listofiles.html',
    type: $(this).attr('GET'),
    data: $(this).serialize(), // get the form data
    success: function(data) { // on success..
        $("#fetchdata").html(data); // update the DIV
        console.log(data);
    }
});
return false;
});

HTML: listofiles. html Проблема, на этой странице у меня есть две формы с разными идентификаторами. Как загрузить формы на основе опций RAD ios выбран.

КОД:

   <div id="download" style="display:none"><div align="center" class="container">
   <form id="download" action="download" role=form method="POST" class="post-form">{% csrf_token %}
   . . . 
   <div class="col" align="left">
     <button type="submit" name="download" class="btn btn-primary btn-lg">DOWNLOAD</button>
   </div></div></form></div></div>

   <div id="upload" style="display:none"><div align="center" class="container">
   <form id="upload" action="upload" role=form method="POST" class="post-form">{% csrf_token %}
   . . . 
   <div class="col" align="left">
     <button type="submit" name="upload" class="btn btn-primary btn-lg">UPLOAD</button>
   </div></div></form></div></div>

Answer 1

Я предполагаю, что мы остаемся на той же странице: тогда мы можем обновить ваш код:

Повторно использовать тот же селектор:

$("input[name='optionsRadios']:radio:checked").val() == "upload");

Используйте псевдоселектор checked, чтобы увидеть, какой значение было выбрано для переключения на правильный div.

Выполнение этого кода приведет к нескольким элементам с одинаковым именем идентификатора. Лучше использовать имена классов или уникальные идентификаторы.

$("#listofiles").submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    url: 'listofiles.html',
    type: $(this).attr('GET'),
    data: $(this).serialize(), // get the form data
    success: function(data) { // on success..
        $("#fetchdata").html(data); // update the DIV
        $("div[id='upload']").toggle($("input[name='optionsRadios']:radio:checked").val() == "upload");
        $("div[id='download']").toggle($("input[name='optionsRadios']:radio:checked").val() == "download");  
//there is already another element with id download | you need to change that, so circumventing like this for now.
        }
    }
});
return false;
});