I have the following code, which shows and hides elements according to buttons being clicked:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" >
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
JQUERY:
$(".editButton").click(function () {
$(".renameButton,.cancelRenameButton").show();
$(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(".renameButton,.cancelRenameButton").hide();
$(".editButton").show();
});
The problem I'm getting is I can't get the buttons to work individually. I've tried using 'this' without success
You can simply use siblings (less function calls!) in combination with this to traverse the DOM and then just toggle them away (or keep hide and show if you prefer).
JSFiddle here
$(".editButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
$(".cancelRenameButton").click(function () {
$(this).toggle().siblings(".renameButton,.cancelRenameButton").toggle();
});
Try something like this:
$(".editButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").show();
$(this).parents(".largeImage").find(".editButton").hide();
});
$(".cancelRenameButton").click(function () {
$(this).parents(".largeImage").find(".renameButton,.cancelRenameButton").hide();
$(this).parents(".largeImage").find(".editButton").show();
});
If I understood properly what u want to do. This can be a possible solution:
HTML:
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail1.jpg" alt="thumbNail1.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form1">
<input type="button" value="Click to Rename"/>
</div>
<div class="cancelRenameButton" name="form1">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form1">
<input type="submit" value="Rename"/>
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
<div class="largeImage">
<div class="uploadItem.NameContainer">
<img src="thumbNail2.jpg" alt="thumbNail2.jpg"/>
</div>
<div class="galleryButtonContainer">
<div class="editButton" name="form2">
<input type="button" value="Click to Rename" />
</div>
<div class="cancelRenameButton" name="form2">
<input type="button" value="Cancel Rename" />
</div>
<div class="renameButton" name="form2">
<input type="submit" value="Rename" />
</div>
<div class="selectButton"><input type="button" id="select" value="Select" class="selectImagePath" /></div>
<div class="deleteButton">
<input type="submit" value="Delete" />
</div>
</div>
</div>
CSS:
.galleryButtonContainer .cancelRenameButton {display:none;}
.galleryButtonContainer .renameButton {display:none;}
jQuery:
$(".editButton, .cancelRenameButton").click(function () {
Toggle($(this));
});
function Toggle(obj){
var name = obj.attr("name");
$(".renameButton[name="+name+"],.cancelRenameButton[name="+name+"]").toggle();
$(".editButton[name="+name+"]").toggle();
}
Check this link jsfiddle to see a how it works.
A better solution would be, I think, remove the divs and deal only with buttons.
Hope it useful!
Related
i am creating a to-do list, i want the user to be able to edit and delete the added tasks, this will be possible by removing readonlyattribute from HTML. but i am struggling doing the edit function.
Here is my code:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
console.log(evento);
if(evento.target.className=="edit"){
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Thanks in advance :D
I have added some lines to your JS code. Please check.
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
if(evento.target.className=="edit"){
console.log("Editar");
input[0].removeAttribute('readonly');
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
Test it in the Snippet below:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
console.log(input[0]);
if(evento.target.className=="edit"){
input[0].removeAttribute('readonly');
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Hope it helps.
First, 2 elements have the same id 's value :
<div class="content" id="${id}"> and <input id="${id}">
You can change same as :
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="input-${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit" data-task_id="input-${id}">Edit</button>
<button class="delete" data-task_id="input-${id}">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
if(evento.target.className=="edit"){
document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
}else if(evento.target.className=="delete"){
document.getElementById(evento.target.dataset.task_id).remove();
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Maybe you mean remove the readonly attribute on textbox inside the three divs?
$('.edit').click(function(){
$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');
});
$('.edit_first').click(function(){
$('#first_textbox').removeAttr('readonly');
});
$('.edit_second').click(function(){
$('#second_textbox').removeAttr('readonly');
});
$('.edit_third').click(function(){
$('#third_textbox').removeAttr('readonly');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>
I'm working on a social media site for a client that was built by another company. Currently I'm working on the posting system where users can post. The original code had it where users had to go through 3 steps first then hit the button to post. The client wanted to remove the steps and just have it setup similar to facebook. I moved the code around and removed the steps but the "Post" button doesn't work now. When I click on it, it just says "Posting" and doesn't do anything else.
If you go to seegossip.com and sign up as a user and login, click on the orange smileys icon in the top right, it will bring up the posting popup.
Below is the original posting process code:
<div class="popup close">
<div class="left">
<div class="sectionn1 follow" id="box1">
<div class="popup-heading">Follow the steps and start gossiping!</div>
<div class="follow2">*Tip: you can do all three on the same Post! </div>
<div class="type">
</div>
<div class="get">
<button type="button" onClick="openpopup(2)">Get Started!</button>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="popupclose-c">Cancel</div>
</a>
</div>
</div>
<div class="sectionn1" id="box2" align="center">
<div class="popup-heading">Step1: Type away!</div>
<div class="user-post-main">
<div class="add-pics">
<div class="user-post"> <br clear="all" />
<form id="post" id="form" name="form" action="" method="post">
<div class="user-post-middle">
<div class="post-area">
<input type="text" placeholder="Type your post's Title here" class="input" name="postname" id="postname"/>
<span class='status'></span>
</div>
<div class="post-area">
<textarea placeholder="Type your post's here" class="textarea" rows="5" name="posttext" id="posttext"/></textarea>
<span class='status'></span>
</div>
<div class="post-area">
<input type="text" placeholder="Enter a Custom URL Here" class="input" name="posturl" id="posturl"/>
<span class='status'></span>
</div>
<br clear="all" />
</div>
</form>
<div class="red">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone">
<input type="hidden" name="postid" value="<?php echo $_REQUEST['post_id'];?>">
<input type="hidden" name="userid" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
</div>
<div id="dropzone1" class="dropzone zone"> </div>
</div><br clear="all" />
<!--<button type="button" onclick="openpopup(4)" >Lets Add Some Videos! ></button>-->
</div>
</div>
<div class="green">
<div>
<div id="dropzone" class="drop">
<form action="upload/" class="dropzone" id="my-dropzone2">
</form>
</div>
<div id="dropzone2" class="dropzone zone"></div>
</div><br clear="all" />
<div class="some">
<div class="button"><button type="button" name="create_new_post" id="create_new_post" >Post</button></div>
</div>
</div>
</div>
</div>
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
</div>
</div>
<!----------------------popup3---------------------------->
<div class="sectionn1" id="box3" align="center">
<div class="popup-heading"> Step2: Let's Add Some Pics!</div>
<span style="font-style:italic; font-size:16px;">No Picture? No Problem Simply Continue to the Next Step! </span><br clear="all" />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
<!-------------------------------popup-4--------------------->
<style>
.dz-default.dz-message {
background-size:100px !important;
}
</style>
<div class="sectionn1" id="box4" align="center">
<div class="popup-heading">Step3: Let's Add Some Videos!</div>
No Videos? No Problem Simply click on POST!<br clear="all" /><br />
<div class="user-post-main">
<div class="user-post1">
<div class="user-post">
<div class="popupclose">
<a class="new_post_close" >
<img src="images/into-logo.png" /> <div class="close-c">Cancel</div>
</a>
</div>
</div>
<div class="right-icn">
<div style="background-image:url(images/left1.png); width:50px; height:50px" class="left1"></div>
<div style="background-image:url(images/left2.png); width:50px; height:50px" class="left2"></div>
<div style="background-image:url(images/left3.png); width:50px; height:50px" class="left3"></div>
</div>
</div>
</div>
</div>
<!--------------------------popup-->
And here's the new code for the posting process:
<div class="popup close">
<div class="sectionn1 follow" id="box1">
<div class="user-post">
<!-- UPLOAD PICS -->
<div class="popupclose">
<a class="new_post_close">
<div class="close-c">
</div></a>
</div>
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone" name="my-dropzone">
<input name="postid" type="hidden" value="<?php echo $_REQUEST['post_id'];?>"> <input name="userid" type="hidden" value="<?php echo $_SESSION['sguser_id'];?>">
</form>
<p>Add Photo(s)</p>
</div>
<div class="dropzone zone" id="dropzone1">
</div>
<!-- UPLOAD VIDEOs -->
<div class="drop" id="dropzone">
<form action="upload/" class="dropzone" id="my-dropzone2" name="my-dropzone2">
</form>
<p>Add Video</p>
</div>
<div class="dropzone zone" id="dropzone2">
</div>
</div>
<!-- POST AREA -->
<form action="" id="post" method="post" name="form">
<textarea class="textarea" id="posttext" name="posttext" placeholder="What's on your mind, today?" rows="5"></textarea>
</form>
<div class="bottom-buttons">
<div class="button">
<button id="create_new_post" name="create_new_post" type="button">
<p>Post</p></button>
</div>
</div>
</div>
</div>
Below is the script for the popup where I think the error is.
$(document).on('click','a#opennewpostpopup',function(data){
if($('.popup').hasClass('close')) {
postpopup(0);
openpopup(1);
}
});
$(document).on('click','.openpostpopup',function(data){
postpopup(5,this);
});
function openpopup(p){
if(p){
$('.glass, .popupglass').fadeIn();
$('.popup').removeClass('close');
$('.sectionn1').removeClass('active');
$('#box'+p).addClass('active');
$('body').addClass('short_page');
if(p==3) $('#my-dropzone .dz-default span').html('Drag and Drop your pictures here!')
if(p==4) $('#my-dropzone2 .dz-default span').html('Drag and Drop your Videos here,');
}
else {
$('.glass , .popupglass').fadeOut();
$('.popup').addClass('close');
$('body').removeClass('short_page');
$('.sectionn1').removeClass('active');
$('#post .post-area .input,#post .post-area .textarea').each(function(){ $(this).val(''); });
$('span.status').removeClass('success').removeClass('error');
$('.dz-preview').remove();
$('[name=post_id]').remove();
}
}
function createPostId(popup){
id = $('input[name=post_id]').val();
if(typeof cnprpost == 'undefined' && !id){
cnprpost = $.post("ajax.php",{action:'createPost',posttext:$('#posttext').val()},function(data){
$('#my-dropzone, #my-dropzone2').not(':has(input[name=post_id])').prepend('<input type="hidden" name="post_id" value="'+data+'">');
openpopup(popup);
delete cnprpost;
});
}else openpopup(popup);
}
$('.new_post_close').on('click',function(data){
id=$('form.dropzone [name=post_id]').val();
if(id) {
var conf=confirm("Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok");
if(conf){
openpopup(0);
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){
});
}
}else openpopup(0);
});
$('#create_new_post').on('click',function(){
post_id=$('[name=post_id]').val();
postTitle = $('#post input[name=postname]').val();
postContent = $('#post textarea[name=posttext]').val();
postUrl = $('#post input[name=posturl]').val();
dis=this;
$(dis).html('Posting...');
if(typeof pprpost == 'undefined' && post_id )
pprpost =$.post("ajax.php",{action:'publishpost',post_id:post_id,posttitle:postTitle,posttext:postContent,posturl:postUrl},function(data){
if(data==1) { openpopup(0); }
else { $(dis).html('Try Again...'); }
delete pprpost
});
});
window.onbeforeunload = function() {
id=$('[name=post_id]').val();
if(!$('.popup').hasClass('close') && id){
return "Your Post is Not Published\nClick Cancel to Continue or\nClick OK to Cancel\nYour Uploads will remove if you Click Ok";
$.post("ajax.php",{action:"deletepost",post_id:id},function(data){ });
}
}
This is a little advanced for me and I've been stuck on this site for a couple weeks trying to figure out what the problem is so please help.
Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
I made a program that asks the user how many input bars he wants to display and then the user has to type in some values into the input bars and click verify but the issue i am having is that whenever i click on verify, nothing happens. I get the error:
Uncaught TypeError: Cannot read property 'value' of null
whenever i click on verify.
Here are my codes:
<html>
<head>
<script language="javascript">
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
</script>
</head>
<body>
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="username2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="username3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="username4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="username5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="username6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">
</body>
<html>
The script is failing when it reaches this portion:
document.getElementById("userNumber"+i)
This indicates that there is no element called userNumber + i (i.e. "userNumber3") for you to then call the .value property of (Cannot read property 'value' of null) .
And that's because you have elements with ids of "username2, username3, username4, etc." and "userNumber", but not "userNumber" plus a number.
var x = [];
var choose;
var i;
var xar=[];
choose=parseFloat(prompt("how many inputs u want to display"));
for(i=0;i<choose;i++)
x[i]=document.getElementById("cont"+i).style.visibility="visible";
function hola() {
for(i=0;i<choose;i++)
document.getElementById("cont"+i).style.visibility="visible";
}
function verify(){
for(i=0;i<choose;i++){
xar[i]=document.getElementById("userNumber"+i).value;
}
for(i=0;i<choose;i++)
if(xar[i]==i)
alert("good");
else
alert("wrong");
}
<input type="button" onclick="hola()" value="hidefield0" id="boton0">
<div id="cont0" style="visibility: hidden;">
<input type="text" id="userNumber" class="something">
</div>
<input type="button" onclick="hola()" value="hidefield2" id="boton1">
<div id="cont1" style="visibility: hidden;" class="something">
<input type="text" id="userNumber2">
</div>
<input type="button" onclick="hola()" value="hidefield1" id="boton2">
<div id="cont2" style="visibility: hidden;" class="something">
<input type="text" id="userNumber3">
</div>
<input type="button" onclick="hola()" value="hidefield3" id="boton3">
<div id="cont3" style="visibility: hidden;" class="something">
<input type="text" id="userNumber4">
</div>
<input type="button" onclick="hola()" value="hidefield4" id="boton4">
<div id="cont4" style="visibility: hidden;" class="something">
<input type="text" id="userNumber5">
</div>
<input type="button" onclick="hola()" value="hidefield5" id="boton5">
<div id="cont5" style="visibility: hidden;" class="something">
<input type="text" id="userNumber6">
</div>
<input type="button" id="verifyBtn" value="verify" onclick="verify()">
I cannot understand why my code doesn't work in my browsers but it works in fiddle. http://jsfiddle.net/4tafnwcj/2/
When I click on a plan, the total should output the price, however, this doesn't happen in the browser. I have checked dev tools, cleared cache, but it didn't help. I also have included all the neccessary jquery,js files, but it seems like there is something else breaking it. I don't know why. Please, help and explain what is the issue.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.validate.min.js"></script>
<script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.form.js"></script>
<script type="text/javascript" src="<?=SITE_SCRIPT?>jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="<?=SITE_SCRIPT?>bootstrap.min.js"></script>
<script type="text/javascript" src="<?=SITE_SCRIPT?>icheck.min.js"></script>
code:
<div class="checkout">
<span id="checkout-title">Checkout</span>
<div class="plan-wrapper">
<label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="699" onclick="calculate(this);"/>Cyber Security Silver Plan</label>
<label id="silver-plan-price">$699</label>
<label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="999" onclick="calculate(this);"/>Cyber Security Gold Plan</label>
<label id="gold-plan-price">$999</label>
</div>
<div class="logo-wrapper">
<span id="personalized-logo">Personalized Logo</span>
<span id="logo-price">$49.99</span>
</div>
<div class="tax-wrapper">
<div class="wrapper-a">
<span id="tax">Tax + Processing</span>
<span id="tax-price">$0.00</span>
</div>
</div>
<div class="total-wrapper">
<div class="wrapper-b">
<span id="total">Total</span>
<output type="number" name="price" id="output"></output>
</div>
</div>
<div class="controls submit-btn">
<input type="submit" value="Checkout" />
<input type="reset" value="Clear" />
</div>
<div class="controls back-btn">
<input class="back-button" type="button" value="Back" />
</div>
</div><!--/.checkout -->
.js
<script>
$(document).ready(function(){
$(document).on("click", ".btn-checkbox-plan", function(e){
//alert();
if($(this).is(':checked')){
$("#output").html($(this).val());
}
});
});
</script>
I have removed the onclick="calculate(this);" as I don't need it, I don't have anything to calculate.
http://jsfiddle.net/3tdwak2h/4/ in fiddle my code runs, however, not in my browser. And in the Chrome console log the only error I get is Failed to load resource: net::ERR_CACHE_MISS
code
<div class="checkout">
<span id="checkout-title">Checkout</span>
<div class="plan-wrapper">
<label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="699" /> Silver Plan</label>
<label id="silver-plan-price">$699</label>
<label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="999" /> Gold Plan</label>
<label id="gold-plan-price">$999</label>
</div>
<div class="logo-wrapper">
<span id="personalized-logo">Personalized Logo</span>
<span id="logo-price">$49.99</span>
</div>
<div class="tax-wrapper">
<div class="wrapper-a">
<span id="tax">Tax + Processing</span>
<span id="tax-price">$0.00</span>
</div>
</div>
<div class="total-wrapper">
<div class="wrapper-b">
<span id="total">Total</span>
<output type="number" name="price" id="output"></output>
</div>
</div>
<div class="controls submit-btn">
<input type="submit" value="Checkout" />
<input type="reset" value="Clear" />
</div>
<div class="controls back-btn">
<input class="back-button" type="button" value="Back" />
</div>
</div>
.js
$(document).ready(function(){
//alert();
$(document).on("click", ".btn-checkbox-plan", function(e){
if($(".btn-checkbox-plan").is(':checked')){
$("#output").html($(this).val());
}
});
});