How to connect a html form using php and postgresql?

Hi all,

I am trying to execute this simple form with php and html. I´ve already create the database in Postgresql, and already did the design with bootstrap in html but I haven’t been able to connect it to the database and show it in the browser :frowning: when I open it in localhost C:\inetpub\wwwroot, it doesn’t work like html because of the php part, and when I tried with XAMP and open it trough the C:\xampp\htdocs root, it doesn’t work either. What should I do? I supposed to run php files under XAMP but it’s not working… please help… I am attachign the screenshots with the errors… I will aprreciate your help!!! :slight_smile: Thanks in advance!

My Code

PD: if you need more screenshot let me kno :frowning: I can only post 1 cause I’m a new user. Sorry.

You should follow a basic tutorial about XAMPP. It will be mentioned to

  • install xampp
  • start the xampp control panel
  • start apache
  • go to an URL like http://localhost/xampp

are you accessing the page via a web browser as http://localhost?

Hi John, yes but is not working… this is what it shows…

I saved it like index.html … but is not working… I tried to save it like index.php and use a XAMP root but shows the same like in the screenshoot… I don’t know what am I doing wrong… I tried to run it local because I just need to insert info from users and that’s it…

This is my code…

<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">  

<title>targit Form</title>
   <section id="contact">
	<div class="container">

		<div class="row">
			<div class="col-md-6 offset-md-3">
                
                <div style="" class="logo">
                     <a href="http://www.targit.at" target="_blank"><img title="targit logo" src="img/targit.png" alt="targit gmbh" width="100" hght="40" /></a>
                      </div>
                <hr/>
  				<h1>CONTACT FORM</h1>      			
                
                     <?php

                     $name = $email = $message = "";

                     if ($_SERVER["REQUEST_METHOD"] == "POST") {
                        $name = test_input($_POST["name"]);
                        $email = test_input($_POST["email"]);
                        $message = test_input($_POST["message"]);     
                      }

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

                    ?>
                <?php echo $result;?>  
                
				<p>Please fill out the form.</p>

				<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
				
					<div class="form-group">
						<input type="text" name="name" class="form-control" placeholder="Your name" value="<?php echo $_POST['name']; ?>">
					</div>
				
					<div class="form-group">
						<input type="email" name="email" class="form-control" placeholder="Your email" value="<?php echo $_POST['email']; ?>">
					</div>
					
                  
                    <div class="form-group">
						<input type="text" name="name" class="form-control" placeholder="Job position to apply" value="">
					</div> 
                    
                    <div class="form-group dropdown">
Job position to apply
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">Project Management</a>
   <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Business Consulting</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">IT Consulting</a>
       <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Software Development</a>
         <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Internship</a>
           <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Other</a>
</div>
					<div class="form-group">
						<textarea name="message" rows="5" class="form-control" placeholder="Other info..." value=""><?php echo $_POST['message']; ?></textarea>
					</div>
					
				<!--------------- BUTTONS ---------->	
                 <div style="display:inline;">
					<input type="cancel" name="submit" class="btn btn-primary" value="SUBMIT"/>
					</div>
                    
					<div style="display:inline;">
					<input type="submit" name="cancel" class="btn btn-secondary" value="CANCEL"/>
					</div>
                    
					
				</form>
                
                <?php
                    echo "<h2>Your Input:</h2>";
                    echo $name;
                    echo "<br>";
                    echo $email;
                    echo "<br>";
                    echo $email;
                    echo "<br>";
                ?>
				
			</div>
		</div>

	</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

I will check that also… thanks!

you shouldn’t be seeing PHP code/ be sure that php is running. If you have installed xampp correctly, then we need to see why you are getting php output. hopefully, you named the file as “page.php” and utf-8 encoding.

first, you should move the following block of code to the top of the page, so that it is executed immediately.

<?php
                     $name = $email = $message = NULL;

                     if ($_SERVER["REQUEST_METHOD"] == "POST") {
                        $name = trim($_POST["name"]);
                        $email = trim($_POST["email"]);
                        $message = trim($_POST["message"]);     
                      }

                    ?>

ok I will do this changes … and I’ll let you know… :slight_smile:

it appears to me that the form in this page expects to be part of a post. You need to separate the result of a post from the display of a get page. I’m sure that other people will post here to help you out. I can look at the code in my xampp and try to clean it up a bit in the meantime.

ohh ok thank you!

What I want witht he form is just get the info from the fields and save it in the database. that’s it …
This is a form that I found in a tutorial but the php and connection part to the database is giving me a bad time… :confused:

I’ll try what u said…

i’ve never heard of an input type=“cancel” so you shouldn’t be following a tutorial with such data. If you wanted to create a nutton with a value of cancel that does something to cancel something, then that is possible. However, you would need to use a button and create code to handle that command. I’m trying to clean the code but it is messy. I just wanted to mention that the cancel input needs to be removed.

i’ve made some changes and the page is not throwing errors when i view it my installation of xampp.
you had an ivalid input type cancel, a missing div and no declaration for variable $result.
try this code and see if it works for you.

<?php
  $name = $email = $message = $result = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
      $name = test_input($_POST["name"]);
      $email = test_input($_POST["email"]);
      $message = test_input($_POST["message"]);
?>
<!doctype html>
<head>
  <title>targit Form</title>
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">  
</head>
<body>

<section id="contact">
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div style="" class="logo"><a href="http://www.targit.at" target="_blank"><img title="targit logo" src="img/targit.png" alt="targit gmbh" width="100" hght="40" /></a></div>
      <hr/><h1>CONTACT FORM</h1>      			
      <?php echo $result; ?>  
      <p>Please fill out the form.</p>
      <form method="post" action="">
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Your name" value="<?php echo $_POST['name']; ?>">
        </div>
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Your email" value="<?php echo $_POST['email']; ?>">
        </div>
        <div class="form-group">
	    <input type="text" name="name" class="form-control" placeholder="Job position to apply" value="">
	 </div> 
                    
                    <div class="form-group dropdown">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">Project Management</a>
   <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Business Consulting</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">IT Consulting</a>
       <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Software Development</a>
         <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Internship</a>
           <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Other</a>
</div>

					<div class="form-group">
						<textarea name="message" rows="5" class="form-control" placeholder="Other info..." value=""><?php echo $_POST['message']; ?></textarea>
					</div>
					
				<!--------------- BUTTONS ---------->	

                    
					<div>
					<input type="submit" name="cancel" class="btn btn-secondary" value="CANCEL"/>
					</div>
                    
					
				</form>
                
                <?php
                    echo "<h2>Your Input:</h2>";
                    echo $name;
                    echo "<br>";
                    echo $email;
                    echo "<br>";
                    echo $message;
                    echo "<br>";
                ?>
				
			</div>
		</div>

	</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

<?php
  } else {
?>

<!doctype html>
<head>
  <title>targit Form</title>
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">  
</head>
<body>

<section id="contact">
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div class="logo"><a href="http://www.targit.at" target="_blank"><img title="targit logo" src="img/targit.png" alt="targit gmbh" width="100" hght="40" /></a></div>
      <hr/><h1>CONTACT FORM</h1>
      <p>Please fill out the form.</p>
      <form method="post" action="">
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Your name" value="">
        </div>
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Your email" value="">
        </div>
        <div class="form-group">
	    <input type="text" name="name" class="form-control" placeholder="Job position to apply" value="">
	 </div> 
                    
                    <div class="form-group dropdown">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">Project Management</a>
   <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Business Consulting</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">IT Consulting</a>
       <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Software Development</a>
         <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Internship</a>
           <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Other</a>
</div>

					<div class="form-group">
						<textarea name="message" rows="5" class="form-control" placeholder="Other info..." value=""></textarea>
					</div>
					
				<!--------------- BUTTONS ---------->	
                 <div>
					<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
					</div>
                    
					
				</form>
				
			</div>
		</div>

	</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

</body>
</html>
<?php
  }
      function test_input($data) {
          $data = trim($data);
          $data = stripslashes($data);
          $data = htmlspecialchars($data);
          return $data; 
      }
  exit;
?>

however, the code is not good from a programming point-of-view. One shouldn’t get caught up mixing so much php with html. I reccomend that you store a common header and footer php file for use as a template, then just call the content file based upon a post or a get. I can illustrate this when i have free time to do so. how are you connecting to your database? is $result supposed to be a database procedure?

the $result shows the “result” of the action when you click button… and you are right with cancel… I will delete and try to clean the fields in a different way loong time ago that I don’t touch php code etc so I’m trying to remember all the princiles and stuff…thanks a lot for your help I will see what else can I do …

also I am tryign to check if my XAMP is well configurated … another person here told me I have to check that too… :confused:

I’ve tried to help you organize your code so that debugging will be easier. We have three files: deya.php which will include a get request page of form.php or a post request page of thankyou.php

deya.php

<?php

$name = $email = $message = $result = NULL;

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = trim(htmlentities($_POST["name"], ENT_QUOTES, "UTF-8"));
    $email = trim(htmlentities($_POST["email"], ENT_QUOTES, "UTF-8"));
    $message = trim(htmlentities($_POST["message"], ENT_QUOTES, "UTF-8"));
    include "thankyou.php";
} else {
    include "form.php";
}

exit;
?>

form.php

<?php
  header("Content-Type: text/html; charset=utf-8");
?>
<!doctype html>
<head>
  <title>targit Form</title>
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">  
</head>
<body>

<section id="contact">
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div class="logo"><a href="http://www.targit.at" target="_blank"><img title="targit logo" src="img/targit.png" alt="targit gmbh" width="100" hght="40" /></a></div>
      <hr/><h1>CONTACT FORM</h1>
      <p>Please fill out the form.</p>
      <form method="post" action="">
        <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Your name" value="">
        </div>
        <div class="form-group">
          <input type="email" name="email" class="form-control" placeholder="Your email" value="">
        </div>
        <div class="form-group">
	    <input type="text" name="name" class="form-control" placeholder="Job position to apply" value="">
	 </div> 
                    
                    <div class="form-group dropdown">
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">Project Management</a>
   <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Business Consulting</a>
     <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">IT Consulting</a>
       <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Software Development</a>
         <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Internship</a>
           <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Other</a>
</div>

					<div class="form-group">
						<textarea name="message" rows="5" class="form-control" placeholder="Other info..." value=""></textarea>
					</div>
					
				<!--------------- BUTTONS ---------->	
                 <div>
					<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
					</div>
                    
					
				</form>
				
			</div>
		</div>

	</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

thankyou.php

<?php
  header("Content-Type: text/html; charset=utf-8");
?>
<!doctype html>
<head>
  <title>targit Form</title>
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">  
</head>
<body>

<section id="contact">
<div class="container">
  <?php
      echo "<h2>Your Input:</h2>";
      echo $name;
      echo "<br>";
      echo $email;
      echo "<br>";
      if (!empty($message)) { echo $message; } else { echo "no message."; }
      echo "<br>";
  ?>
</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="bootstrap-4.3.1-dist/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

i don’t know what all of that targit stuff is but this should help you build your form process easier.

1 Like

You mentioned you saved as index.html
Most web servers will not execute PHP in .html files. You probably need to save the files as .php

I tried alredy with index.php and tried with XAMP… and nothing…

what does the url (web address) look like when you test one of the php files?

waoooo I didn’t see this message… I will try this… thank you so much! I really appreciate your help… I am really frustrated but I hope it will work :frowning: … I will let you know how it goes …

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service