JSPで1つのページから別のページにチェックボックスの値を送る方法

Question

JSPのチェックボックスの値を別のページに送る方法は誰にでも分かりますか？ これは私のコードです

          
  
 
   
 
    
function send() { 
 

 
     $.ajax({ 
 
     url: 'review-order.html', 
 
     data: { 
 
      value1: document.getElementById("pending").value, 
 
      value2: document.getElementById("read").value 
 
     }, 
 
     type: 'post', 
 
     success: function(output) { 
 

 
      alert("It worked!"); 
 
      var result = eval("(function(){return " + output + ";})()"); 
 

 
     } 
 
     }); 
 
    }
 
    
<div class="c-body"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-body"> 
 
       <div class="form-group"> 
 
       <label class="col-md-4 control-label">Action</label> 
 
       <form action="track.php" method="post"> 
 
        <div class="col-md-6"> 
 
        <label class="checkbox-inline"> 
 
        <input type="checkbox" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="20" value="pending">Pending </label> 
 
        <label class="checkbox-inline"> 
 
        <input type="checkbox" id="inlineCheckbox2" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="40" value="option2" value="read"> Read</label> 
 
        <label class="checkbox-inline"> 
 
        <input type="checkbox" id="inlineCheckbox3" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="80" value="option3" name="completed"> Completed </label> 
 
        <button type="button" class="btn btn-theme c-btn-square" onclick="send();"> 
 
          Submit 
 
        </button> 
 
        </div> 
 
       </form> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
     </div>
 
   
 
  
 
 

 

これは私のコードです。私はエラーはありませんが、クリックするとJSP関数が使用されていますが、アラートは生成されません。ここで何が間違っていますか？ id="pending"またはid="read"持つ要素がない

value1: document.getElementById("pending").value, 
value2: document.getElementById("read").value 

：

Answer 1

エラーは次の2行以内でした。ここで

私は

value1: document.getElementsByTagName("input")[0].value, 
value2: document.getElementsByTagName("input")[1].value 

にそれを変更し、私はまた、completeにsuccessを変更しました。

function send() { 
 

 
    $.ajax({ 
 
    url: 'review-order.html', 
 
    data: { 
 
     value1: document.getElementsByTagName("input")[0].value, 
 
     value2: document.getElementsByTagName("input")[1].value 
 
    }, 
 
    method: 'POST', 
 
    complete: function(output) { 
 

 
     alert("It worked!"); 
 
     var result = output; 
 

 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="c-body"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <div class="form-group"> 
 
      <label class="col-md-4 control-label">Action</label> 
 
      <form action="track.php" method="post"> 
 
       <div class="col-md-6"> 
 
       <label class="checkbox-inline"> 
 
       <input type="checkbox" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="20" value="pending">Pending </label> 
 
       <label class="checkbox-inline"> 
 
       <input type="checkbox" id="inlineCheckbox2" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="40" value="option2" value="read"> Read</label> 
 
       <label class="checkbox-inline"> 
 
       <input type="checkbox" id="inlineCheckbox3" class="progressbar_chkbox" type="checkbox" onclick="send();" data-progress="80" value="option3" name="completed"> Completed </label> 
 
       <button type="button" class="btn btn-theme c-btn-square" onclick="send();"> 
 
         Submit 
 
       </button> 
 
       </div> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div>