How to perform GET and POST requestion on same form-CodePudding

I am working on a web application where I have to use GET request to render checkboxes in a form and then use POST request to return the selected form data back to the server. But I am unable to perform post request once I receive the checkboxes data using GET request.

I used CherryPy web framework and here is the code for your reference.

HTML Code Snippet

<div >
  <div id="container" >
    <!-- Slider -->
    <section id="slider">
      <div >
        <div style="width: 40%; height: 100px; float: left; font-size: 20px">
          <form method="post" action="processes">
            <label for="storage">Choose size:</label>
            <select name="post_storage" id="storage">
              <option value="1g">1GB</option>
              <option value="5g">5GB</option>
              <option value="8g">8GB</option>
              <option value="10g">10GB</option>
            </select>
            <br /><br />
            <label for="iodepth">Choose iodepth:</label>
            <select name="post_iodepth" id="iodepth">
              <option value="15">15</option>
              <option value="32">32</option>
              <option value="40">40</option>
              <option value="64">64</option>
            </select>
            <br /><br />
            <label for="runtime">Choose runtime:</label>
            <select name="post_runtime" id="runtime">
              <option value="750">750</option>
              <option value="1000">1000</option>
              <option value="1250">1250</option>
              <option value="1700">1700</option>
            </select>
            <br /><br />
            <label for="ramp_time">Choose ramp_time:</label>
            <select name="post_ramp" id="ramp_time">
              <option value="1">1</option>
              <option value="5">5</option>
              <option value="8">8</option>
              <option value="10">10</option>
            </select>
            <br /><br />
            <label for="numjobs">Choose number of jobs:</label>
            <select name="post_jobs" id="numjobs">
              <option value="1">1</option>
              <option value="4">4</option>
              <option value="8">8</option>
              <option value="16">16</option>
            </select>
        </div>
        <h6 style="margin: auto;">Select the disks</h6>
        <div id="disknumbers" style="margin-left: 40%; height: 100px; font-size: 18px">
          <button type="submit" id="disk" style="display: none;">
            Submit
          </button>
          </form>
        </div>
      </div>
    </section>
  </div>
</div>

All the checkboxes I receive from GET request will be inside the div tag (div tag id="disknumbers". So, after selecting all the required checkboxes I need to perform POST request (I submitted the form data with the help of button) Right after submitting POST request has to be done but it is not working.

Javascript Code (For GET Request)

var i = 0;
var j = 0;
var count = 0;
window.onload = function() {
$.get("http://192.168.0.109:8080/g5", function(data){
  count = parseInt(data);
  myFunc();
});
function myFunc() {
  const currentRequest = $.get("http://192.168.0.109:8080/u5", function(datapoint){
document.getElementById("disknumbers").innerHTML  = "<label for=" "disk_" j ">" "<" "input " "type=" "checkbox" " id=" "disk_" j " value=" datapoint " name=" "post_name" " check" ">" datapoint "</label>";
  });
  if (i < count-1){
    setTimeout(function(){myFunc()}, 1);
    i  = 1;
    j  = 1;
  } else{
    i = 0;
    j = 0;
 };
};};

Javascript Code for POST request

  const element = document.getElementById("build");
  element.addEventListener("click", myFunction);

  function myFunction() {
    document.getElementById("disk").click();
  }

I hope someone understood the problem. Thanks in advance.

CodePudding user response：

If I got your point .. You can use addClass to the button :not selector .. See the next example

$(document).on("click" , "button#disk:not(.goPost)" , function(e){
  e.preventDefault();
  console.log("Chechboxes Added From Get request");
  $(this).addClass("goPost").text("Submit Now");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <button type="submit" id="disk">Add Checkbox</button>
</form>