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.'/');"
Related
And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.
I try jQuery click event but it is stopped the form submission.
myHTML file:
<!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="">
<link rel="icon" href="favicon.ico">
<title>xxx</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead">
<div class="inner">
<!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
<nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">xxx</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sifirla.php">Sıfırla</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="guncelle.php">Güncelle</a>
</li>
</ul>
</nav>
</div>
</header>
<div><img src="image/xxx.png" alt="xxx" style="width: 150px;height: 150px;"></div>
<div>
<?php echo $result; ?>
</div>
<main role="main" class="inner cover">
<form id="form1" name ="form1" method="POST" action="guncelle.php" >
<div class="form-group">
<label for="uname">Kullanıcı Adınız:</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<span id="unametxt" name="unametxt" class="required"></span>
<div class="form-group">
<label for="password">Mevcut Şifreniz:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<span id="passwordtxt" name="passwordtxt" class="required"></span>
<div class="form-group">
<label for="newPassword">Yeni Şifreniz:</label>
<input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
</div>
<span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>
<div class="form-group">
<label for="new2Password">Yeni Şifreniz Tekrar:</label>
<input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
</div>
<span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>
<!--<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
</div>
-->
<p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle" ></p>
</form>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>#2018 xxxx</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When this form submitted , I controlled php side like this:
if (isset($_POST['Submit1'])) {
and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.
I want to disable the button when form submitting. How can I this?
You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below
<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">
Try with this code
<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">
<script>
$(document).ready(function(){
$('#form1').on('submit',function(e){
e.preventDefault();
$('#submit1').prop('disabled','disabled');
});
});
</script>
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'];
I can't change the status data on my Firebase project with the HTML site and using javascript (.js) to connect with my Firebase project. I've made checkbox to change the status data on Firebase. But it can't change the data value on Firebase. I've change id checkbox, but there is no result. Anyone please help me. I am newbie. This is my HTML 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 name="description">
<meta name="author">
<title>
Web Kontrol
</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href="assets/css/style.css" rel="stylesheet"> -->
<link href="assets/css/sh-default.css" rel="stylesheet" default-stylesheet="true" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body style="cursor: auto;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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>Web Kontrol Lampu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a data-target="#login" href>Login</a>
</li>
<!--<li>
<a data-target="#register" href>Signup</a>
</li>-->
<li>
<a data-target="#lists" href>Control</a>
</li>
<li>
<a id="logout" href>Logout</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="welcome"></div>
<div class="container tab default" id="login">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
<em class="stackhive-marker"></em>Login to Your Account
</h2>
<hr>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password"
required="" id="login-password">
<button class="btn btn-primary" type="button" id="login-btn">
Login
</button>
<hr>
<div class="status alert alert-info hide"></div>
</form>
</div>
<div class="container tab hide" id="register">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
Daftar Akun Baru
</h2>
<hr>
<input type="text" class="form-control" placeholder="Your Name" required="" autofocus="" id="name"><input type="email" class="form-control" placeholder="Email address" required=""
autofocus="" id="email"><input type="password" class="form-control" placeholder="Password" required="" id="password">
<button class="btn btn-primary" type="button" id="signup-btn">
Masuk !
</button>
</form>
<hr>
<div class="status alert alert-info hide"></div>
</div>
<div class="container tab hide" id="lists">
<div class="status alert alert-info hide"></div><br>
<h1>Kontrol Lampu</h1>
<div align="center">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-1" type="checkbox">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-2" type="checkbox">
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./firebasefunctions.js"></script>
<script type="text/javascript" src="./script.js"></script>
<!-- <script type="text/javascript" src="./script-coba.js"></script> -->
</body>
And this .js file
$(document).ready(function() {
//this URL to my FIrebase project
var ref = new Firebase("https://firesmartlamp.firebaseio.com/devices/smartlamp/parameters/");
/*****************************************************************
Get the status on Firebase
******************************************************************/
ref.once("value", function(res) {
var status = res.child("state").val(); //state is my data on Firebase
$('#cmn-toggle-1').attr('checked', status); //cmn-toggle-1 is my checkbox id
console.log("Statusnya: " +status)
});
ref.once("value", function(res) {
var status2 = res.child("state2").val();
$('#cmn-toggle-2').attr('checked', status);
console.log("Statusnya: " +status2)
});
/*****************************************************************
Sync to firebase
******************************************************************/
ref.on("child_changed", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
console.log("Cek: " +states)
});
ref.on("child_changed", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
console.log("Cek: " +states2)
});
/*****************************************************************
Update value, changed status of Switch
******************************************************************/
$('#cmn-toggle-1').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state: true }); //true and false are value of data on Firebase
}
else{
console.log("Off")
ref.update({ state: false });
}
});
$('#cmn-toggle-2').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state2: true });
}
else{
console.log("Off")
ref.update({ state2: false });
}
});
});
You're mixing all kinds of data access patterns, so I cleaned those up in your jsbin and made it work. The reading from Firebase is now simply:
/*****************************************************************
Sync with firebase
******************************************************************/
ref.child("state").on("value", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
});
ref.child("state2").on("value", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
});
So we have the two state properties (state and state2) and attach a value listener to each. That means the callbacks will be invoked "immediately" with the current value and then once whenever the property changes.
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);;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create League</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Loading Bootstrap -->
<link href="../dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI Pro -->
<link href="../dist/css/flat-ui-pro.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<script type='text/javascript'>
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Team " + (i+1) +" Name"));
var input = document.createElement("input");
var newIn = '<input class="col-md-6"';
input.type = "text";
input.name = "member" + i;
input.class="form-control";
input.placeholder="Please enter the team name";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
<!-- HTML5 Shim and Respond.js 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="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" align="left" href="#topContainer">
<img style="max-width:100px;margin-top:-7px;"
src="img/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Recent Matches</li>
</ul>
</div>
</div>
</div>
<div class="container contentContainer">
<div class="row">
<div class="col-md-6">
<br>
<br>
<h4>Please enter the fields below</h3>
<div class="form-group">
<label for="noofteams">Number of Teams</label>
<input type="text" class="form-control" id="member" name="member" value=""placeholder="Enter number of teams"><br />
OK
<div id="container"/>
</div>
</div>
</div>
</div>
I am trying to update the second form field dynamically from the first given input .I am using flatUI and bootstrap css files. but i am not able to change the generated text field type like that of bootstrap or flat UI , Its showing up a basic text field !! Kindly someone help me to resolve this issue. thank you
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="../dist/js/vendor/jquery.min.js"></script>
<script src="../dist/js/vendor/video.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../dist/js/flat-ui-pro.js">
<script>
$(".contentContainer").css("min-height", $(window).height());
</script>
</body>
</html>
As you have already included jQuery in your code, you can append new field with a pre-defined CSS class as:
$('.container').append('<input class="form-control" type="text" placeholder="something"/>');
jQuery is easy debug then vanilla javascript.
Hope this might help!