I have a span id with textContent which have their own time(hour/minutes)
<div class="here">
<span class="time" >8 min</span>
</div>
<div class="here">
<span class="time" >22 min</span>
</div>
<div class="here">
<span class="time" >38 min</span>
</div>
<div class="here">
<span class="time" >1 hour</span>
</div>
<div class="here">
<span class="time" >1 day</span>
</div>
How can we show the span text whose time is less then 60 min, i don't want to show the text of span which contains 1 hour or 1 day any way to do that and yes string with number is necessary for my project.
const els = document.querySelectorAll(".time")
els.forEach(el => {
if (/(hour)|(day)/.test(el.textContent)) el.style.display = "none"
})
<div class="here">
<span class="time">8 min</span>
</div>
<div class="here">
<span class="time">22 min</span>
</div>
<div class="here">
<span class="time">38 min</span>
</div>
<div class="here">
<span class="time">1 hour</span>
</div>
<div class="here">
<span class="time">1 day</span>
</div>
for(var i=0;i<5;i++){
if(document.querySelectorAll(".time")[i].textContent.includes("min")){
console.log(document.querySelectorAll(".time")[i].textContent);
}
}
}
This works too
Related
I have div blocks which contain title and information. I have a script which works and search but for all information. I need my search works only for title. I think about maybe make some filter for search by .overlay-cls and h4
My script:
jQuery("#country_search").keyup(function() {
var filter = jQuery(this).val();
jQuery('.country-grid div').each(function() {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
jQuery('.country-info').show();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input placeholder="Search Country" type="text" id="country_search" class="find_country">
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image: url('')">
<div class="overlay-cls">
<h4>Afghanistan</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Afghan Afghani (AFN)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>10% - 20%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Albania</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Albanian Lek (ALL)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>20 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>16.7%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Algeria</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Algerian Dinar (DZD)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>up to 26%</strong>
</span>
</div>
</div>
You want to search the h4 in each .country-box:
$("#country_search").keyup(function () {
var filter = $(this).val().trim().toLowerCase();
$('.country-box.search').each(function () {
if ($(this).find("h4").text().toLowerCase().includes(filter)) {
$(this).show();
} else {
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input placeholder="Search Country" type="text" id="country_search" class="find_country">
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image: url('')">
<div class="overlay-cls">
<h4>Afghanistan</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Afghan Afghani (AFN)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>10% - 20%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Albania</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Albanian Lek (ALL)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>20 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>16.7%</strong>
</span>
</div>
</div>
<div class="country-box search">
<div class="post_thumbnail" style="background-image:url('')">
<div class="overlay-cls">
<h4>Algeria</h4>
</div>
</div>
<div class="country-info">
<span class="countValuete">
<span>Valuete</span>
<strong>Algerian Dinar (DZD)</strong>
</span>
<span class="countrypay">
<span>Work Week</span>
<strong>40 hours</strong>
</span>
<span class="countrytaxes">
<span>Employer Taxes</span>
<strong>up to 26%</strong>
</span>
</div>
</div>
I've used String#includes with String#lowerCase because your regex-based approach will fail if the user enters characters that have special meaning in regex, and because you're aiming for a simple substring search, which does not require the capabilities of regex in the first place.
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
I have a webpage where a long section of divs are pulled in from another application. I can't filter the divs before they're pulled in, but I need to hide divs (using jquery) that contain duplicate data for certain values.
Divs with duplicate data will always appear adjacent to one another and only come in pairs (never 3 or more divs with the same data), but there might be multiple pairs of duplicates on a page. There will never be more than 25 total .data-results divs on a page.
So, in the (long) example below, since #a-2 and #a-3 have exactly the same values for .data-one-result AND .data-two-result, I need to completely hide one of the divs (either one is fine), but leave #a-1 and #a-4 as-is. I don't care about the values in .data-three and it will have different values even in the duplicate divs.
(edit: changed date-one to data-one because of a typo)
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="data-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>
Try this : You can iterate all data-results divs and compare result one and two of current div with next div. if result matches then hide next div.
NOTE - You have date-one and data-two where date-one should be data-one (date should be data) for consistency. I have coded using date-one hence make changes once you change in html code.
$(function(){
$('div.data-results').each(function(){
if($(this).is(':visible'))
{
var $nextDiv = $(this).next('div.data-results');
if($nextDiv.length > 0)
{
var thisResultOne = $(this).find('div.date-one .data-one-result').text();
var nextResultOne = $nextDiv.find('div.date-one .data-one-result').text();
var thisResultTwo = $(this).find('div.data-two .data-two-result').text();
var nextResultTwo = $nextDiv.find('div.data-two .data-two-result').text();
if(thisResultOne == nextResultOne && thisResultTwo == nextResultTwo)
{
$nextDiv.hide();
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>
Match the span values with the previous elements using each() and slice() functions.
$('.data-holder > div').each(function(){
var currElement = $(this);
var index = $('.data-holder > div').index($(this))-1;
var previousElements = $('.data-holder > div').slice( 0, index <= 0 ? 0 : index );
console.log(previousElements);
previousElements.each(function(){
if(
$('span',this).first().text() == $('span', currElement).first().text() &&
$('span',this).last().text() == $('span', currElement).last().text()
){
currElement.hide();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="data-results" id="a-1">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">85</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">200</span>
</div>
</div>
</div>
<div class="data-results" id="a-2">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">300</span>
</div>
</div>
</div>
<div class="data-results" id="a-3">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$50</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">400</span>
</div>
</div>
</div>
<div class="data-results" id="a-4">
<div class="data-holder">
<div class="date-one">
<span class="data-one-label">One:</span>
<span class="data-one-result">$30</span>
</div>
<div class="data-two">
<span class="data-two-label">Two:</span>
<span class="data-two-result">75</span>
</div>
<div class="data-three">
<span class="data-three-label">Three:</span>
<span class="data-thee-result">500</span>
</div>
</div>
</div>
I try to make draggable &sortable content with jQuery UI when i use:
helper:clone property
it's work perfectly, but i don't want to clone elements.
I want move them and when i use default helper then elements are not sortable.
Elements are on the stack in one place, instead of move other elements to make empty place form dragged element
See those Html and script below
This works for 2 categories
<div class="content">
<div class="category" data-category="1">
<div class="noteCategory">
<h3>Cat 1</h3>
</div>
<div id="categorycontent1" class="categoryContent">
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-01
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text
</div>
</div>
<div class="note cnote" data-id="2" data-category="1">
<span class="noteDate">
<span class="date">
2015-01-02
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 2
</div>
</div>
</div>
</div>
<div class="category" data-category="2">
<div class="noteCategory">
<h3>Cat 2</h3>
</div>
<div id="categorycontent2" class="categoryContent">
<div class="note cnote" data-id="5" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-04
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 22
</div>
</div>
<div class="note cnote" data-id="8" data-category="2">
<span class="noteDate">
<span class="date">
2015-01-06
</span>
<span class="hour">
12:12
</span>
</span>
<div class="noteText">
note Text 23
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#categorycontent1, #categorycontent2").sortable({
connectWith: ".categoryContent"
}).disableSelection();
});
</script>
Hope this helps
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.');
}
});