Reputation: 13

Keep modal open after submission link to a different page in php

I have searched for all posible answers but i didn't find the right one. I have an html page where i want to show up the modal form. This form is in another page written in php. The modal is working and also it is the connection with the database. But when i click on the submit button and the information is not correct it redirect me to the php page. What a want is to stay in the modal and there appear that you need to fill the required field.

P.S. I am sorry if I am not too clear, it is my first post.

The html code (index.php):

<!DOCTYPE html>
<html lang="en" dir="ltr">
    
<head profile="http://www.w3.org/1999/xhtml/vocab">
    <link rel="shortcut icon" href="styles/icons/favicon.png" type="image/png" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Hackaton | IBM Watson</title>
	<link type="text/css" rel="stylesheet" href="styles/style.css" />
    <link type="text/css" rel="stylesheet" href="styles/modal.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
   <!-- Modal -->
    <script type="text/javascript">
    <!--//--><![CDATA[//><!-- 
    $(document).ready(function(){
        $('.openPopup').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true });
            });
        });
    });
    //--><!]]>
    </script>
    <!-- Smooth scroll-->
    
</head>
<body class="html front not-logged-in no-sidebars page-node parallax-active sff-7 slff-7 hff-7 pff-7 form-style-1 wide" >
<!-- There is more code here but not important for this-->

<a class="btn-primary btn openPopup" data-href="form_group.php"><span>Grupo</span></a>
                    <!-- Modal -->
                     <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog" role="document">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-body">
        
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Also more code here-->
</body>
</html>

The php code (form_group.php):

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Formulario de Registro Grupo</title>
	<link rel="stylesheet" href="styles/form.css" />
    <link type="text/css" rel="stylesheet" href="styles/fonts/lato-font.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="body-form">

<?php 
//Variables for SQL
$servername = "localhost";
$username = "prueba";
$password = "";
$dbname = "";
//define variables and set to empty values
$error = false;
$nameErr = $emailErr = $phoneErr = $teamErr = $ideaErr = "";
$name = $email = $phone = $idea = $team = "";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
    $error = true;
  } else {
    $name = test_input($_POST["name"]);
    $error = false;
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
      $error = true;
    }
  }
  
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
    $error = true;
  } else {
    $email = test_input($_POST["email"]);
    $error = false;
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
      $error = true;
    }
  }
    
  if (empty($_POST["phone"])) {
    $phoneErr = "Phone is required";
    $error = true;
  } else {
    $phone = test_input($_POST["phone"]);
    $error = false;
    // check if phone number is valid
    if (!preg_match("/^[0-9+]+$/",$phone)) {
      $phoneErr = "Invalid phone number";
      $error = true;
    }
  }

  if (empty($_POST["idea"])) {
    $ideaErr = "Your idea is required";
    $error = true;
  } else {
    $idea = test_input($_POST["idea"]);
    $error = false;
  }
//Falta el checkbox
  if (empty($_POST["team"])) {
    $teamErr = "Team is required";
    $error = true;
  } else {
    $team = test_input($_POST["team"]);
    $error = false;
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

if(isset($_POST['submit'])) {
    if(!$error){
        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);

        //Check connection
        if ($conn->connect_error){
            die("Connection failed: " . $conn->connect_error);
        }
        // prepare and bind
        $stmt = $conn->prepare("INSERT INTO form_grup (name, email, phone, idea, team) VALUES (?, ?, ?, ?, ?)");
        $stmt->bind_param("sssss", $name, $email, $phone, $idea, $team);

        $stmt->execute();
        $stmt->close();
        $conn->close();

        echo "<script>
            location.replace('index.php#participa')
            </script>";

    }
    else{
         echo "<script>
            </script>";
    }
}
?>
<form id="sign-form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  <h3 class="header">Take part as a team</h3>  
       
	 <label class="label-form" for="idea">Your idea <br>
        <input class="input-text" type="text" name="idea" value="<?php echo $idea;?>" />
     </label> <br>
     <label class="error"><?php echo $ideaErr;?></label>
	 <br><br>

	 <label class="label-form" for="team">Your team description <br>
        <input class="input-text" type="text" name="team" value="<?php echo $team;?>" />
     </label><br>
     <label class="error"><?php echo $teamErr;?></label>
	 <br><br>
	 
     <label class="label-form" for="name">Name <br>
        <input class="input-text" type="text" placeholder="Name" name="name" value="<?php echo $name;?>">
     </label><br>
     <label class="error"><?php echo $nameErr;?></label>
	 <br><br>            
      
     <label class="label-form" for="email">E-mail <br>
        <input class="input-text" type="text" placeholder="E-mail" name="email" value="<?php echo $email;?>">
     </label><br>
     <label class="error"><?php echo $emailErr;?></label>
	 <br><br>
	  
	 <label class="label-form" for="phone">Phone/WhatsApp <br>
        <input class="input-text" type="text" placeholder="+XXX XXXXXXXXX" name="phone" value="<?php echo $phone;?>"/>
     </label><br>
     <label class="error"><?php echo $phoneErr;?></label>
	 <br><br>
	
     <input class="i-submit" type="submit" name="submit" value="Take part">  
</form>

<?php

?>
</body>
</html>

This is the modal: enter image description here

This is what happen after clik on submit without fill the fields: enter image description here

Upvotes: 1

Answers (2)

Alberto Favaro

Reputation: 1840

Start by saying that the code you posted I would write it from the beginning and some things are to be reviewed but to remedy your problem change a little bit javascript in index.php

<script type="text/javascript">
    $(document).ready(function() {
        $('.openPopup').on('click', function() {
            var dataURL = $(this).attr('data-href');
            // Load from form_group.php only the form for view using target #sign-form
            $('.modal-body').load(dataURL + ' #sign-form', function() {
                $('#myModal').modal({show: true});
            });
        });
    });

    // Rebind form submit interceptor after each ajax
    $(document).ajaxComplete(function() {
        $('#sign-form').submit(function() {
            // Need to use $.post() instead $.load() becouse your php code manage only $_POST
            $.post('form_group.php', $(this).serialize() + '&' + $.param({'submit': true}), function(response) {
                // Load from form_group.php only the new form view based on erros
                $('.modal-body').html($(response).filter('#sign-form'));
            });

            return false;
        });
    });
</script>

Pssss.....Your validation code wrote in PHP not work very well becouse not check togheter the required fields. In example when you compile only $_POST['idea'] field the form is validate becouse you check it for last.

Upvotes: 0

Jeremy M.

Reputation: 1164

Take a look at preventDefault() function. It prevent your action to finish. Like :

$('button').click(() => {
    this.preventDefault();
});

will block the button default action.

Or you could just send the form as an ajax post or get request.

Like so :

$.post('index.php', { username: yourUsername }, (data) => {
    //here you have your server response.
});

Upvotes: 1

Keep modal open after submission link to a different page in php

Answers (2)

Related Questions