show javascript alert box when a field is empty, if not show form elements in a table in another php-CodePudding

its my first php exercice and i am asked to make a form in a php file and show result in another file i chose the post method then i have been asked to show a javascript alert if a field is empty the fist part was fine, but im struggling to mix php js in the submit button for the second part. i tried changing order of code i put the php and script below the form but it still didnt work file 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ex4</title>
</head>
<body>
    <?php 
    function check_input(){
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            if (empty($_POST['nom']) || empty($_POST['prenom']) || empty($_POST['adresse']) || empty($_POST['code_postal'])){
                echo "window.alert(\"un ou plusieurs champs ne sont pas remplis !\");";
            }
        }
    }
    ?>
    <script>
        function myFunction() {
        <?php check_input(); ?>
        }
    </script>

    <form method="post" action="ex4sep.php">
        <fieldset style ="display: inline-block;">
        <legend>Informations Etudiants</legend>
        <table>
            <tr>
                <td style="width:50%;">nom</td>
                <td><input type="text" name="nom"></td>
            </tr>
            <tr>
                <td style="width:50%;">prenom</td>
                <td><input type="text" name="prenom"></td>
            </tr>
            <tr>
                <td style="width:50%;">adresse</td>
                <td><input type="text" name="adresse"></td>
            </tr>
            <tr>
                <td style="width:50%;">code postal</td>
                <td><input type="text" name="code_postal"></td>
            </tr>
            <tr>
            <td colspan="2"><input type="submit" onclick="myFunction"></td>
            <td></td>
            </tr>
        </table>
    </fieldset>
    </form>
</body>
</html>

file 2 of results

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ex4sep</title>
</head>
<body>
    <table border>
            <tr>
                <td>nom</td>
                <td><?php echo $_POST['nom']; ?></td>
            </tr>
            <tr>
                <td>prenom</td>
                <td><?php echo $_POST['prenom']; ?></td>
            </tr>
            <tr>
                <td>adresse</td>
                <td><?php echo $_POST['adresse']; ?></td>
            </tr>
            <tr>
                <td>code postal</td>
                <td><?php echo $_POST['code_postal']; ?></td>
            </tr>
        </table>
</body>
</html>

CodePudding user response：

You can do something like this:

<script>
 var request_method = '<?php echo $_SERVER["REQUEST_METHOD"]; ?>';
 var nom = '<?php echo empty($_POST['nom']) ? $_POST['nom'] : '' ?>';
 var prenom = '<?php echo empty($_POST['prenom']) ? $_POST['prenom'] : '' ?>';
 var adresse = '<?php echo empty($_POST['adresse']) ? $_POST['adresse'] : '' ?>';
 var code_postal = '<?php echo empty($_POST['code_postal']) ? $_POST['code_postal'] : '' ?>';

 function myFunction() {
    if(request_method == "POST") {
       if(nom == '' || prenom == '' || adresse == '' || code_postal == '') {
          alert("un ou plusieurs champs ne sont pas remplis!");
       }
    }
 }
</script>

CodePudding user response：

Bind javascript validation with form like

<form name="myForm" method="post" action="ex4sep.php" onsubmit="return validateForm()">

Then write a JavaScript validation method for it

  <script>
   function validateForm(){
       if( document.forms["myForm"]["nom"].value == '' ){
          alert('Please enter nom');
          return false;
       }
       else if( document.forms["myForm"]["prenom"].value == '' ){
          alert('Please enter prenom');
          return false;
       }
       else {              
          return true;
       }           
    }

  </script>

You have to learn about Javascript/JQuery validation Check this for more details https://www.w3schools.com/js/js_validation.asp