如何需要點擊一個按鈕

我有這個輸入按鈕的形式：如何需要點擊一個按鈕

<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

如何需要點擊一個按鈕

回答

相關問題