javascript - 如何从模态更改隐藏字段中的值

Question

具有条款和条件的模态，如果用户通过单击接受条款，我需要更改模态之外的隐藏输入字段值 (name="agree") 从“否”到"is"接受(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>