I am using ASP.NET MVC 5. Here, when i click on the search bar it calls the java script function, and when i provide the searchString value to the form, and click SUBMIT, it doesn't submit anything. Why is that?
<script>
$(function () {
$('a[href="#search"]').on('click', function (event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});
$('#search, #search button.close').on('click keyup', function (event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});
</script>
View:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#if (Request.IsAuthenticated)
{
#Html.ActionLink("TimeEntry", "Index", "TimeEntry", null, new {#class = "navbar-brand"})
}
else
{
#Html.ActionLink("TimeEntry", "Login", "User", null, new {#class = "navbar-brand"})
}
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Clock In/Out(WIP)", "Index", "TimeEntry")</li>
<li>#Html.ActionLink("Time Summary", "BackEnd", "TimeEntry")</li>
<li>#Html.ActionLink("Users", "Index", "User")</li>
<li>Search</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Request.IsAuthenticated)
{
<li> #Html.ActionLink("Log Out", "Logout", "User")</li>
}
</ul>
</div>
</div>
</div>
<div id="search">
<button type="button" class="close" style="padding-top: 35px">x</button>
#using (Html.BeginForm("Search", "User", FormMethod.Get))
{
#Html.TextBox("searchString","", new {#placeholder = "Search by First Name"})
<button type="button" class="btn btn-primary">Search Rando</button>
}
</div>
<div class="container body-content">
#RenderBody()
<hr/>
<footer>
<p>© #DateTime.Now.Year - My TimeClock Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
This line is cancelling the default event action. Take it out to allow the form to submit.
event.preventDefault();
This will allow the form to submit. Although the other two lines in that function will no longer serve any purpose, since they are modifying the state of the document, but the browser will navigate away from the document as soon as the form submission happens.
<button type="button" class="btn btn-primary">Search Rando</button>
should be changed to
<button type="submit" class="btn btn-primary">Search Rando</button>
by altering the type to submit
Related
I'm trying to validate a contact form as the button is clicked.
I have window alerts to display when an input is empty, they are based in the html file.
This is a school project and I have to link to them from the js.file, but nothing shows up when the field is empty.
My html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card Game</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"> <h1><i class="fa fa-gamepad" aria-hidden="true"></i> Card Game</h1></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li class="active">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-sm-12">
<form id="signUpForm">
<h2>Contact us Form<h2>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br>Name: <br>
<input type="text" name="firstName" id="firstName">
<span class="error" id="firstNameError">This field cannot be blank</span>
</div>
<div class="col-sm-12">
<br>Last Name: <br>
<input type="text" name="lastName" id="lastName">
<span class="error" id="lastNameError">This field cannot be blank</span>
</div>
<div class="col-sm-12">
<br>Telephone: <br>
<input type="text" name="phone" id="phone">
<span class="error" id="phoneError">Please enter a correct phone number</span>
</div>
<div class="col-sm-12">
<br>Email: <br>
<input type="text" name="email" id="email">
<span class="error" id="emailError">Please enter a correct email address</span>
</div>
<div class="col-sm-12">
<button type="submit" onclick="submit()" id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</form>
</div>
</div>
</section>
<footer>
Copyright <i class="fa fa-copyright" aria-hidden="true"></i> Noroff
</footer>
<script src="scripts/contact.js"></script>
</body>
</html>
My Javascript code:
var name = document.getElementById('firstName');
var lName = document.getElementById('lastName');
var phone = document.getElementById('phone');
var email = document.getElementById('email');
var validateForm = document.getElementById('submitContact');
var signUpForm = document.getElementById('signUpForm');
//Function that validates wether or not there is input on first and last name
function validateName(){
if (name.length == 0) {
window.alert(document.getElementById(firstNameError));
return false;
}
if (lName.length == 0) {
window.alert(document.getElementById(lastNameError));
return false;
}}
//Function for validating that there is input in the phone input, and that the input matches the phone value
function validatePhone() {
if(phone.length == 0){
window.alert(document.getElementById(phoneError));
return false;
}
if (phone.matches(/^(\+{1}\d{2,3}\s?[(]{1}\d{1,3}[)]{1}\s?\d+|\+\d{2,3}\s{1}\d+|\d+){1}[\s|-]?\d+([\s|-]?\d+){1,2}$/)){
window.alert(document.getElementById(phoneError));
}}
//Function for validating that there is input in the email, and that the email matches the email value
function validateEmail (){
if(email.length == 0){
window.alert(document.getElementById(emailError));
return false;
}
if (email.value == /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) {
window.alert(document.getElementById(emailError));
return false;
}}
validateForm.addEventListener('click', function (event) {
signUpForm.submit();
});
Anyone who can help me?
Thanks
As far as I can see, there are two things that you are not doing correctly.
You are calling submit() directly, which you shouldn't. It's because you're tracking the click event listener at the bottom already. Remove the onclick and type="submit" part. It'll refresh the page if you have type="submit".
<button id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
You're calling submit() in your event listener before validating the inputs.
validateForm.addEventListener('click', function (event) {
// TODO: Put your validation codes here.
signUpForm.submit();
});
I wan't to add modal dialog as information box for how to use website. I have done code, it works, but my problem is that, I have multiple tabs in my browser, and my modal dialog is in default tab. When I change tabs and again come back to the default tab, the modal dialog is shown again. I want to show modal dialog only once when opening website.
<body onload="mumbai();">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img style="height:20px;width:20px;"src="http://cdn.9appsdownloading.com/group1/M01/35/1C/poYBAFcpqU-AFa5CAAAMm35WLrc217.png"></span><h3 style="display:inline;color:white">Urban Growth of Indian Cities</h3></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Mumbai</li>
<li class="divider"></li>
<li>Delhi</li>
<li class="divider"></li>
<li>Bengaluru</li>
<li class="divider"></li>
<li>Chennai</li>
<li class="divider"></li>
<li>Kolkata</li>
<li class="divider"></li>
<li>Hyderabad</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="memberModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!--<h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>-->
</div>
<div class="modal-body">
<img src="images/Webmap_info_25_8_2017.png"></img>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#memberModal').modal('show');
});
</script>
Finally solved problem.
$(document).ready(function() {
var yetVisited =sessionStorage['visited'];
if (!yetVisited) {
$("#Modal").modal("show").on("shown", function () {
window.setTimeout(function () {
$("#Modal").modal("hide");
}, 20000);
});
// open popup
sessionStorage['visited'] ="yes";
}
});
Thanks Patrick and ProEvilz.
You can use sessionStorage to identify that the user just visited your first site:
$(document).ready(function() {
var firstSite = sessionStorage['firstSite'];
if (!firstSite) { // or firstSite != "visited"
// some code here if the user is new to the site
$('#memberModal').modal('show');
sessionStorage['firstSite'] = "visited";
}
});
sessionStorage maintains a separate storage area for each given origin
that's available for the duration of the page session (as long as the
browser is open, including page reloads and restores)
Here's a jsFiddle to show how it works.
Try:
<script>
var visited = false;
$(document).ready(function () {
if (visited == false) {
$('#memberModal').modal('show');
visited = true;
}
});
</script>
Can't get my bottom div to show.
tried all the suggestions in SO from this year. Added a variable to $scope, tried $scope.apply(); , etc.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
In my navController:
console.log('navController up!');
$scope.vm = { open: false};
$scope.navCollapse = function(){
console.log('before click', $scope.vm.open);
$scope.vm.open = !$scope.vm.open;
// $scope.vm.open = ($scope.vm.open == false) ? true : false;
console.log('after click', $scope.vm.open);
//open up menu
};
I know the controller is loaded because the console log shows up.
You div seems to be outside of controller's scope. try wrapping whole thing in another div like this:
<div ng-controller="navController">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
</div>
Ofc, sometimes placing navigation menu and components, that are controlled by the menu into a single wrapper is not an option. In this case you may use services and $broadcast/$emit to communicate the changes.
https://plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview
How to create dropdown menu in AngularJs 2 Javascript?
I have watched alot of tutorials but there is only available for Typescript. i need it in Javascript. Please help.
(function(app) {
app.HeaderComponent = ng.core
.Component({
selector: 'header',
template:
`<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class=" navbar-brand">
<span class="brandname">Slant<sub> AngulatJS</sub></span>
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dashboarddiv">
Dashboard
</li>
<li></li>
<li>
<div [hidden]="submitted">
<form (ngSubmit)="onSubmit()" #Header="ngForm">
<button type="submit" [disabled]="!Header.form.valid"><span class="glyphicon glyphicon-envelope"></span></button>
</form>
</div>
<div [hidden]="!submitted">
<button (click)="submitted=false"><span class="glyphicon glyphicon-envelope"></span></button>
<h2>You submitted</h2>
<div class="row">
<div class="col-xs-3">Name</div>
<div class="col-xs-9 pull-left">rrr</div>
</div>
<div class="row">
<div class="col-xs-3">Alter Ego</div>
<div class="col-xs-9 pull-left">r</div>
</div>
<div class="row">
<div class="col-xs-3">Power</div>
<div class="col-xs-9 pull-left">r</div>
</div>
</div>
</li>
</ul>
</div>
</nav>`
})
.Class({
constructor: function() {
this.submitted = false;
},
onSubmit: function() {
this.submitted = true;
},
});
})(window.app || (window.app = {}));
I have tried this. but it creates div hide and show. I want dropdown menu in navigation bar.
This is the result of this code
I have made a collapsed navbar on the outside clicking navbar element using bootstrap, and it worked
but when I megganti navbar element with input form, this is not the way I want
because when I would fill out the form navbar automatically collapse before I finished it
This is the code that I created: http://jsfiddle.net/acile/3cbje867/
HTML code:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="/">Application</a>
</div>
<div class="navbar-collapse collapse navbar-search">
<ul class="navbar-nav nav menu menu-main-menu">
<li>
<div class="input-group">
<input id="search-input" class="form-control" type="text" placeholder="Search" tabindex="1" autocomplete="off">
<div class="input-group-btn">
<button id="search-button" class="btn btn-primary" tabindex="2"><span class="glyphicon glyphicon-search"></span></button>
</div>
</input>
</div>
</li>
</ul>
</div>
</div>
javascript code:
$(document).click(function (event) {
var $navsearch = $(".navbar-search");
var _opened = $navsearch.hasClass("in");
if (_opened === true) {
$navsearch.collapse('hide');
}
});
help me please, how can i fix it ?
You need to determine whether you are clicking inside of the element or not.
Use $(e.target).closest($navsearch).length to check whether the click event occurs inside of $('.navbar-collapse.navbar-search').
Updated Example
$(document).on('click', function(e) {
var $navsearch = $('.navbar-collapse.navbar-search');
if(!$(e.target).closest($navsearch).length && $navsearch.is(':visible')) {
$navsearch.collapse('hide')
}
})
Bootstrap's navigation has already the collapsed functionality in-built so you don't have to re-write it. You could manually hide the search bit using some jQuery:
http://jsfiddle.net/1p8p0dnf/5/
$('#search-button').on('click', function() {
// Remove collapsed class
$('#search-nav').removeClass('in');
// Clear search input text
$('#search-input').val('');
});