如何需要点击一个按钮

我有这个输入按钮的形式：如何需要点击一个按钮

<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48"> 
<input type="button" id="button1" value="continue"> 
     <div id="mydiv"></div> 
<input type="submit" id ="button2" value="next">

而且我用这个JavaScript代码追加的“投入”许多用户已经在此插入按钮：

$(function() 
    { 
     var c = 0; 

     $("#button1").click(function(){ 
      c = $("#inputs").val(); 

      $("#mydiv").html(""); 

      for(i=1;i<=c;i++) 
      { 
       $("#mydiv").append('<input type="text" id="name'+i+'" name="name'+i+'" placeholder="name'+i+'">'); 
       $("#mydiv").append('<input type="number" id="rating'+i+'" name="rating'+i+'" min="1" max="10" placeholder="rating'+i+'"><br/>'); 
      } 
     }); 

     $("#button2").click(function() 
     { 
      if(c===0) 
      alert('must click on "continue" button'); 
      }); 
     }); 

    });

我试图要求用户在“输入”（输入型）输入一个值，然后单击“继续”（按钮1）按钮。用这种方式它不起作用（必须在“输入”中输入一个值，但可以在不点击“button1”的情况下点击“button2”）。我如何要求用户点击“button1”（继续）？

谢谢。

来源

2014-10-27 David Alexandrovich

添加一个按键处理，如果是，就在输入字段中每个键上检查是否有一个值，做你的手柄 – Dwza 2014-10-27 13:34:20

会可能会更好地进行适当的验证，并且只有在符合条件时才显示按钮。 – isherwood 2014-10-27 13:35:15

$(function() { 
 
     var c = 0; 
 
     
 
     $("#button1").click(function() { 
 
      if(!$('#inputs')[0].checkValidity()) { 
 
       alert($('#inputs')[0].title); 
 
       return false; 
 
      } 
 
      c = +$("#inputs").val(); 
 
      
 
      $("#mydiv").html(""); 
 
      
 
      for (i = 1; i <= c; i++) { 
 
       $("#mydiv").append('<input type="text" id="name' + i + '" name="name' + i + '" placeholder="name' + i + '">'); 
 
       $("#mydiv").append('<input type="number" id="rating' + i + '" name="rating' + i + '" min="1" max="10" placeholder="rating' + i + '"><br/>'); 
 
      } 
 
      $('#button2').prop('disabled',false); 
 
     }); 
 
     
 
     $("#button2").click(function() { 
 
      if (c === 0) { 
 
       alert('must click on "continue" button'); 
 
      } else { 
 
       alert('Now let us move ahead'); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48"> 
 
<input type="button" id="button1" value="continue"> 
 
<div id="mydiv"></div> 
 
<input type="submit" id="button2" value="next" disabled>

来源

2014-10-27 13:40:36 PeterKA

实际上'$（'＃button2'）。click（）'是无用的，因为按钮被禁用：D – Dwza 2014-10-27 15:21:51

不是不是:)你不觉得你欠我一个upvote？ :)它仍然听事件...并且有一次'$（'＃button2'）。prop（'disabled'，false）;'运行，它会响应点击。 – PeterKA 2014-10-27 15:26:17

@Dwza检查更新的演示。 – PeterKA 2014-10-27 15:27:07

您可以禁用BUTTON2并使其启用的Button1点击，请参见下面的代码

<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48"> 
<input type="button" id="button1" value="continue"> 
     <div id="mydiv"></div> 
<input type="submit" id ="button2" value="next" disabled>

jQuery的

$(function() 
    { 
     var c = 0; 

     $("#button1").click(function(){ 
      c = $("#inputs").val().trim(); 

      $("#mydiv").html(""); 

      for(i=1;i<=c;i++) 
      { 
       $("#mydiv").append('<input type="text" id="name'+i+'" name="name'+i+'" placeholder="name'+i+'">'); 
       $("#mydiv").append('<input type="number" id="rating'+i+'" name="rating'+i+'" min="1" max="10" placeholder="rating'+i+'"><br/>'); 
      } 

      //enable your button 2 if input has value 
      if(c!='') 
      $("#button2").removeProp('disabled'); 
     }); 

     $("#button2").click(function() 
     { 
      //submit your form here 
     }); 

    });

来源

2014-10-27 13:35:41

改变这一行：

c = $("#inputs").val();

到

if($("#inputs").val() != "") 
    c = $("#inputs").val();

来源

2014-10-27 13:36:42 SmartDev

$(function() { 
 
    var c = 0; 
 

 
    $("#button1").click(function() { 
 

 
    if ($("#inputs").val().length > 0 && $("#inputs").val().length < 3 && $("#inputs").val() != 0) { 
 
     c = $("#inputs").val(); 
 
     $("#mydiv").html(""); 
 

 
     for (i = 1; i <= c; i++) { 
 
     $("#mydiv").append('<input type="text" id="name' + i + '" name="name' + i + '" placeholder="name' + i + '">'); 
 
     $("#mydiv").append('<input type="number" id="rating' + i + '" name="rating' + i + '" min="1" max="10" placeholder="rating' + i + '"><br/>'); 
 
     } 
 
     $("#button2").prop('disabled', false); 
 
    } else { 
 
     $("#button2").prop('disabled', true); 
 
     alert("Value is empty/to low/to high. Insert a value between 1 and 99"); 
 
    } 
 
    }); 
 
    $("#button2").click(function() { 
 
     if(c > 0 && $("#inputs").val() > 0){ 
 
      alert('piu piu'); 
 
     } 
 
     else{ 
 
      alert('sorry, check your inputs'); 
 
      $("#button2").prop('disabled', true); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="number" id="inputs" name="inputs" min="3" max="48" required title="please enter a value between 3 to 48"> 
 
<input type="button" id="button1" value="continue"> 
 
<div id="mydiv"></div> 
 
<input type="submit" id="button2" value="next" disabled>

来源

2014-10-27 13:45:56 Dwza

如何需要点击一个按钮

回答

相关问题