Django HTML，如何通过 AJAX 传递单选选项选择并加载表单

Question

how to pass value selected from radio button to ajax url. I have radio button select download/upload. CODE:

  <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" />

Based on which one is select button will show. CODE:

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

Once the user selects the options, it will load the data from the other HTML file into div CODE:

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

AJAX CODE:

$("#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 Issue, in this page, I have two forms with the different ID. How to load forms based on the optionsRadios selected.

CODE:

   <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

I am assuming that we stay on the same page: then we can update your code:

Reuse the same selector:

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

Use the checked pseudoselector to see which value was selected to toggle the correct div.

Executing this code will result in multiple elements with the same id name. Better to use class names or unique ids.

$("#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;
});