CODEWITHSUNDEEP
javascriptphphtmllocalhostmamp
Michael Aguayo
Michael Aguayo

Reputation: 11

My index.php running on mamp server is not loading any javascript files for my page

my index.php running on my mamp server is not loading any javascript files I have in my project. I should also add I am learning this as I go. I have good experience with html but I'm new to combining html with php.

I had to link an html form to an email using php. In order to do that I had to change my index.html to index.php which required me to run mamp in order to view the webpage.

Now that I have the webpage running on my localhost server the page is not running any of my javascript files in my project.

The file structure is comprised as follows: project/ css/style.css fonts/ img/image files js/script.js , and other .js files index.php

Here is my form section inside of js/script.js

$(document).ready(function(){
    $("#flip-down").click(function(){
      $("#flip-down-panel").slideToggle("slow");
    });
  });
#flip-down-panel, #flip-down {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
  }
  
  #flip-down-panel {
    padding: 50px;
    display: none; /* <<<<< remove this line to view what's suppose to display
  }
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>contactform</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>
  <section id="contact">
    <div class="container">
      <h2 id="flip-down">
        <font color="black">CONTACT ME</font>
      </h2>
      <div id="flip-down-panel">
        <form action="contactform.php" method="POST">
          <h3>Tell Me Something</h3>
          <div class="row">
            <label>Name:</label>
            <?php
            if (isset($_GET['name'])) {
              $name = $_GET['name'];
              echo '<input name="name" type="username" placeholder="First Name" value="'.$name.'">';
            } else {
              echo '<input name="name"type="username" placeholder="First Name">';
            }
            ?>
          </div>
          <div class="row">
            <label>Email</label>
            <?php
            if (isset($_GET['email'])) {
              $email = $_GET['email'];
              echo '<input name="email" type="email" placeholder="Email address" value="'.$email.'">';
            } else {
              echo '<input name="email" type="email" placeholder="Email address">';
            }
            ?>
          </div>
          <div class="row">
            <label>Message</label>
            <?php
            if (isset($_GET['message'])) {
              $message = $_GET['message'];
              echo '<textarea type="text" placeholder="Write message" value="'.$message.'"></textarea>';
            } else {
              echo '<textarea type="text" placeholder="Write message"></textarea>';
            }
            ?>
          </div>
          <div class="row">
            <input type="submit" class="btn btn-sub" value="Send Message">
          </div>
        </form>
        <?php
        if (!isset($_GET['contactUs'])) {
          exit();
        } else {
          $contactUsCheck = $_GET['contactUs'];
          if ($contactUsCheck == "empty") {
            echo '<p class="error">You MUST fill out all fields!</p>';
            exit();
          } elseif ($contactUsCheck == "char") {
            echo '<p class="error">You used invalid characters for Name!</p>';
            exit();
          } elseif ($contactUsCheck == "invalidemail") {
            echo '<p class="error">You entered an invalid email!</p>';
            exit();
          } elseif ($contactUsCheck == "mailsent") {
            echo '<p class="success">Your message has been sent!</p>';
            exit();
          }
        }
        ?>
      </div>
    </div>
  </section>
  <!--FOOTER-->
  <section>
    <div id="flip-down">
        <div>Copy Right stuffs</div>
    </div>
  </section>
</body>

</html>

Upvotes: 1

Views: 967

Answers (2)

Jesse
Jesse

Reputation: 1425

I'm not all that experienced in PHP myself, but if I'm not mistaken, include just plops the contents of the file into the location that it is called. Instead of including the JS file in PHP, try just creating an HTML tag like so:

<script src="/js/script.js" type="text/javascript"></script>

EDIT: In regards to your updated code, I noticed that in your CSS and HTML you have 2 IDs, flip-down and flip-down-panel, but in your JS, you only have flip and panel. After changing the selectors in the JavaScript to flip-down and flip-down-panel respectively, the example you posted works fine.

Just as a side note, IDs are only meant to be unique across all DOM elements, so if you have an ID that needs to be used more than once like flip-down, I would recommend changing it to a class so it doesn't cause issues with JavaScript when you try to reference everything with that ID.

One last thing, put the script tag that references JQuery before the one that uses it, as it has to be loaded before it can be used.

Upvotes: 1

kaczmen
kaczmen

Reputation: 528

Load your js files like you probably always did: <script src="js/script.js"></script>

If you really want it to be included directly in php (can't see a real reason to do so, but you can..) make sure you include it in between <script> tag like so:

...
<label class="sr-only">Name</label>
    <script>
        <?php 
            include 'js/script.js';
        ?>
    </script>
    <?php
        if( isset($_GET['name']) ) {
        ...

Also make sure the path to file is correct

Upvotes: 0

Related Questions