How to connect a html form using php and postgresql?

General PHP Help
#5

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…

#6

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>
#7

I will check that also… thanks!

#8

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"]);     
                      }

                    ?>
#9

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

#10

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.

#11

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…

#12

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.

#13

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?

#14

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 …

#15

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

#16

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
#17

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

#18

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

#19

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

#20

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
#21

I hope everything is working for you.

I don’t know your computer specs (Windows, Linux, Apple, other). On Windows, one must run XAMPP as administrator to avoid problems with the user access control system.

Please let me know if you still have problems. :slight_smile:

#22

Does the page still look like this? If so then there’s no real reason to continue messing with code examples and files. PHP clearly isn’t executing so that issue has to be sorted first.

478×721 51.3 KB

If you’re sure you’re accessing through http://localhost and if you’re not comfortable configuring web servers I’d recommend just uninstalling xampp and trying again. It should basically just work. I suggest dropping in a simple hello world php file after installation just to see php is indeed working.

#23

I assume I get your challenge correct.
php will run html codes. All you need to do is save your file as .php
If you are good at php, you can do this. This method is especially useful if you are setting php session, downloading some data to the client end (i.e on the web page) at start or if you have a large data to download from the database. Else stick to saving your html codes in html format only. You can always link to the server to retrieve data and display on same html page without leaving the page. You will need at least Javascript knowledge for this. if you don’t know JS, ok for now, use will have to use multiple html file project concept
XAMMP is good. These are the guidelines:

    • Go to C:\xampp\htdocs
    • Note that this folder has own index.html. So never mix it up with your index.html file. This is why it is best to have a folder for your projects.
    • Create a folder say projects. This folder will hold your projects. Each project will have own folder. So you will now have C:\xampp\htdocs\projects
  • For you current project, create a sub-folder in projects. e.g. lets call it first_project. Then you will have C:\xampp\htdocs\projects\first_project
  • This new folder can now hold all your works.

It is a good practise to keep each language file in own folder. As you progress in this field, you will come across challenges that will demand for this practise. So create the following:

  • C:\xampp\htdocs\projects\first_project\css This folder will hold all your style or css files
  • C:\xampp\htdocs\projects\first_project\js This folder will hold all your js files
  • C:\xampp\htdocs\projects\first_project\php This folder will hold all your php files
  • All your html files eg. index.html and others you may have later will be in root C:\xampp\htdocs\projects\first_project

Suppose you have index.html
To start, do the following:

  • Open XAMPP Control Panel
  • Start Apache and MySQL
  • Wait to turn green
  • On your browser, type localhost/projects/first_project/index.html
  • Your index page should display on your browser

Now it is also a good practise to use the browser developer tools. To me, the best is Google Chrome.
So if you are using Google Chrome,

  • Either right click mouse, select Inspect
  • Or Click on the top button (3 vertical dots), select More tools then select Developer tools.
    i have attached a photosnap of how the page will look like. Your web page can either be on the right, left or top of page depending on your setting. The key thing is that you now have a tool to show you error, which line of the script is creating error and you can progress from there.

There may be the need to uninstall your XAMPP completely. I will suggest after you remove, restart your system before you reinstall.
Lets start from here and see what progress we have

#24

xampp_help
xampp_help1366×628 89.5 KB

Sponsor our Newsletter | Privacy Policy | Terms of Service