JQuery. post 함수가 제대로 실행되지 않습니다.

사용자가 선택한 항목을 기반으로 PHP 스크립트에 일부 변수를 게시하고 사용자를 리디렉션하지 않고 현재 페이지에 선택 항목을로드하려고합니다. 그러나 버튼을 클릭하여 데이터를 제출하면 false가 반환되지 않으며 양식에 지정된 작업으로 리디렉션됩니다. 누군가 내 코드의 문제가 어디 있는지 말해 줄 수 있습니까?JQuery. post 함수가 제대로 실행되지 않습니다.

<!DOCTYPE html> 
    <html> 
    <head> 
    <title> Today's Clients</title> 

    <link href="../_css/jquery-ui.min.css"> 
    <script src="../_js/jquery.min.js"></script> 
    <script src="../_js/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
     $("#clientSubmit").submit(function(event) { 
      var clientInformation = $(this).serialize(); 
      $.post('IRCpopulatecheckin.php',clientinformation,clientForm); 
      function clientForm(data) { 
       if (data!='') { 
        $('#clientform').load("IRCpopulatecheckin.php"); 
       } else { 
        alert("your data returned nothing!!! rewrite the code..."); 
       } 
      } // end clientForm 
     return false; 
     }); // end .submit 
    }); // end ready 

    </script> 

    <style> 

    /* css to style and remove everything but text */ 
     #hiddenInput { 
        position :relative; 
        width  :0px; 
        height  :8px; 
        top   :-40px; 
        left  :-230px;260 
        } 
     input[name="dailyClient"] { 
        background-color: white; 
        border: none; 
        font-weight :bold; 
        font-family :sans-serif; 
        font-size: 15px; 
        color: black; 
        cursor: default; 
        line-height: normal; 
        padding: 6px; 
        text-align: center; 
        text-shadow: none; 
        white-space: pre; 
        } 

     input[name="dailyClient"]:hover { 
        color: blue; 
        } 
    </style>     
    <body> 
    <div id="clientform"></div> 

    <?php 

    ini_set('display_errors',1); error_reporting(E_ALL); 

    if(isset($_POST['DATE'])) { 
     $DATE = $_POST['DATE']; 
     }else{ 
      $DATE = date('Y-m-d'); 
      } 

    require_once 'IRCconfig.php'; 

    $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database); 
     if ($connection->connect_error) die($connection->connect_error); 

    $query = "SELECT * FROM CLIENT_CHECKIN WHERE DATE>='$DATE' ORDER BY F_NAME ASC"; 
     $result = $connection->query($query); 

    if (!$result) die ("Database access failed: " . $connection->error); 

    $rows = $result->num_rows; 

    for ($j = 0 ; $j < $rows ; ++$j) 
     { 
      $result->data_seek($j); 
      $row = $result->fetch_array(MYSQLI_NUM); 

      echo <<<_END 
      <pre> 
       <div id="hiddenInput"><div style="display:none"> 
       <form id="clientSubmit" action="IRCpopulatecheckin.php" method="post"><input id="date" type="hidden" name="DATE" value="$row[0]"><input id="first" type="hidden" name="F_NAME" value="$row[1]"><input id="middle" type="hidden" name="M_NAME" value="$row[2]"><input id="last" type="hidden" name="L_NAME" value="$row[3]"></div> 
       <input type="submit" name="dailyClient" value="$row[1] $row[2] $row[3]"></form> 
       </pre> 
    _END; 
     } 

    ?> 
    </body> 
    </html>

출처

2014-12-02 dan5ermou5

보다는 return false 사용 event.preventDefault. 이미 onsubmit에서 매개 변수를 얼마나주의 :

$(document).ready(function(){ 
    $("#clientSubmit").submit(function(event) { 
     event.preventDefault(); 
     var clientInformation = $(this).serialize(); 
     $.post('IRCpopulatecheckin.php',clientinformation,clientForm); 
     function clientForm(data) { 
      if (data!='') { 
       $('#clientform').load("IRCpopulatecheckin.php"); 
      } else { 
       alert("your data returned nothing!!! rewrite the code..."); 
      } 
     } // end clientForm 
    }); // end .submit 
});

출처

2014-12-02 21:48:36 Verhaeren

덕분에 <form class="clientSubmit" action=...

및 스크립트에 양식을 변경합니다. 이전에 preventDefault를 사용하려고했으나 잘못 배치했습니다. – dan5ermou5

@ dan5ermou5 대단히 환영합니다. – Verhaeren

문제는 같은 clientSubmit ID로 여러 양식을 만들 수 있다는 사실을 것 같다.

아이디의 해야 페이지에서 고유 (은 그래서 가장 가능성이 페이지의 첫 번째 양식의 올바른 작동).

동일한 기능을 여러 요소에 적용하려면 클래스를 사용해야합니다.

그래서 작동

$(document).ready(function(){ 
    $(".clientSubmit").submit(function(event) { 
     var self = $(this), 
      clientInformation = self.serialize(); 
     $.post('IRCpopulatecheckin.php',clientinformation,clientForm); 
     function clientForm(data) { 
      if (data!='') { 
       self.load("IRCpopulatecheckin.php"); 
      } else { 
       alert("your data returned nothing!!! rewrite the code..."); 
      } 
     } // end clientForm 
    return false; 
    }); // end .submit 
}); // end ready

출처

2014-12-02 21:53:40

JQuery. post 함수가 제대로 실행되지 않습니다.

답변

관련 문제