VueJS 'if' function not working (Laravel Spark) - javascript

I have tried editing the default register form in Laravel Spark to accommodate for a new design I have implemented. However, I am having some issues with the register page, where 'v-if' is not working and all page components are showing, like so:
Image: https://i.gyazo.com/2b00ac14ec441649c9951ba3e216ed0e.png (not allowed to post images directly).
Here is my code for the layout blade (resources/views/vendor/spark/layouts/guest.blade.php):
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Information -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>#yield('title', config('app.name'))</title>
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Roboto Web Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<!-- MDK -->
<link type="text/css" href="{{ asset('vendor/material-design-kit.css') }}" rel="stylesheet">
<!-- Sidebar Collapse -->
<link type="text/css" href="{{ asset('vendor/sidebar-collapse.min.css') }}" rel="stylesheet">
<!-- App CSS -->
<link type="text/css" href="{{ asset('css/style.min.css') }}" rel="stylesheet">
<!-- Sweetalert CSS -->
<link href="/css/sweetalert.css" rel="stylesheet">
<!-- Extra Page Scripts -->
#yield('scripts', '')
<!-- Global Spark Object -->
<script>
window.Spark = <?php echo json_encode(array_merge(
Spark::scriptVariables(), []
)); ?>;
</script>
</head>
<body class="#yield('body-class')">
<div id="spark-app" v-cloak>
<div class="row">
<!-- Main Page Content -->
#yield('content')
</div>
</div>
<!-- jQuery -->
<script src="{{ asset('vendor/jquery.min.js') }}"></script>
<!-- Bootstrap -->
<script src="{{ asset('vendor/tether.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap.min.js') }}"></script>
<!-- MDK -->
<script src="{{ asset('vendor/dom-factory.js') }}"></script>
<script src="{{ asset('vendor/material-design-kit.js') }}"></script>
<!-- Sidebar Collapse -->
<script src="{{ asset('vendor/sidebar-collapse.js') }}"></script>
<!-- App JS -->
<script src="{{ asset('js/main.min.js') }}"></script>
<!-- Spark JS -->
<script src="{{ mix('js/app.js') }}"></script>
<script src="/js/sweetalert.min.js"></script>
</body>
</html>
And here is the code for the register page itself's Blade (resources/views/vendor/spark/auth/register-spark.blade.php):
#extends('spark::layouts.guest')
#section('title', 'Register')
#section('body-class', 'register')
#section('scripts')
<script src="https://js.stripe.com/v2/"></script>
#endsection
#section('content')
<div class="row">
<spark-register-stripe inline-template>
<div class="col-sm-8 push-sm-1 col-md-4 push-md-3 col-lg-4 push-lg-4">
<div class="text-xs-center m-2">
<div class="icon-block rounded-circle">
<i class="material-icons md-36 text-muted">edit</i>
</div>
</div>
<div align="center">
<h1>Register</h1>
</div>
<br />
<!-- Common Register Form Contents -->
#include('spark::auth.register-common')
<br />
<!-- Billing Information -->
<div class="card" v-if="selectedPlan && selectedPlan.price > 0">
<div class="card-header bg-white text-xs-center">
<h4 class="card-title">Billing Information</h4>
</div>
<div class="p-2">
<!-- Generic 500 Level Error Message / Stripe Threw Exception -->
<div class="alert alert-danger" v-if="registerForm.errors.has('form')">
We had trouble validating your card. It's possible your card provider is preventing
us from charging the card. Please contact your card provider or customer support.
</div>
<form role="form">
<!-- Billing Address -->
#if (Spark::collectsBillingAddress())
#include('spark::auth.register-address')
#endif
<!-- Cardholder's Name -->
<div class="form-group">
<label for="name">Cardholder's Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Cardholder's Name" v-model="cardForm.name">
</div>
<!-- Card Number -->
<div class="form-group">
<label for="number">Card Number</label>
<input type="text" class="form-control" name="number" id="number" placeholder="Card Number" data-stripe="number" v-model="cardForm.number">
<small class="text-help" v-show="registerForm.errors.has('number')">
#{{ registerForm.errors.get('number') }}
</small>
</div>
<!-- Security Code (CVC) -->
<div class="form-group">
<label for="cvc">Security Code (CVC)</label>
<input type="text" class="form-control" name="cvc" id="cvc" placeholder="Security Code (CVC)" data-stripe="cvc" v-model="cardForm.cvc">
</div>
<!-- Expiration -->
<div class="form-group">
<label>Card Expiration Date</label>
<div class="row">
<!-- Month -->
<div class="col-md-6">
<input type="text" class="form-control" name="month" placeholder="Expiration Month (MM)" maxlength="2" data-stripe="exp-month" v-model="cardForm.month">
</div>
<!-- Year -->
<div class="col-md-6">
<input type="text" class="form-control" name="year" placeholder="Expiration Year (YYYY)" maxlength="4" data-stripe="exp-year" v-model="cardForm.year">
</div>
</div>
</div>
<!-- ZIP/Postal Code -->
<div class="form-group" v-if=" ! spark.collectsBillingAddress">
<label for="zip">ZIP/Postal Code</label>
<input type="text" class="form-control" name="zip" id="zip" placeholder="ZIP/Postal Code" v-model="registerForm.zip">
<small class="text-help" v-show="registerForm.errors.has('zip')">
#{{ registerForm.errors.get('zip') }}
</small>
</div>
<!-- Coupon Code -->
<div class="form-group" v-if="query.coupon">
<label for="coupon">Coupon Code</label>
<input type="text" class="form-control" name="coupon" id="coupon" placeholder="Coupon Code" v-model="registerForm.coupon">
<small class="text-help" v-show="registerForm.errors.has('coupon')">
#{{ registerForm.errors.get('coupon') }}
</small>
</div>
<!-- Terms And Conditions -->
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" v-model="registerForm.terms">
I Accept The Terms Of Service
<small class="text-help" v-show="registerForm.errors.has('terms')">
#{{ registerForm.errors.get('terms') }}
</small>
</label>
</div>
</div>
<!-- Tax / Price Information -->
<div class="form-group" v-if="spark.collectsEuropeanVat && countryCollectsVat && selectedPlan">
<label class="col-md-4 control-label"> </label>
<div class="col-md-6">
<div class="alert alert-info" style="margin: 0;">
<strong>Tax:</strong> #{{ taxAmount(selectedPlan) | currency }}
<br><br>
<strong>Total Price Including Tax:</strong>
#{{ priceWithTax(selectedPlan) | currency }} / #{{ selectedPlan.interval | capitalize }}
</div>
</div>
</div>
<!-- Register Button -->
<div class="form-group" align="center">
<button type="submit" class="btn btn-primary" #click.prevent="register" :disabled="registerForm.busy">
<span v-if="registerForm.busy">
<i class="fa fa-btn fa-spinner fa-spin"></i>Registering
</span>
<span v-else>
<i class="fa fa-btn fa-check-circle"></i>Register
</span>
</button>
</div>
<div class="text-xs-center">Already signed up? Log in</div>
</form>
</div>
</div>
</div>
<!-- Plan Features Modal -->
#include('spark::modals.plan-details')
</spark-register-stripe>
</div>
#endsection
If somebody could point me in the right direction, and let me know where I'm going wrong here it'd be much appreciated. Thanks!

Related

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

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

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.

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>

Displaying html form tag in using SyntaxHighlighter

I cannot get a HTML form tag to display as code on my website using the syntax highlighter library. Here is my code:
<pre class="brush: js">
<form class="formOne">
<div class="clear-fix">
<ul class="list-0 clear-fix">
<!-- Name -->
<li>
<div class="block field-box">
<label for="contact-form-name">Your Name</label>
<input type="text" name="contact-form-name" id="contact-form-name" value=""/>
</div>
</li>
<!-- /Name -->
<!-- E-mail address -->
<li>
<div class="block field-box">
<label for="contact-form-mail">Your E-mail</label>
<input type="text" name="contact-form-mail" id="contact-form-mail" value=""/>
</div>
</li>
<!-- /E-mail address -->
<!-- Message -->
<li>
<div class="block field-box">
<label for="contact-form-message">Your message</label>
<textarea name="contact-form-message" id="contact-form-message" rows="1" cols="1"></textarea>
</div>
</li>
<div id="captchaHolder">
{% autoescape false %} {{captcha}} {% endautoescape %}
</div>
<!-- /Message -->
<h5 id="submitResponse"></h5>
<!-- Submit button -->
<li>
<div class="block field-box field-box-button">
<input type="submit" id="contact-form-submit" name="contact-form-submit" class="button" value="Submit"/>
</div>
</li>
<!-- /Submit button -->
</ul>
</div>
</form>
</pre>
It displays in on my webpage like this:
I want it to display as code like this example:
The syntax highlighting is working fine on other snippets in the same blog post I am creating so I know that the library is loading okay. It just doesnt like the <form></form> tags

I figured it out. You have to use the method of installing SyntaxHighlighter.
<script type="syntaxhighlighter" class="brush: js">
<!-- Contact form -->
<form name="contact-form" id="contact-form" class="contact-form clear-fix" target="uploader_iframe">
<div class="clear-fix">
<ul class="list-0 clear-fix">
<!-- Name -->
<li>
<div class="block field-box">
<label for="contact-form-name">Your Name</label>
<input type="text" name="contact-form-name" id="contact-form-name" value=""/>
</div>
</li>
<!-- /Name -->
<!-- E-mail address -->
<li>
<div class="block field-box">
<label for="contact-form-mail">Your E-mail</label>
<input type="text" name="contact-form-mail" id="contact-form-mail" value=""/>
</div>
</li>
<!-- /E-mail address -->
<!-- Message -->
<li>
<div class="block field-box">
<label for="contact-form-message">Your message</label>
<textarea name="contact-form-message" id="contact-form-message" rows="1" cols="1"></textarea>
</div>
</li>
<div id="captchaHolder">
{% autoescape false %} {{captcha}} {% endautoescape %}
</div>
<!-- /Message -->
<h5 id="submitResponse"></h5>
<!-- Submit button -->
<li>
<div class="block field-box field-box-button">
<input type="submit" id="contact-form-submit" name="contact-form-submit" class="button" value="Submit"/>
</div>
</li>
<!-- /Submit button -->
</ul>
</div>
</form>
</script>
You can find out more info on how to use that method and the pros and cons here: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Categories