New to javascript, trying to create a simple program that scrolls to the div when navigation item is clicked. However, its not working, I can't figure out why.
Here is the snippet :
$(document).ready(function() {
alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
// stops the a tags for working.. i.e. clicking to another page. Functions stops the functionality.
var sectionID = e.currentTarget.id + "Section";
alert('button id ' + sectionID);
$("html body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000)
})
})
}
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
At first I thought the problem was with my jquery, however its working fine. The links to javascript is correct too. I've tried rechecking the animate function but I can't pin point the issue. Any ideas?
$("html body") has to be replaced by $("html,body") for the scroll to trigger.
You also had an error in your javascript, one more '})'at the end.
Now that's fine. Check your console for such errors, or use snippets, as in your question.
$(document).ready(function() {
// alert("asda");
setBindings();
});
function setBindings() {
$("nav a").click(function(e) {
var sectionID = e.currentTarget.id + "Section";
// alert('button id ' + sectionID+ $("#" + sectionID).offset().top);
$("html,body").animate({
scrollTop: $("#" + sectionID).offset().top
}, 1000);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="javascript:;">Delivery</a></li>
<li><a id="about" href="javascript:;">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
Try this one, for the scrolling.
$('#your_image_for_the_scroll').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
});
This image could appear after user does scroll down a bit:
$(window).scroll(function () {
if ($(this).scrollTop() >= 20) { // If page is scrolled more than 20px
$('#your_image_for_the_scroll').fadeIn(200);
} else {
$('#your_image_for_the_scroll').fadeOut(200);
}
});
Mostly it is because of the typo. There is an extra ) & } at the end of the function
I Have created a JSFIDDLE and it is working here
As pointed by OP It's working without javascript. We all should have been more clever about this, as anchors are common.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="clearfix">
<div class="logo-container">
<i><h2><b>DELIVERY MOTION</b></h2></i>
</div>
<ul class="clearfix">
<li><a id="delivery" href="#">Delivery</a></li>
<li><a id="about" href="#">About Us</a></li>
<li>Services</li>
<li>FAQ</li>
<li>Contact</li>
<li>Login</li>
</ul>
Menu
</nav>
<div id="deliverySection">
<h1> Order anything from anywhere in Karachi instantly at your doorstep. </h1><hr>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend id='delivery-text'>Delivery Fee Calculator</legend>
<span>FROM </span> <input type="text" name="firstname" value="PICKUP ADDRESS">
<span>TO </span> <input type="text" name="lastname" value="DROP ADDRESS">
<span>ESTIMATED FEE </span> <input type="text" name="estimated-fee" value="0.00 PKR">
<input class='btn-submit' type="submit" value="BOOK NOW!">
</form>
</div>
<div id='silver-bar'>
<img src='img/red-car.png' alt='fast deliver'>
</div>
</div>
<div id="aboutSection">
<h2> How it works </h2>
<div class="container">
<div class="row">
<div class="col-sm-2" id="infobox">
<img src='img/map-icon.png' width="50px" height="50px">
<h3> Search </h3>
<h4>Select pickup address </h4>
</div>
<div class="col-sm-2">
<br><br>
<img src='img/arrow-up.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/delivery-icon.png' width="50px" height="50px" class="order-icon-img">
<h3> Order</h3>
<h4>Make a booking online </h4>
</div>
<div class="col-sm-2">
<br>
<img src='img/arrow-down.png' width="50px" height="50px" class='arrows-img'>
</div>
<div class="col-sm-2" id="infobox">
<img src='img/truck-icon.png' width="50px" height="50px">
<h3> Delivered</h3>
<h4>Instant courier delivery</h4>
</div>
</div>
</div>
</div>
Related
I am currently developing a landing page website for a client to display a range of products.
I have created a filter in JS to filter some products but its not working.
The two radios are tagged with Motorola and when you select the Motorola it doesn't show them?
I would appreciate any help someone can give me.
I am not the most confident with javascript
<div class="container mg-b-40">
<div class="row">
<div class="col-lg-2">
<aside class="sidebar">
<h5 class="heading-primary">Filter</h5>
<ul class="shop-filters">
<li class="filter">
<input type="checkbox" value="motorola" id="motorola">
<label for="motorola">Motorola</label>
</li>
<li class="filter">
<input type="checkbox" value="hytera" id="hytera">
<label for="hytera">Hytera</label>
</li>
<li class="filter">
<input type="checkbox" value="icom" id="icom">
<label for="icom">Icom</label>
</li>
<li class="filter">
<input type="checkbox" value="vertex" id="vertex">
<label for="vertex">Vertex</label>
</li>
<li class="filter">
<input type="checkbox" value="kenwood" id="kenwood">
<label for="kenwood">Kenwood</label>
</li>
<li class="filter">
<input type="checkbox" value="savox" id="savox">
<label for="savox">Savox</label>
</li>
</ul>
</aside>
</div>
<div class="col-lg-10">
<div class="masonry-loader masonry-loader-showing">
<div class="row products product-thumb-info-list mt-3" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
<div class="category motorola">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
<div class="category hytera">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(':input').change(function(evt){
var filter = $(':input:checked,select').map(function(index, el) {
return "." + el.value;
}).toArray().join("");
$(".product").hide().filter(filter).show();
});
</script>
The problem with your code is that you're hiding .product, but actual item to be hidden is .category. See below the working demo.
$(':input').change(function(evt) {
var filter = $(':input:checked, select').map(function(_, el) {
return "." + el.value;
}).toArray().join("");
$(".category").hide().filter(filter).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mg-b-40">
<div class="row">
<div class="col-lg-2">
<aside class="sidebar">
<h5 class="heading-primary">Filter</h5>
<ul class="shop-filters">
<li class="filter">
<input type="checkbox" value="motorola" id="motorola">
<label for="motorola">Motorola</label>
</li>
<li class="filter">
<input type="checkbox" value="hytera" id="hytera">
<label for="hytera">Hytera</label>
</li>
<li class="filter">
<input type="checkbox" value="icom" id="icom">
<label for="icom">Icom</label>
</li>
<li class="filter">
<input type="checkbox" value="vertex" id="vertex">
<label for="vertex">Vertex</label>
</li>
<li class="filter">
<input type="checkbox" value="kenwood" id="kenwood">
<label for="kenwood">Kenwood</label>
</li>
<li class="filter">
<input type="checkbox" value="savox" id="savox">
<label for="savox">Savox</label>
</li>
</ul>
</aside>
</div>
<div class="col-lg-10">
<div class="masonry-loader masonry-loader-showing">
<div class="row products product-thumb-info-list mt-3" data-plugin-masonry data-plugin-options="{'layoutMode': 'fitRows'}">
<div class="category motorola">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Motorola DP1400</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
<div class="category hytera">
<div class="col-sm-6 col-lg-12 product">
<span class="product-thumb-info">
<span class="product-thumb-info-image">
<img alt="" class="img-fluid" src="https://cdn.shopify.com/s/files/1/1148/2692/products/dp1400-01_Radio_Shop_UK_b113f82f-a13b-4ffa-93fd-612f313084ef.jpg?v=1529421291">
</span>
<span class="product-thumb-info-content">
<h4 class="heading-brand">Hytera</h4>
<div class="btn-group action-group" role="group" aria-label="Action Buttons">
Call Now
<a href="" class="btn btn-secondary btn-buy" rel=”nofollow”>Buy Now</a>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to write a HTML code to be able to reply to comments. The issue I'm having in the code below is when I click the reply button it appends the reply text area to both comment 1 and comment 2. What can I do to make it only append the text area to only the relevant comment.
<script>
function reply2comment() {
$("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
}
</script>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div>
<div class="userName_mP">Tim</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 1</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div>
<div class="userName_mP">David</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 2</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
You have 2 divs with the same id "reply". This makes your $("div#reply").html(... command append it to the both of them.
IDs should be unique. You shouldn't have more than 1 element with the same ID attribute.
If a jQuery selector matches more than one element, it will call the html( methon on both of them.
Here is what something you could do.
$(document).ready(function() {
$(".reply").bind("click",
function reply2comment(event) {
var $replyContainer = $(event.currentTarget).siblings("#reply");
$replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' +
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/yy.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">Tim</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 1</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/xx.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">David</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 2</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
I modified you user_reviews markup to group the reply div and the reviews together.
And changed the event handlers from markup to script, just to make it easier to bind events.
I need a small help from all of you .
I have a list in which multiple div is present. Each list has 3 divs inside it where the first div of every list is an image. I need to fade in fade out the first div of each list.
Below is my code.
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<div class="sliderinner">
<ul>
<li>
<div id ="image1">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li >
<div id ="image2">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id ="image3">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image4">
<div class="description">
<div class="description-text">
<h2>Birds</h2>
</div>
</div>
</div>
</li>
<li >
<div id="image5">
<div class="description">
<div class="description-text">
<h2>Taj Mahal</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
</div><!--slider-->
<edit>
animation + delay increased for each boxes : http://codepen.io/gc-nomade/pen/qAjod/
</edit>
here is an example :
div {
animation: fdio 1s infinite;
background:gray;
}
#keyframes fdio {
50% {opacity:0;}
}
for : <div> text </div>
DEMO
do not forget to add vendor-prefix or use a script to add them automaticly
<ul>
<li>
<div id="image1" class="abc">
<div class="description">
<div class="description-text">
<h2>Slideshow Title 3</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image2" class="abc">
<div class="description">
<div class="description-text">
<h2>Laddak</h2>
</div>
</div>
</div>
</li>
<li>
<div id="image3" class="abc">
<div class="description">
<div class="description-text">
<h2>Hangouts</h2>
</div>
</div>
</div>
</li>
</ul>
setInterval(function(){ $(".abc").fadeToggle("slow");},4000);
http://jsfiddle.net/x73z9/2/
you can use like this :
li div:first-child {
//put css code here
}
I have the html code `
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div id="generalList"></div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="siteName" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteNo" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleNo">moduleNo:</label>
<input type="text" moduleNo="moduleNo" id="moduleNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="executiveNo">executiveNo:</label>
<input type="text" executiveNo="executiveNo" id="executiveNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button id="btn_3" type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
<button id="btm_4" type="submit" data-theme="a">modify</button>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>`
I have created the list of fields from different pages with the code below
function makesite(site){
var li = '<ul data-role="listview" >';
$('body').find('[data-role="fieldcontain"]').each(function(key, value){
var title = $(this).find('label').html();
var val = $(this).find('[type="text"]').val();
li += '<li>'+title+' '+val+'</li>';
});
li +='</ul>';
$('#content').html(li).trigger('create');
$('ul').listview('refresh');}
But the problem is I need to display the List of site added with sitename on clicking modify button in page with id "modifysite". where site, site name,site no,executive no, module no are global variables.
I have tried with the code below
Function redrawsites(site){
var ul = makesite(site);
$('#content').html(ul).trigger('create');
}
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.');
}
});