すべてのフィールドに値が設定されるまで送信ボタンを無効にする

私はjqueryの使用時に新規で、jqueryコードをコピーしました。すべてのフィールドに値が設定されるまで送信ボタンを無効にする

フォームのすべてのフィールドが塗りつぶされていない場合、jqueryはSumbitボタンを無効にします。フォームは既にテーブルのデータで満たされていますが、送信ボタンはまだ使用できません。

どこが間違っていましたか？

<?php 
error_reporting(0); 

session_start(); 
include('dbconn.php'); 
$admin_ID = $_SESSION['admin_ID']; 

if (empty($_SESSION['admin_ID']) && parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) != '../index.php') { 
    header('Location: ../index.php'); 
    exit; 
} 



$query = "SELECT * FROM tbl_admin WHERE admin_ID='$admin_ID'"; 
$result = mysqli_query($con, $query); 

if (!$query) { 
    printf("Error: %s\n", mysqli_error($con)); 
    exit(); 
} 
?> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/add.css" type="text/css" media="screen"/> 
     <script type="text/javascript"> 
     (function() { 
    $('form input').keyup(function() { 

     var empty = false; 
     $('form > input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('#Submit').attr('disabled', 'disabled'); 
     } else { 
      $('#Submit').removeAttr('disabled'); 
     } 
    }); 
})() 




     </script> 

    </head> 
    <body> 
     <div id="header"> 
      <img src="images/sbma.png" class="logo" id="logo"></img> 
      <a style = "float:left;">My Account</a> 
      <a href="MainMenu.php">Home</a> 
     </div> 
     <div id="navigation"> 

     </div> 
     <div id="section"> 
     <?php while($row1 = mysqli_fetch_array($result)):;?> 
      <form class="form-style-1" action="MyUpdateProcess.php" method="post"> 
       <ul> 
       <fieldset class="fieldset-company"> 
        <li> 
         <label>Username:</label> 
         <input type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" /> 
        </li> 
        <li> 
         <label>Password:</label> 
         <input type='password' name='password' id='input' value="<?php echo $row1['admin_Password'];?>" maxlength="50" /> 
        </li> 
        <li> 
         <label>First Name:</label> 
         <input type='text' name='fname' id='input' value = "<?php echo $row1['admin_Fname'];?>" maxlength="50" /> 
        </li> 
        <li> 
         <label>Middle Name:</label> 
         <input type='text' name='mname' id='input' value="<?php echo $row1['admin_Mname'];?>" maxlength="50" /> 
        </li> 
             <li> 
         <label>Last Name:</label> 
         <input type='text' name='lname' id='input' value = "<?php echo $row1['admin_Lname'];?>" maxlength="50" /> 
        </li> 
        <li> 
       </fieldset> 
       <fieldset class="fieldset-contacts">      
         <label>Email:</label> 
         <input type='text' name='email' id='input' value="<?php echo $row1['admin_Email'];?>" maxlength="50" /> 
        </li> 
        <li> 
         <label>Telephone:</label> 
         <input type='text' name='telephone' id='input' value="<?php echo $row1['admin_Telephone'];?>" maxlength="50" /> 
        </li> 
        <li> 
         <label>Mobile:</label> 
         <input type='text' name='mobile' id='input' value = "<?php echo $row1['admin_Mobile'];?>" maxlength="50" /> 
        </li> 
      <?php endwhile;?>     


       </fieldset> 
        <li> 
         <input id="Submit" type='Submit' disabled="disabled" name='Submit' value='Submit' /> 
        </li> 
       </ul> 
    </form> 
     </div> 
     <div id="footer"> 
    S.B.M.A Centralized Information System 
    </div> 
    </body> 
</html>

出典

2016-04-07 JK. Constantine

'$（"＃Submit "）。prop（" disabled "、false）;'また、前の部分が動作しているかどうかを確認する前に空の値を表示します。 –

また、$（form）.submit（）関数で検証を行いたいので、keyUpのすべての入力を確認する必要はありません。 – Filip

私は試しましたが、依頼はまだ無効になっています –

$('form > input')は、IMMEDIATEの子を意味する。

$('form input')は、任意の子孫を意味します。

入力要素のいずれも、フォーム要素の直接の子ではありません。

$('form input')に変更してください。

attrの代わりにpropを使用するなど、他の変更があります。同様に、keyupとchangeイベントの両方にバインドします。

(function() { 
    $('form input').on('keyup change', function() { 

     var empty = false; 
     $('form input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('#Submit').prop('disabled', true); 
     } else { 
      $('#Submit').prop('disabled', false); 
     } 
    }); 

    $('form input:eq(0)').keyup(); // run the check 
})()

でも、これは機能しません。どうして？ whileループは1つ以上の<form>要素を閉じずに出力します。フォームの中にはフォーム内にフォームがあります。ループの数に応じて等があります。これにより予期しない動作が発生します。 whileループを本当に処理する方法を決定し、フォームが適切に印刷されるようにする必要があります。

また、submit要素は、それが入っている1つのフォームのみを送信します。したがって、もう1つしか持たないようにしてください。

HTML IDは一意である必要があります！これらすべての入力からid="input"を削除する必要があります。そうしないと、予期しない動作が発生します。

出典

2016-04-07 14:29:50 aaronofleonard

私はそれを試しましたが動作していません –

コードは、私がさらなる検査で思ったよりも多くの問題を抱えています。 – aaronofleonard

以下、

$（ 'フォーム入力[タイプ= "テキスト"]'）。keyUpイベント（関数（）{

var empty = false; 
    $('form input[type="text"]').each(function() { 
     if ($(this).val() == '') { 
      empty = true; 
     } 
    }); 

    if (empty) { 
     $('#Submit').attr('disabled', 'disabled'); 
    } else { 
     $('#Submit').removeAttr('disabled'); 
    }

またはテキストボックスにクラスを追加しているかどうかチェックを行います...私はまだコメントできません

$(document).ready(function() { 
    $('form input').keyup(function() { 

     var empty = false; 
     $('form input').each(function() { 

      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('#Submit').attr('disabled', 'disabled'); 
     } else { 
      $('#Submit').removeAttr('disabled'); 
     } 
    }); 
});

出典

2016-04-07 14:34:39

「必須」属性を次のようなすべての入力フィールドに追加しないでください：<input required type='text' name='username' id='input' value = "<?php echo $row1['admin_Username'];?>" maxlength="50" /> ？ボタンは無効になることはありませんが、各フィールドがいっぱいになるまでは何もしません。

出典

2016-04-07 14:35:09

申し訳ありません：これらのクラスは、あなたはまた、次のように試すことができます値を持つかどうか

出典

2016-04-07 14:43:09 D14n4

haha yeah that works しかし、私はまだ私のコードがうまくいかない理由を知りたいです。 –

ええ、私はそれがあなたが尋ねたものではないことを知っています。だから私は選択肢があれば答えたのではなくコメントしたのです;）私はJSの専門家にあなたのコードを手伝ってもらうでしょう:) – D14n4

すべてのフィールドに値が設定されるまで送信ボタンを無効にする

答えて

関連する問題