My bootstrap drown down menu doesn't work after ajax submission - javascript

I have a simple login page which logins the user and then redirects them, however I've made a ajax code for the reset password page and after I enter the wrong details and the login page reloads the dropdown menu doesn't work.
I've tried to use the $('.dropdown-toggle').dropdown(); function however it's not working at all.
Login.php
<?php
require_once('./files/functions.php');
require_once('phpmailer/PHPMailerAutoload.php');
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>log in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
</head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form action="" method="POST">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control" name="email">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control" name="password">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button type="submit" name="login" value="Sign In" class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</form>
<?php
// some php code for the login process...
?>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="#">Already have an account?</a></li>
<li><a data-block="#l-register" href="#">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form id="pw">
<p class="m-t-30">Please enter the e-mail address used to register. We will send your new password to that address.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" name="email" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div id="result"></div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</form>
<script type = "text/javascript">
$("form#pw").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login.php",
method: "POST",
data: email,
success: function (result) {
alert("result: " + result);
console.log(result);
$("#result").html(result);
$('.dropdown-toggle').dropdown();
}
});
});
</script>
<?php
// php code for the reset password....
?>
</div>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>


You are including jQuery twice, once from a CDN and once from the local filesystem. Remove the CDN one at the top.
Your inline <script> block appears before your other Javascript resources are included. Try placing it after all other JS files, or even better in your app.min.js where it probably belongs.
It is hard to see the exact problem bcs so much of your code is your own custom stuff we can't see (and likely has nothing to do with this problem). In future, please try creating a minimal, verifiable example of your problem.

Related

Way to submit a "hidden" form through link and button clicks with Vue.js 3?

I am still pretty new to Vue.js 3 and am wondering if there is a way to do what I'm attempting utilizing Vue.js (but I am open to plain JavaScript if not).
I am wishing to submit a form containing hidden fields on a page when any of the link/button items are clicked: the tag containing "Click here", the placeholder image, and the actual button itself.
The fields I'm wishing to submit are contained in the "VISIT specific hidden inputs here" comment.
Additionally, I am wanting an outside link to open when any of those three are clicked. So on submit it will submit the hidden form AND open the link.
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Bootstrap core CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue#3.0.11"></script>
<script src="https://unpkg.com/vee-validate#next"></script>
</head>
<body class="d-flex flex-column h-100" id="awApp">
<header>
<!-- FIXED NAVBAR AND/OR HEADER -->
<nav class="navbar">
<div class="container">
<a class="navbar-brand">
<img :src="imgSrc" alt="logo" width="200" />
</a>
</div>
</nav>
</header>
<!-- / HEADER/NAVBAR -->
<!-- TOP CONTENT -->
<main role="main" class="flex-shrink-0 aw-index">
<div class="container pt-0">
<div class="row gx-5">
<div class="col-md-7 text-light my-auto"></div>
<div class="col-md-5">
<div class="card shadow aw-index p-3">
<div class="card-body">
<h4 class="card-title aw-orange aw-font-droid">
Download Your Book
</h4>
<form>
<!-- VISIT specific hidden inputs here -->
<input type="hidden" name="z_submit_date" v-model="now" />
<input type="hidden" name="z_utm_source" value="Source" />
<input type="hidden" name="z_utm_medium" value="Medium" />
<input type="hidden" name="z_utm_campaign" value="Campaign" />
<input type="hidden" name="z_utm_content" value="Content" />
<!-- /VISIT specific hidden inputs here -->
<h5 class="card-text aw-orange aw-font-freight-light">
<a class="aw-orange" href="" target="_blank">Click here</a>
to download it now.
</h5>
<div class="row text-center">
<a href="" target="_blank">
<img
class="img-fluid"
src="https://via.placeholder.com/150x200"
/>
</a>
</div>
<div class="row text-center mt-4">
<button
type="submit"
class="
btn
aw-bg-orange
text-dark
aw-font-freight-semibold-regular aw-background-orange
"
value="Submit"
>
<strong>Download</strong>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /TOP CONTENT -->
<!-- FOOTER -->
<footer class="footer mt-auto py-3 bg-secondary"></footer>
<!-- /FOOTER -->
</body>
<!-- BOOTSTRAP JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<!-- /BOOTSTRAP JS -->
<!-- VUE APP CODE -->
<script>
const app = Vue.createApp({
data() {
return {
currentYear: new Date().getFullYear(),
now: new Date().toISOString(),
};
},
methods: {
submitForm(e) {},
},
});
app.mount("#awApp");
</script>
<!-- /VUE APP CODE-->
</html>

You could add click-handlers to the links and buttons that calls submitForm, and update submitForm to also open the download URL:
Add a template ref to the <form> so that we can use it later to create the FormData to submit, including the hidden form fields:
<form ref="form">
Add a click-handler to the links and buttons with the .prevent modifier to prevent the default action, since we'll programatically open the download URL:
<a class="aw-orange" :href="downloadUrl" #click.prevent="submitForm" target="_blank">Click here</a>
<a :href="downloadUrl" #click.prevent="submitForm" target="_blank">
<img
class="img-fluid"
src="https://via.placeholder.com/150x200"
/>
</a>
<button #click.prevent="submitForm">
<strong>Download</strong>
</button>
Update submitForm() to create a FormData from the <form> template ref, submit the form with fetch(), and window.open the download URL:
export default {
methods: {
submitForm() {
const formData = new FormData(this.$refs.form)
fetch(this.submitUrl, { method: 'POST', body: formData })
.then(resp => resp.json())
.then(json => this.response = json)
window.open(this.downloadUrl, '_blank')
}
}
}
demo

"The php script was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type" error

I'm trying to insert data to oracle database using php from a bootstrap form. Whenever I try to execute the html file in mozilla firefox following error occurs:
The script from
“http://localhost/CustomerPartInAsma/CUSTOMER%20part%20in%20ASMA/Customer_register.php”
was loaded even though its MIME type (“text/html”) is not a valid
JavaScript MIME type
My html code and php code is given below:
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Business Casual - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/business-casual.min.css" rel="stylesheet">
<link href="css/employee.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="index2.html">Home</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="about2.html">About</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="services2.html">Services</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="gallery2.html">Gallery</a>
</li>
<li class="nav-item active px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="logout.html">Login
</a>
</ul>
</div>
</div>
</nav>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-9 mx-auto">
<div class="card card-signin flex-row my-5">
<div class="card-img-left d-none d-md-flex">
<!-- Background image for card set in CSS! -->
</div>
<div class="card-body">
<h3 class="card-title text-center">Register</h3>
<form class="form-signin" role="form" method="post" action="Customer_register.php">
<div class="form-label-group">
<input type="text" id="inputUsername" name="inputUsername"class="form-control" placeholder="Username" required autofocus>
<label for="inputUserame">Full Name</label>
</div>
<div class="form-label-group">
<input type="text" id="inputContactNo" name="inputContactNo" class="form-control" placeholder="Contact No" required>
<label for="inputContactNo">Contact No</label>
</div>
<div class="form-label-group">
<input type="text" id="inputAddress" name="inputAddress" class="form-control" placeholder="Address" required>
<label for="inputAddress">Address</label>
</div>
<div class="form-label-group">
<input type="text" id="inputAllergies" name="inputAllergies" class="form-control" placeholder="Allergies" required>
<label for="inputAllergies">Allergies</label>
</div>
<div class="form-label-group">
<input type="text" id="inputSkinType" name="inputSkinType" class="form-control" placeholder="Skin Type" required>
<label for="inputSkinType">Skin Type</label>
</div>
<div class="form-label-group">
<input type="text" id="inputHairType" name="inputHairType" class="form-control" placeholder="Hair Type" required>
<label for="inputHairType">Hair Type</label>
</div>
<hr>
<div class="form-label-group">
<input type="password" id="inputPassword" name="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="form-label-group">
<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
<label for="inputConfirmPassword">Confirm password</label>
</div>
<button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit" formaction="index.html" name= "submit">Register</button>
<a class="d-block text-center mt-2 small" href="login.html">Sign In</a>
<hr class="my-4">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer text-faded text-center py-5">
<div class="container">
<p class="m-0 small">Copyright © Your Website 2019</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
PHP code
<?php
$conn=oci_connect("ASMADB","asmadb","localhost/XE");
if(!$conn)
echo 'Failed to connect to Oracle';
else
echo 'successful';
$name = $_POST['inputUsername'];
$phn = $_POST['inputContactno'];
$add = $_POST['inputAddress'];
$s_type= $_POST['inputSkinType'];
$h_type = $_POST['inputHairType'];
$allergies = $_POST['inputAllergies'];
$C_pass= $_POST['inputPassword'];
$sql="INSERT into customer values('','$name','',0.0,'$s_type','$h_type','$allergies','$phn','$add',1,'$rating','$C_pass')";
$objParse = oci_parse($conn, $sql);
$objExecute = oci_execute($objParse, OCI_DEFAULT);
if($objExecute)
{
oci_commit($conn);
echo "Save completed.";
}
else
{
oci_rollback($conn);
$m = oci_error($objParse);
echo "Error Save [".$m['message']."]";
}
oci_close($conn);
?>
It will be very helpful if someone helps me to resolve this error and insert data to my oracle db.

<script src="Customer_register.php"></script>
It looks like you are trying to load a PHP file as JavaScript code. Is this a mistake?
If not, your browser is rejecting the dynamic JavaScript you are trying to load. You have to give the MIME type of JavaScript to the browser. Add this to the top of your Customer_register.php file:
header("Content-type: text/javascript");
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

Form validation in Bootstrap v4.0 not working, required tag not working

/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#submit').on('click', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>
Hello All!
I am trying to add form validation into my site for my contact page. I have run into a snag. No matter what I try none of the bootstrap ways of form validation work. I have tried just the plain required tag, and all of the ways bootstrap explains. I did take out my prevent default in my js file and that didnt change anything. I am at a bit of a loss, any help would be much appreciated thank you.

You need to add required attibute to your inputs and submit your form #contact in Jquery (not button click). Try this one:
/*
Jquery Ajax walk through
1. on click of submit button
2. take ids of inputs and save value to variables
3. put variables in object for easy access
4. make an ajax post request
*/
$('#contact').on('submit', function(e) {
e.preventDefault();
const name = $("#name").val();
const email = $("#email").val();
const message = $("#message").val();
const data = {
name: name,
email: email,
message: message
};
$.ajax({
type: "POST", // HTTP method POST or GET
url: "/contact", //Where to make Ajax calls
dataType: "json", // Data type, HTML, json etc.
contentType: "application/json", // Need this to send proper data to server
data: JSON.stringify(data), //Form variables
success: function(sucess) {
alert("Email has sent");
}
});
/* redirects user to link after the form submits */
window.location.assign('/contact:success');
});
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Services Icon link-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- AOS Link-->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<!-- CSS Link-->
<link rel="stylesheet" href="stylesheets/contact.css">
<!-- Font Awesome Link-->
<script src="https://kit.fontawesome.com/595056b4d4.js" crossorigin="anonymous"></script>
<!-- Google Font Link-->
<link href="https://fonts.googleapis.com/css2?family=Adamina&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<!-- Logo Icon -->
<link rel="icon" href="../images/logo-site.png">
</head>
<body class="container">
<header>
<div class="row">
<div class="container company-col">
<h5 class="company-logo">August Shah</h5>
<h5 class="company-contact">443-681-9485 || augustshah#02pilot.com </h5>
</div>
</div>
</h1>
<div class="row position-fixed dropdown">
<i class=" container fas fa-bars btn btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</i>
<div class="dropdown-menu" id="dropdown-id" aria-labelledby="dropdownMenuButton" data-aos="fade-down"
id="dropdown">
<a class="dropdown-item" href="/">Home</a>
<a class="dropdown-item" href="/portfolio">Web Development</a>
<a class="dropdown-item dropdown-submenu" href="/time"> Aviation</a>
<a class="dropdown-item" href="/contact">Contact</a>
<a class="dropdown-item signin" href="/signin">Signin/Signup</a>
</div>
</div>
</header>
<section id="contact-section">
<div class="row contact-row" id="contact-row-id">
<div class="container contact-container" id="contact-container-id">
<div class="form" data-aos="fade-right" data-aos-duration="2000">
<h1 class="contact-content">Contact Us</h1>
<form method="POST" action="/contact" id="contact">
<div class="form-group">
<label for="name">Name </label>
<br>
<input class="form-control" type="text" name="name" id="name" required>
</div>
<div class="form-group">
<label for="email"> Email </label>
<br>
<input class="form-control" type="email" name="email" id="email" >
</div>
<div class="form-group">
<label for="message"> Messages </label>
<br>
<textarea class="form-control" rows="3" name="message" id="message" ></textarea>
</div>
<input class="form-control btn" type="submit" value="Send" id="submit">
</form>
</div>
<video autoplay loop muted id="video">
<source src="../images/contact-video-2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<div class="row questions-row" id="questions-row-id">
<div class="container align-self-center questions-container" id="questions-container-id">
<h4 class="questions-content">You may contact us if you have questions or clarifications about our services.</h4>
</div>
</div>
<footer class="row ">
<div class="container">
<div class="footer-content" id="footer-content">
<h5 class="text-center footer-content">Copyright © 2020 02Pilot LLC</h5>
</div>
</div>
</footer>
<!-- jQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- AOS-->
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<!-- Popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<!-- Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- AOS-->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init({
duration: 1500
});
</script>
<!-- AJAX POST LINK-->
<script src="javascripts/ajax.js"></script>
</body>
</html>

Try a different way. In your situation i'll create a simple function to validate post and use a modal to show some errors or missing data. Use the return of the functiom that you create and use AJAX to POST the data on the server-side page instead of submit.

You didn't insert the required attribute in the input tag. If you want a field to be required then you need to use it like the following
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<input type="submit">
</form>

Problems with JScript upload plugin

so i'm trying to upload mp3 and mp4 files into my server but it doesn't seem to be uploading. the plugin uploads every other format but mp3 and mp4, it shows it uploading the mp3 and mp4 format but when i check the server the files are not there as they were not uploaded. I am using the drpozone.js plugin. It is a bit lengthy so i can't type it below so i will put the link below.
Here is my Upload page (index.html):
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Samuel NewDay</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dropzone.css" />
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
<script src="js/dropzone.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="favicon.png" >
</head>
<body>
<!-- header
================================================== -->
<header id="main-header">
<div class="row">
<div class="logo">
Samuel Newday
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">
<span class="menu-icon">Menu</span>
</a>
<a class="mobile-btn" href="#" title="Hide navigation">
<span class="menu-icon">Menu</span>
</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#eps">Upload Albums/EPs.</a></li>
<li class="current"><a class="smoothscroll" href="#singles">Singles.</a></li>
<li><a class="smoothscroll" href="##photos">Photoshoots.</a></li>
<li><a class="smoothscroll" href="#events">Events.</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<ul class="header-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</div>
</header> <!-- end header -->
<!-- homepage
================================================== -->
<section id="top">
<div class="row hero-content">
<div class="twelve columns hero-container">
<!-- hero-slider start-->
<div id="hero-slider" class="flexslider">
<ul class="slides">
<!-- slide -->
<li>
<div class="flex-caption">
<h1 class="">Admin Backend</h1>
<h3 class="" style="color: white">Here you can upload <a class="smoothscroll" href="#eps" title="portfolio" >Albums/EPs</a>, <a class="smoothscroll" href="#singles" title="portfolio" >Singles</a>, <a class="smoothscroll" href="#photos" title="portfolio" >Photoshoots</a> and <a class="smoothscroll" href="#events" title="portfolio" >Upcoming Events!</a><br />You can also edit some of the website's information here!</h3>
</div>
</li>
</ul>
</div> <!-- end hero-slider -->
</div> <!-- end twelve columns-->
</div> <!-- end row -->
<div id="more">
<a class="smoothscroll" href="#eps">Manage Site<i class="fa fa-angle-down"></i></a>
</div>
</section> <!-- end homepage hero -->
<!-- Album/EP Upload Section
================================================== -->
<section id="Section1">
<div class="row section-head">
<div class="twelve columns">
<h1>Upload Album/EP<span>.</span></h1>
<hr />
<p>Upload Album/EP according to the steps below.</p>
</div> <!-- end section-head -->
</div>
<div class="row mobile-no-padding">
<div class="process bgrid-half tab-bgrid-whole group">
<div class="bgrid">
<h3>Album/EP Artwok.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
<div class="bgrid">
<h3>Tracks.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
</div> <!-- end process -->
</div> <!-- end row -->
</section> <!-- end album/ep upload -->
<!-- Footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns content group">
<ul class="social-links">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-vimeo-square"></i></li>
<li><i class="fa fa-flickr"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<hr />
</div>
<ul class="copyright">
<li>© Copyright 2017 Samuel NewDay.</li>
</ul>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#top">Back to Top<i class="fa fa-angle-up"></i></a>
</div>
</div> <!-- end row -->
</footer> <!-- end footer -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Java Script
================================================== -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here is the upload.php file:
<?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'uploads';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?>
The JScript file for Dropzone can be found at the below link:
Dropzone Link
Please let me know how i can make it to upload mp3 and mp4 formats. Thank you.

If you're uploading files you have to set the enctype of your form to multipart/form-data otherwise file uploads don't happen (iirc the filename gets sent as the value of the file). Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for a good reference. The enctype attribute is talked about there.

text ouptut in form validation running out of the output message box

I have a form that after submission it displays the result in a box, but when I enter too much information (text) in the text box (textarea) it runs out of the box in the output. The solution that I thought it would work, would be to modify the style of the id="output" at the bottom of page to width:450px, but that didn't work.... are there any other suggestions? Here's the link to the form
here's the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="computer repair, laptop repair, wireless installation, printer installation, printer repair, system administration, website design, web administration, logo design, web application development, computer repair miami fl, web design miami fl, system administration miami fl" name="keywords">
<meta name="Computer Soloution for Small Business and Home Users, Miami, Florida" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Contact Us</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!-- font mfizz -->
<link rel="stylesheet" href="path/to/font-mfizz/font-mfizz.css">
<link rel="stylesheet" href="icons/flaticon.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- custome css style sheet -->
<link href="carosel_style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
<!-- google analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61593038-1', 'auto');
ga('send', 'pageview');
//form validation and submition
function validateForm()
{
var fullName = document.forms['myForm']['name'].value;
var emailAdd = document.forms['myForm']['email'].value;
var subject = document.forms['myForm']['subject'].value;
var message = document.forms['myForm']['message'].value;
var outputMsg = "";
var emailReg = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
//validating form fields
if(fullName == null || fullName == "") {
outputMsg += "Name field can not be empty!\n";
}
if(emailAdd == null || emailAdd == "") {
outputMsg += "Email field can not be empty!\n";
}
//if email field not empty check for valid email add
if(emailAdd != "" && !emailReg.test(emailAdd)) {
outputMsg += "Enter a valid email address!\n";
}
if(message == null || message == "") {
outputMsg += "Text field can not be empty!\n";
}
if(outputMsg != "") {
alert(outputMsg);
return false;
}
//sending data fields to php form
var params = "name="+fullName+"&email="+emailAdd+"&subject="+subject+"&message="+message;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "contact.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(params);
//change the style of "ouput" id
document.getElementById("output").style.border = "solid 1px #5A5A5A";
document.getElementById("output").style.padding = "10px";
document.getElementById("output").style.width = "450px";
}
</script>
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="main-logo" src="img/title_logo1.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li>About</li>
<li>Contact</li>
<li><a target="_blank" href="http://pctechtips.org">Blog</a></li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Comuter Repair</li>
<li>System Administration</li>
<li>Website Design</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/computer-keyboard-closeup-header.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>COMPUTER SOLUTIONS FOR HOME AND SMALL BUSINESS.</h1>
<p>Professional IT Support for Home Office, and Small Bussiness. Computer Repair, Printer Repair, Network Suport, System Administration, and Web Design</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Get a Quote</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="hero-unit" style="padding:20px 100px">
<h1>Contact Us</h1>
<p>Please send us a description of your computer problems and a we will be in touch as soon as possible with a quote:</p>
</div>
<div class="row">
<div class="col-sm-6">
<div class="my-form">
<form class="form-horizontal" name="myForm" >
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-8">
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-8">
<input type="email" name="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Subject:</label>
<div class="col-sm-8">
<input type="text" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea name="message" class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" onclick="validateForm()">Send</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<img id="google-img" src="https://maps.googleapis.com/maps/api/staticmap?center=Miami+Downtown,Miami,FL&zoom=13&size=500x350&maptype=roadmap&markers=color:red%7CMiami+Downtown,Miami,FL">
</div>
</div><!-- /.row -->
<div class="row"> <!-- output message rown -->
<div class="col-sm-6" >
<!-- display form result message here! -->
<p id="output" >
</p>
</div>
<div class="col-sm-6">
<!--nothing goes here!-->
</div>
</div>
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© 2015 Jorge L. Vazquez ·Privacy · Terms</p>
</footer>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

The p element 'output' that has the content needs
#output{
word-wrap:break-word;
}
break-word allows words to break and wrap to the next line
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

You have a few options here. On the box, you can try this for CSS:
overflow-x: scroll;
This will allow you to scroll right/left in the box rather than have it bleed out.
If you want to force it to wrap without scroll:
word-wrap: break-word;

try;
<p id="output" style="overflow: scroll; word-wrap:break-word;"></p>

Categories