on clicking on delete button everything deletes

on clicking on delete button everything deletes - javascript

$(".delete").click(function () {
$(".delete").parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
In this code when I click on delete it deletes all. How to fix this problem?
It's a todo list code. I tried to solve using for loop, but didn't work.

Use the following:
$(".delete").click(function () {
// This will delete the parent of element being clicked
$(this).parent().remove();
});
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>

It's dangerous to go with class alone. Take "this":
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
Because what you wrote tells the page to delete the parent of ALL the ".delete", whereas you want just the element clicked ($(this)).

you are calling on all elements with delete class and performing on all of them the chained actions. Another possible syntax would be calling the target element on the click event object : $(event.target).parent().remove().

Related

I'm creating a To do list and there is a problem that I can't solve

I'm a beginner and Just started learning Javascript, but this is the problem that I can't solve, and here is my code:
add = document.getElementById("add");
add.addEventListener("click", () => {
console.log("Please wait a while...Updating List...")
tit = document.getElementById('title').value;
des = document.getElementById('descreption').value;
if (localStorage.getItem('name') == null) {
itemJsonArray = []
itemJsonArray.push([tit, des])
localStorage.setItem('name', JSON.stringify(itemJsonArray))
}
else {
itemJsonArrayStr = localStorage.getItem('name')
itemJsonArray = JSON.parse(itemJsonArrayStr)
itemJsonArray.push([tit, des]);
localStorage.setItem('name', JSON.stringify(itemJsonArrayStr))
}
When I do localStorage.getItem('name')
It always shows the following ERROR: Uncaught TypeError: itemJsonArray.push is not a function
at HTMLButtonElement.
});
And here is my HTML code:
<div class="nav">
<div class="float_nav">
<li class="mt" type="none">Home</li>
<li class="mt" type="none"><a target="_blank" href="http://127.0.0.1:5500/Project%201%20(Javascript)/Project1(Clock).HTML">Current Time</a></li>
<li class="mt" type="none"><a target="_blank" href="http://127.0.0.1:5500/Javscript%20Course/Script.HTML">Our Course</a></li>
<li class="mt" type="none"><a target="_blank" href="https://www.youtube.com/watch?v=hKB-YGF14SY&t=12243s">Contact</a></li>
<li class="purple" type="none"><button class="button button-to">
<a class="black" target="_blank" href="http://127.0.0.1:5500/Project%201
%20(Javascript)/Project1(Clock).HTML">
Find Your List</a></button></li>
</div>
</div>
<div class="form">
<div>
<h1 class="space">Todo List</h1>
<label class="space">Title</label><br>
<input id="title" class="space" required type="text" placeholder="Title"><br>
<p>Write your title</p>
<label id="margin-top">Descreption<br>
<textarea id="descreption" name="textarea" id="text" cols="30" rows="3"></textarea>
<div class="check">
<!-- <label class="space" for="check">check</label> -->
<button type="submit" id="add" class="button-2 button-to">Add To List</button>
</div>
</div>
</div>
</div>
<div class="tb">
<div class="td">
<div class="tc">
<p>No.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<p>Actions</p>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
</div>
<script src="Java.js"></script>
First I thought that It should work, But it did't...

The problem might be that you are not initializing new variables properly. Create them using var, let or const (explaining the difference: link). Your code does work because you are not in strict mode.
If I am mistaken and you do initialize them properly, than add the variable initialization part in your snippets. As Nico Haase suggests, try to console.log your itemJsonArray to see what it is exactly

onclick event not working in JavaScript Why? [duplicate]

This question already has answers here:
Have addEventListener on multiple of the same IDs
(2 answers)
Closed 2 years ago.
I have two radio buttons and I want to attach some functionality to them. But no matter how hard I try I can't attach anything to each of them. I tried to add a simple console log and it seems that the issue is the on click events do not work at all. the code is at the very end of the HTML code. What I'm missing and how to fix this...???
Here is the code: The Javascript is placed in a script tag at the end of the HTML code:
Note: I can log the radio buttons. as you see...
<!DOCTYPE html>
<!-- saved from url=(0043)http://thetheme.io/thesaas/demo/saas-2.html -->
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<!-- Styles -->
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.css" rel="stylesheet">
<link href="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/style.css" rel="stylesheet">
</head>
<body>
<!-- Main Content -->
<main>
<section id="section-pricing" class="section bg-gray">
<div class="container pricing-plans-regular">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" type="radio" name="pricing" value="monthly" autocomplete="off" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" type="radio" name="pricing" value="yearly" autocomplete="off"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Plus</p>
<br>
<h2 class="price">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="12.5" data-yearly="120">12.5</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Everything in Free & Standard, and</small><br>
<small>SAML-based single sign-on (SSO)</small><br>
<small>Compliance Exports of all messages</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
<!-- Second one -->
<div class="container pricing-plans-individual">
<header class="section-header">
<h2>Affordable Pricing</h2>
<hr>
<p class="lead">TheSaaS for Teams is a single workspace for your small- to medium-sized company or team.</p>
</header>
<div class="text-center my-7">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-round btn-outline-dark w-150 active focus">
<input id="pricing-toggle--regular" class="switch-input" type="radio" name="plan" checked=""> Monthly
</label>
<label class="btn btn-round btn-outline-dark w-150">
<input id="pricing-toggle--professional" class="switch-input" type="radio" name="plan"> Yearly
</label>
</div>
</div>
<div class="row gap-y text-center">
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Free</p>
<br>
<h2 class="price">free</h2>
<p class="small text-lighter">Forever!</p>
<div class="text-muted">
<small>Searchable messages up to 10K</small><br>
<small>10 apps or service integrations</small><br>
<small>5GB total file storage for the team</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-outline-primary" href="http://thetheme.io/thesaas/demo/saas-2.html#">Get started</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="pricing-1 popular">
<p class="plan-name">Standard</p>
<br>
<h2 class="price text-success">
<span class="price-unit">$</span>
<span data-bind-radio="pricing" data-monthly="6.67" data-yearly="75">6.67</span>
</h2>
<p class="small text-lighter">
Per user/
<span data-bind-radio="pricing" data-monthly="month" data-yearly="year">month</span>
</p>
<div class="text-muted">
<small>Unlimited searchable message archives</small><br>
<small>Unlimited apps and service integrations</small><br>
<small>10GB file storage per team member</small><br>
</div>
<br>
<p class="text-center py-3">
<a class="btn btn-success" href="http://thetheme.io/thesaas/demo/saas-2.html#monthly" data-bind-href="pricing" data-monthly="#monthly" data-yearly="#yearly">Get started</a>
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Scripts -->
<script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/page.min.js.download"></script>
<!-- <script src="./SaaS 2 — TheSaaS Sample Demo Landing Page_files/script.js.download"></script>
-->
<script type="text/javascript">
document.querySelector(".pricing-plans-regular").setAttribute('style', 'display:none !important');
const toggleRegular = document.querySelector("#pricing-toggle--regular");
const toggleProfessional = document.querySelector("#pricing-toggle--professional");
console.log(toggleRegular, toggleProfessional);
toggleRegular.onclick = function() {
console.log('toggleRegular')
};
toggleProfessional.onclick = function() {
console.log('toggleProfessional')
};
</script>
</body>
</html>

You're using multiple ID instead of Class. IDs are meant to be unique.
Use class . selector
Use Element.querySelectorAll()
const toggleProfessional = document.querySelectorAll(".pricing-toggle--professional");
const togProf = (ev) => {
console.log(`${ev.target.name} says: ${ev.target.value}`);
};
toggleProfessional.forEach(el => el.addEventListener("change", togProf));
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="1"> aaa 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="aaa" value="2"> aaa 2</label>
<hr>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="1"> bbb 1</label>
<label><input type="radio" class="pricing-toggle--professional" name="bbb" value="2"> bbb 2</label>

if a parent element has a chlid then add class onclick

I'm trying to write a script that if a parent element has a chlid then add class onlick, here's what i've got so far. any help would be much appreciated, p.s i know much code is terrible: The parent element is ".pinGrid" and the child is "#pin" and the onclick is "#like"
NOTE: I'm trying to add the class to the child element. The pin boxes are on a for each loop.
JS:
$(document).ready(function(){
$("#like").click(function () {
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
});
});
HTML:
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>

You can just use the ID selector to get the child element, then use toggleClass() with the checked status
$(document).ready(function() {
$(".like").change(function() {
$(this).closest('.pin').toggleClass("pincard-checked", this.checked);
});
});
.pincard-checked {
background-color: lightgrey;
}
.pin {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click
</p>
</div>
</div>
</div>
</div>

I am assuming that, if .pinGrid has #pin, you want to fire click() of #like, if thats so,
$(document).ready(function(){
$("#like").click(function () {
//YOUR ACTION
});
($('.pinGrid #pin').length>0)?$("#like").trigger("click"):alert("NOT FOUND");
//IF YOU WANT TO ADD CLASS
//($('.pinGrid #pin').length>0)?$("#pin").addClass("pincard-checked"):alert("NOT FOUND");
});

You need to use:
var pingrid= $('.pinGrid');
$("#like").click(function () {
if(pingrid.hasClass( "#pin" ))
pingrid.find('#pin').toggleClass("pincard-checked");
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.my_class {
color:red;
}
</style>
<script>
$(document).ready(function () {
$("#like").click(function () {
if ($('.pinGrid #pin1').length > 0) {
$('.pinGrid #pin1').toggleClass("my_class")
}
});
});
</script>
<body>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title">Click</p>
</div>
</div>
</div>
</div>
</body>
</html>

You just need to replace
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
with
$('.pinGrid').find( ".pin" ).toggleClass("pincard-checked");
Here is the fiddle link

don't work submit in JQuery

I have this code code of submit form:
$('.nav_step ul li').live('click', function(event){
$( "#"+where_it ).submit();
event.preventDefault();
});
HTML
<div class="row nav_step">
<ul>
<li class="first">
<a href="/~162/appsite/requirement/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">1</span> Requirements
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/profile/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">2</span> Profile
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/assets/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">3</span> Assets
</span>
</span>
</span>
</a>
</li>
<li class="active">
<a href="/~162/appsite/liability/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">4</span> Liabilities
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/third/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">5</span> Third Parties
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/compliance/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">6</span> Compliance
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/document/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">7</span> Documents
</span>
</span>
</span>
</a>
</li>
<li class="last">
<a href="/~162/appsite/document/result.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">8</span> Submit
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
<form class="form-vertical" id="client-liability-form" action="/~162/appsite/liability/update.html" method="post">
<div style="display:none"><input type="hidden" value="ccc127985bc916e7ee507b4a238173097edf2338" name="YII_CSRF_TOKEN"></div> <fieldset>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
<div id="itemsHolder" class="liability">
<div class="large-15 columns box_bg_holder_2 iner_2 liabilityBlock" rel="0">
<div class="indent_holder">
<div class="row indent_5">
<div class="large-3 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<select class="select_box_2 selectLiability" name="ApplicationLiability[0][item_type]" id="ApplicationLiability_0_item_type">
<option value="0" selected="selected">Property Loan</option>
<option value="1">Credit Card</option>
<option value="2">Car Lease</option>
<option value="3">Personal Loan</option>
<option value="4">Other</option>
</select><span class="required_field_text" id="ApplicationLiability_item_type_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns">
<div class="row_label">
<label for="ApplicationLiability_address">Address</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][address]" id="ApplicationLiability_0_address" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_address_em_" style="display: none"></span>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input top_margin">
<div class="row_input_4">
<span class="ownership_text" rel="0">Ownership</span>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly]" id="ApplicationLiability_0_monthly" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<input class="input_box_2 maskMoney limit" name="ApplicationLiability[0][limit]" id="ApplicationLiability_0_limit" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_limit_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<input class="input_box_2 maskMoney balance" name="ApplicationLiability[0][balance]" id="ApplicationLiability_0_balance" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_balance_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
<strong class="btn_delete liability">Delete</strong>
<strong class="btn_add_more liability"><a>Add More</a></strong>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<div class="row_label_2">
</div>
</div>
<div class="large-3 columns">
<div class="row_input_2">
<div class="row_label">
<label class="line" for="ApplicationLiability_bsb">BSB</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][bsb]" id="ApplicationLiability_0_bsb" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_bsb_em_" style="display: none"></span>
</div>
</div>
<div class="row_input_2">
<div class="row_label double_width iner">
<label for="ApplicationLiability_account_number">Account Number</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][account_number]" id="ApplicationLiability_0_account_number" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_account_number_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns">
</div>
</div>
<div class="ownership_block" style="display: none;">
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][118][percent]" id="Ownership_0_118_percent"><span>%</span>
<input type="hidden" value="118" name="Ownership[0][118][applicant_id]" id="Ownership_0_118_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][125][percent]" id="Ownership_0_125_percent"><span>%</span>
<input type="hidden" value="125" name="Ownership[0][125][applicant_id]" id="Ownership_0_125_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
</div>
<div class="row_input">
<input type="text" value="0" name="Ownership[0][126][percent]" id="Ownership_0_126_percent"><span>%</span>
<input type="hidden" value="126" name="Ownership[0][126][applicant_id]" id="Ownership_0_126_applicant_id"> </div>
</div>
<input type="submit" value="Save" class="btn_save">
</div>
</div>
</div> </div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label for="ApplicationLiability_monthly_exp">What are your current Monthly expenses?</label> </div>
</div>
<div class="large-6 columns">
<div class="row_input">
<div class="row_input_4 none">
<strong class="total_price"></strong>
</div>
<div class="row_input_4">
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly_exp]" id="ApplicationLiability_0_monthly_exp" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_exp_em_" style="display: none"></span>
</div>
<div class="row_input_4 none">
<strong class="btn_help_box">
help
<span class="help_box">There Will Be any written comment</span>
</strong>
</div>
</div>
</div>
<div class="large-1 columns">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder_2 iner_4">
<div class="indent_holder">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<div class="row_input_4">
<strong class="total_price">Total:</strong>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
Monthly Payment
</strong>
<strong class="total_price" id="monthly_payment_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Limit
</strong>
<strong class="total_price" id="limit_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
Balance
</strong>
<strong class="total_price" id="balance_result">
$ 0 </strong>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner" style="padding-left: 0;">
<div class="large-9 columns">
<div class="row_label">
<label for="ApplicationLiability_comment">Income details (if any):</label> </div>
<div class="row_input">
<textarea class="textarea_box_2" name="ApplicationLiability[0][comment]" id="ApplicationLiability_0_comment"></textarea><span class="required_field_text" id="ApplicationLiability_comment_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns"></div>
</div>
</div>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev">Previous</strong>
<strong class="btn_save moveSave">Save</strong>
<strong class="btn_next moveNext">Next</strong>
</div>
</div>
</fieldset>
<input id="moveType" type="hidden" value="save" name="moveType"> </form>
With event.preventDefault(); links does not work after clicking, without event.preventDefault(); i can't see error message after validation and form is submitted but error message i can't see and page reload without notify user about errors.
If i am use this code for detect errors, form does'n submit and it not work.
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
where_it
this is id of form - work fine.
UPDATE: I want what form submit if is errors users notify about it, if not errors i am go to link.
UPDATE1 When i am use this code
$( "#"+where_it ).submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$( "#"+where_it ).submit();
}else{
alert( "error." );
}
});
I will have just redirect. Not submit form and not any errors. Handler for .submit() not work. This is strange.
UPDATE2
$(document).ready(function(){
$('.nav_step ul li').on('click', function(event){
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
$( "#"+where_it ).submit();
event.preventDefault();
});
});
In this code works all. But if all good i am can't redirected after click event coz event.preventDefault(); not allow it. If this is remove i can't see error message after validation. i think possible solution is do something this if success redirect(url: this .nav_step ul li a). But i don't know how do it.

You need to use event.preventDefault() but you should submit the form manually after everything was ok. $( "#"+where_it ).submit();.
something like this:
$('form').submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$('form').submit();
}
});
This is a simple demo you can check it out and change your code.
HTML:
<form>
<input type='text' id='name' name='name'>
<input type='text' id='last_name' name='name'>
<input type='submit' id='send' value='SEND'>
</form>
<span></span>
JS:
$('form').on('submit', function(event)
{
event.preventDefault();
if($('#name').val() != '' && $('#last_name').val() != '')
{
// here you can submit the form
alert('submitted');
//$('form').submit();
}
else
{
$('span').text('fill the textboxes.');
}
});

fadeOut() only fades out the first element

By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.

You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.

Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});

Develop Reference

JavaScript is the programming language of the Web.

on clicking on delete button everything deletes - javascript

you are calling on all elements with delete class and performing on all of them the chained actions. Another possible syntax would be calling the target element on the click event object : $(event.target).parent().remove().

Related

I'm creating a To do list and there is a problem that I can't solve

onclick event not working in JavaScript Why? [duplicate]

if a parent element has a chlid then add class onclick

don't work submit in JQuery

fadeOut() only fades out the first element

Categories

Resources