在带有滑块的表单中禁用提交按钮

时间:2019-04-22 02:33:01

标签: javascript php html css

我正在做一项调查,要求我使用滑块来执行此操作,而不是每次按下该按钮时都继续切换页面,如果未进行任何检查,我也不必让该人员切换到下一个滑块上

我有一个执行onclick的功能,如果有人按下继续按钮而没有标记任何东西,我试图禁用该按钮,但是问题是它总是禁用它,并且不会再次启用它

问题

<div class="container">
    <h1 class="text-uppercase mb-0" >TITLE</h1>
    <hr class="star-light">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
    <div class="carousel-item active" >  
    <div class="form-group row"> 


<!--                              S 1                                        -->
<!-- Q 1 -->


<div class="col-md-6 offset-md-3">
<label for="inputEmail4"><b>Q1.</b></label>
</div> 
    </div>
    <div class="form-check">
    <form action="" method="post">
    <input class="form-check-input" type="radio" name="radio" id="r1" value="si">
    <label class="form-check-label" for="r1">
          Yes
    </label>
    </div>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="radio" id="r2" value="no">
    <label class="form-check-label" for="r2">
          No
    </label>
    </div>  
    </div>


<!--                              S 2                                        -->
<!--Q 2 -->


    <div class="carousel-item ">
    <div class="form-group">
    <label for="inputEmail4">&nbsp;<b>Q2</b></label>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="radio2" id="r3" value="si">
    <label class="form-check-label" for="r3"> Yes </label>
    </div>

    <div class="form-check">
    <input class="form-check-input" type="radio" name="radio2" id="r4" value="no">
    <label class="form-check-label" for="r4">No</label>
    </div>


<!-- q3 -->

    <label for="inputPassword4">&nbsp;<b>Q3</b></label>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="radio3" id="r5" value="si">
    <label class="form-check-label" for="r5">Yes</label>
    </div>

    <div class="form-check">
    <input class="form-check-input" type="radio" name="radio3" id="r6" value="no">
    <label class="form-check-label" for="r6">No</label>
    </div>    
    </div>
    </div>

滑块上的继续按钮

  <br></br>
  <div class="container text-center" id="submitB">
  <a href="#carouselExampleControls" onclick="hello(); upCount()" id="submitbttn" role="button" data-slide="next" class="btn btn-info btn-lg" role="button" style="background: #62b539; width:140px; height: 52px;">Continuar</a>
  <br></br>
  </div>

我尝试提取的脚本

<script type="text/javascript">
  function hello() {
    countClicks++;
    }

    var countClicks = 0;


    function upCount() { 
    /*Verify and send to PHP*/

    if (countClicks == 1){
      var one;
      if (document.getElementById('r1').checked) {
          one = document.getElementById('r1').value;
          document.getElementById("submitbttn").disabled = false;
          }
      else if (document.getElementById('r2').checked) {
        one = document.getElementById('r2').value;
        document.getElementById("submitbttn").disabled = false;
        }
        else 
        document.getElementById("submitbttn").disabled = true; 

      $.ajax({
        type:"POST",
        url:"save.php",
        data: {cont: countClicks,one:one},
        success: function(data){
          alert(data);
        }
        });
        } //Fin de 1
</script>

在每个问题中,如果单选按钮上未标记任何内容,我都不要让该人看到下一个滑块

0 个答案:

没有答案