숨겨진 필드의 값을 모달에서 변경하는 방법

Question

이용 약관에 모달이 적용되어 모달 외부에있는 숨겨진 입력 필드 값 (name = "agree")을 "no"에서 " 사용자가 수락 (Acepto) 버튼을 클릭하여 조건을 수락하면 "예"로 변경됩니다. 이유는 양식을 이용 약관에 동의하여 보낼 수 있기 때문입니다. 미리 감사드립니다.

이

은 (결코 변하지 않는다 "동의"입력 필드의 그것의 작동하지 않는 값) 내 코드입니다 :

<form id="formced" ... > 
.... 
<div class="form-group"> 
     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button> 
</div>        
<!-- Terms and conditions modal --> 
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h3 class="modal-title">Términos y Condiciones</h3> 
     </div> 
     <div class="modal-body"> 
     <p>TERMINOS Y CONDICIONES ...</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button> 
      <button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button> 
     </div> 
    </div> 
</div> 

<input type="hidden" name="agree" value="no" /> 

<script> 
    $(document).ready(function() { 
    // Update the value of "agree" input when clicking the Agree/Disagree button 
    $('#agreeButton, #disagreeButton').on('click', function() { 
     var whichButton = $(this).attr('id'); 
     $('#formced') 
      .find('[name="agree"]') 
       .val(whichButton === 'agreeButton' ? 'si' : 'no') 
       .end() 
    }); 
}); 
</script>  

<a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a> 
      <script type="text/javascript"> 
       function ParaOtrosNavegadores1(){ 
        document.formced.submit(); 
       } 
      </script> 
</form> 

Answer 1

Working fiddle.

처럼 직접 요소를 대상으로 시도 :

$('input[name="agree"]').val(assignedVal); 

코드 :

function ParaOtrosNavegadores1() { 
 
    document.formced.submit(); 
 
} 
 

 
$(document).ready(function() { 
 
    // Update the value of "agree" input when clicking the Agree/Disagree button 
 
    $('#agreeButton, #disagreeButton').on('click', function() { 
 
    var whichButton = $(this).attr('id'); 
 
    var assignedVal = whichButton === 'agreeButton' ? 'si' : 'no'; 
 

 
    $('input[name="agree"]').val(assignedVal); 
 

 
    console.log('Hidden field value is : ' + $('input[name="agree"]').val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<input type="hidden" name="agree" /> 
 

 
<form id="formced"> 
 
    <div class="form-group"> 
 
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button> 
 
    </div> 
 
    <!-- Terms and conditions modal --> 
 
    <div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title">Términos y Condiciones</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>TERMINOS Y CONDICIONES ...</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button> 
 
      <button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a> 
 
</form>