My Ajax form doesn't work - javascript

I can't figure it out why my ajax form won't work, I've been scratching my head for a while now. To make it a bit easier my javascript code is at the forgot password section. The console outputs nothing and the page doesn't refresh either so I don't know what's wrong? The result is supposed to be displayed in the <p id="msg"><p/>.
login2.php code:
<?php
$data = array();
if(isset($_POST['email'])){
$data = $_POST['email'];
echo json_encode($data);
die();
}
?>
<!DOCTYPE html>
<html lang="en">
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<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>Sign In</title>
<!-- 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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
<script src='/google_analytics_auto.js'></script></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">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control">
<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">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</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>
<p class="m-t-30">Lorem ipsum dolor fringilla enim feugiat commodo sed ac lacus.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</form>
<p id="msg"><p/>
</div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</div>
<script type = "text/javascript">
$("form").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login2.php",
method: "POST",
dataType: "json",
data: {email: email},
success: function (result) {
alert("result: " + result);
console.log(result);
$("#msg").html(result);
}
});
});
</script>
</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>


please try this and open Network Tab to see if request is going correctly and your backend is getting hit with this call .
$("form").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login2.php",
method: "POST",
dataType: "json",
data: JSON.stringify(email),
success: function (result) {
alert("result: " + result);
console.log(result);
$("#msg").html(result);
}
});
});


Use one either json or normal key = value
So change here in ajax
data: email,
Return type is json so it should be Json not string without key it will be just string with quotes in .php return.
Either remove dataType: "json", from ajax and return string as .php return value. Or include key in json_encode
To return as json change here
$data["email"] = $_POST['email'];

Related

jquery autocomplete suggestions come at the bottom of the page

I got a registration form where the user has to pick up one of the possible options or register his own university. For that, I thought It would be a great idea to be using jquery autocomplete functionality because it seemed pretty straight forward but here we go again.
This is the code that I'm using just for testing it out
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
And here's the one that I am using for the actual page.
The problem that I occur is that the suggestions come at the bottom of the page instead of being weather above or below the actual input. How could I possibly display them as a dropdown below the actual input?
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
<!--
=========================================================
* Now UI Kit - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-kit
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="http://bedford-computing.co.uk/hackathon//assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="http://bedford-computing.co.uk/hackathon//assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
IUSCH | Register university
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- CSS Files -->
<link href="http://bedford-computing.co.uk/hackathon//assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon//assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon/assets/css/animate.css" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="http://bedford-computing.co.uk/hackathon//assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="login-page sidebar-collapse">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="<?php echo base_url() . 'welcome'?>">
HOME
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'scenarious'?>">
SCENARIOS
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'user/contact_us'?>">
CONTACT US
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="<?php echo base_url(); ?>assets/img/blurred-image-1.jpg">
<?php if ($this->session->userdata('email') != ''): ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/my_account'?>">My profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/logout'?>">Logout</a>
</li>
</ul>
<?php else: ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user'; ?>">Login</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Register
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo base_url() . 'register_user'?>">Student</a>
<a class="dropdown-item" href="<?php echo base_url() . 'register_uni'?>">University</a>
</div>
</div>
</li>
</ul>
<?php endif; ?>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="page-header clear-filter" >
<div class="page-header-image" style="background-image:url(http://bedford-computing.co.uk/hackathon/assets/img/uni/UoB_JimStephenson-23-WebRes.jpg)"></div>
<div class="content">
<div class="container">
<div class="col-md-4 ml-auto mr-auto">
<div class="card card-signup animated shake" data-background-color="orange" style="margin-top:10%">
<form class="form" method="post" action="<?php echo base_url(); ?>register_uni/validation">
<div class="card-header text-center">
<h3 class="card-title title-up">Register University</h3>
<div class="logo-container">
</div>
</div>
<div class="card-body">
<span class="text-danger">
<?php echo form_error('name');?>
<?php echo form_error('contact_first_name');?>
<?php echo form_error('contact_last_name');?>
<?php echo form_error('university_id');?>
</span>
<div class="input-group no-border input-lg">
<input type="text" name="name" id="name" class="form-control" placeholder="University name">
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_first_name" placeholder="Contact first name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_last_name" placeholder="Contact last name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_email" placeholder="Contact email" class="form-control" />
</div>
</div>
<div class="card-footer text-center">
<input type="submit" name='register_uni' class="btn btn-neutral btn-round btn-lg">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Core JS Files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
UPDATE: I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.
That answered my question. Admins might close it, cheers.

I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.

How to prevent jquery submit button from refreshing the HTML page?

I have a login page where the user enters his username and password, when he submits this form the data is sent to php file for verifying the password.
For the first time when the user enters data (I entered wrong details) the page shows "Invalid password...please try again".
The second time when the user enters data (again I enter wrong details) the page just reloads. I am not able to understand why this is happening.
For more better understanding I have added a google drive link to a video showing the issue.
Link:Link to the video
The html code:
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png">
RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>
The javascript part:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'php_admin_login.php',
data: {
admin_username: admin_username,
admin_password: admin_password
},
type: "POST",
dataType: "json",
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
}
else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
}
});
});
});
I'm sure there is no problem with the php code so I'm not pasting here just to make the question more clearer.
If you need the whole code of the project you can get it here:Github link to the project

else {
document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';
Adding to an element’s .innerHTML replaces the whole content of the element; even the stuff that was already there will first be removed, and then re-created.
So your form itself is replaced with a new form, and therefor you completely lose your submit event handler you had attached to it as well.
Your attempts at preventing the default event action fail, because you handler function simply doesn’t get called any more at all, and just a normal form submit is performed now, which of course reloads the page.
You need to either add your event handler again after you replaced the parent container’s innerHTML - or use event delegation to begin with.

Try to use this. Hope it will help
$("form").submit(function(e){
e.preventDefault();
});
Kindly let me know if it does not work.

Try return false at the end of your $("#admin-signin").submit function instead of the preventDefault()

This is happening due to how you handle errors. By using document.getElementById('admin-signin-card').innerHTML += ... you are effectively reloading your form meaning that you lose the event listener. You can either adjust how you display the error or adjust the event listener.
I would recommend changing how you display the error.
I have removed the request in the example below but it's the same idea:
$(document).ready(function () {
$("#admin-signin").submit(function (e) {
e.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
let response = "no";
if (response === "OK") {
window.open("admin.html", "_self");
} else {
document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
console.log("error shown");
}
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="assets/rv.png"> RV PUBLIC SCHOOL
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin.html">Admin Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;">
<div class="row padding">
<div class="card border-dark">
<div class="card-header" align="center">
<img src="assets/rv.png">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group">
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
</form>
<div id="admin-signin-card-error"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid padding">
<h1 align="center">About Us</h1>
<p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
<h2 align="center">Contact me</h2>
<p align="center">Phone nnumber : 7019271367</p>
<p align="center">Email id : goutambseervi#gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</html>

like #CBroe mentioned, the problem is caused by innerHTML.
i moved the content of innerHTML to the form, and give it display none, when there an error i show the error with .show()
i changed the ajax url and data Type for testing purpose.
$(document).ready(function () {
$("#admin-signin").on('submit', function (event) {
event.preventDefault();
let admin_username = $("#admin_username").val();
let admin_password = $("#admin_password").val();
$.ajax({
url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json',
type: "POST",
dataType: "jsonp",
data: {
admin_username: admin_username,
admin_password: admin_password
},
success: function (response) {
if (response === "OK") {
window.open("admin.html", "_self");
} else {
$('.alert.alert-danger').show();
console.log("error shown");
}
}
});
});
});
<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid padding mt-1 " style="align-items: center; justify-content:center; display:flex ;" >
<div class="row padding">
<div class="card border-dark" >
<div class="card-header" align="center">
<h5>Admin Sign In</h5>
</div>
<div class="card-body" id="admin-signin-card">
<form id="admin-signin">
<div class="form-group">
<label>Username</label>
<input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label>Password</label>
<input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
</div>
<div class="form-group">
Forgot Password?
</div>
<div class="form-group" >
<input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
</div>
<div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
</body>
</html>

Buttons on any page inherited from Master firing. Not sure whats stopping it

Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing

First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.

Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">

ajax not working onclick in shopping cart

I am working with free downloaded "Ustora" template (html theme for eCommerce). In the same I am working with "Add to cart" button in the single-product page. After click it should launch a ajax function that will be insert product data into my cart table in database. But this one is not working.
I am working with this to learn make eCommerce website. Please help as earliest here is my code below.
Single-product-page.php
<?php
$row = mysql_fetch_row(mysql_query("SELECT * FROM `products` where pid='".$_GET['proid']."' "));
echo '<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
<div class="product-gallery">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="product-inner">
<h2 class="product-name">'.$row[2].'</h2>
<div class="product-inner-price">
<ins>'.$row[3].'/- INR</ins> <del>'.$row[3].'/- INR</del>
</div>
<form method="post">
<div class="quantity">
<input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" id="qty" min="1" step="1" max='.$row[6].'>
</div>
<button class="add_to_cart_button" onclick="addtocart('.$row[1].','.$row[2].','.$row[3].','.$buid.');">
Add to cart
</button>
</form>
<div class="product-inner-category">
<p>Category: Summer. Tags: awesome, best, sale, shoes. </p>
</div>
<div role="tabpanel">
<ul class="product-tab" role="tablist">
<li role="presentation" class="active">Description</li>
<li role="presentation">Reviews</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<h2>Product Description</h2>
'.$row[4].'
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>Reviews</h2>
<div class="submit-review">
<p><label for="name">Name</label> <input name="name" type="text"></p>
<p><label for="email">Email</label> <input name="email" type="email"></p>
<div class="rating-chooser">
<p>Your rating</p>
<div class="rating-wrap-post">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<p><label for="review">Your review</label> <textarea name="review" id="" cols="30" rows="10"></textarea></p>
<p><input type="submit" value="Submit"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>';
?>
Header.php
<!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">
<title>Product Page - Ustora Demo</title>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<script src="jquery.js"></script>
<script type="text/javascript">
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
I just want to launch addtocart() function on "Add to cart" button click and after want to insert data in shopping cart.
Thanks in advance

i think the problem is in data where you are sending data to new page
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},//here is the problem
data:{pid:pid,pname:pname,pprice:pprice,pqty:pqty,buid:build},//this must be like this
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}

I think you need to put quotes around your arguments calling the addToCard() function like so:
onclick="addtocart(/''.$row[1].'/',/''.$row[2]./'',/''.$row[3].'/',/''.$buid.'/');"

Textarea doesn't get updated when I click generate

Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet" />
<link href="css/docs.css" type="text/css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Enter Project Name Here</a>
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Custom Download</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead">Download the full repository or customize your entire <em>Enter Project Name Here</em> build by selecting only the components that you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li>1. Choose and Generate CSS components</li>
<li>2. Choose and Generate JavaScript components</li>
<li>3. Be Happy</li>
</ul>
</div>
</header>
<hr>
<p class="well note">
<strong>Note:</strong> This example page uses the jQuery plugin, SelectBoxIt, to demonstrate how to create custom builds with Downloadbuilder.js.
</p>
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>

Use $("#generated-javascript-source").val(data.content);
instead of
$("#generated-javascript-source").text(data.content);
replace all .text(data.content); with .val(data.content);;

Categories

Resources