2017-03-14 15 views
0

アップロードボタンをクリックしたときにテキストボックスが空白の場合は、プログレスバーを進めずに検証メッセージを追加しないで検証を追加しようとしています。ただし、テキストボックスに値がある場合は、バーを進めます。ボタンのクリックで検証が必要JavsScript

function makeProgress(){ 
     if ($('#textbox').val() == '') { 
      alert("Please upload a file."); 
     } 
     else 
     { 
     $("#pbarmain").show(); 
     $("#pbar").show(); 
     if(i < 100){ 
      i = i + 4; 
      $(".progress-bar").css("width", i + "%").text(i + " %"); 
      setTimeout("makeProgress()", 100); 
      } 
      } 


      <input type="text" id = "textbox" class="form-control" readonly> 

    <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button> 
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close</button> 
+0

あなたのブラケットがそうでない場合は一致しないと、あなたの関数の最後に ''}を追加します。 –

+0

これは何をするのですか? – RA19

+0

Angelos - それはうまくいきません。進行状況バーがまだ進行し、警告が表示されません。 – RA19

答えて

1

は、私はあなたがプログレスバーが進行したくない場合は、この1のために「falseを返す」する必要があると思います。これは、これはあなたのため<script></script>

内部

+0

それは動作します。ありがとう – RA19

+0

問題ありません。私たちが助けてくれてうれしいです。ここで受け入れられた回答を投票することを忘れないでください。それは私たち全員に役立ちます。 – eeya

+0

こんにちは、どうすればいいですか? Im new to this – RA19

0
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <input type="text" id = "textbox" class="form-control" readonly> 
    <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button> 
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close</button> 
</body> 
</html> 
<script type="text/javascript"> 

    function makeProgress(){ 
     if ($('#textbox').val() == '') { 
      alert("Please upload a file."); 
     } 
     else 
     { 
      $("#pbarmain").show(); 
      $("#pbar").show(); 
      if(i < 100){ 
       i = i + 4; 
       $(".progress-bar").css("width", i + "%").text(i + " %"); 
       setTimeout("makeProgress()", 100); 
      } 
     } 
    } 

</script> 
0

置きJavaScriptコードを助け[他]声明

if ($('#textbox').val() === '') { 
    alert('Your alert message'); 
    return false; 
} 

希望に与えられたものを、実行を停止するiが定義されていないことに注意してください。 プログレスバーの要素および他のバー(pbarmainおよびpbar)と同じです。

また、コードにJqueryを含めるようにしてください。

<script type="text/javascript"> 
    function makeProgress() { 
     if ($('#textbox').val() == '') { 
     alert("Please upload a file."); 
     } else { 
     $("#pbarmain").show(); 
     $("#pbar").show(); 
     if (i < 100) { 
      i = i + 4; 
      $(".progress-bar").css("width", i + "%").text(i + " %"); 
      setTimeout("makeProgress()", 100); 
     } 
     } 
    } 
</script> 

<input type="text" id="textbox" class="form-control"> 
<button type="button" onClick="makeProgress()" class="btn btn-default">Upload</button> 
<button type="button" id="reset" class="btn btn-default" data-dismiss="modal">Close</button> 

JSfiddle

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id = "textbox" class="form-control"> 
 
    <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close </button> 
 
     <button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button> 
 
     <div class="input-group col-xs-12"> <div class="input-group"> <label class="input-group-btn"> <span class="btn btn-primary"> <i class="glyphicon glyphicon-search"></i> Browse <input type="file" id = 'attachmentFileUploadInput' style="display: none;" multiple> </span> </label> <input type="text" id = "textbox" class="form-control"> </div> </div> 
 
     <div class="modal-body"> <div id = "pbarmain" style="display: none" class="progress progress-striped active"> <div id = "pbar" class="progress-bar"></div> </div> 
 
    <script> 
 
    var i=0; 
 
    var makeProgress= function(){ 
 
    console.log("in here"); 
 
      if ($('#textbox').val() == '') { 
 
       alert("Please upload a file."); 
 
      } 
 
      else 
 
      { 
 
      $("#pbarmain").show(); 
 
      $("#pbar").show(); 
 
      
 
      if(i < 100){ 
 
       i = i + 4; 
 
       $(".progress-bar").css("width", i + "%").text(i + " %"); 
 
       setTimeout("makeProgress()", 100); 
 
       } 
 
       } 
 
    } 
 
    </script>

関連する問題