Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
I have an issue with selector where I am defining as:
<select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple>
However, When I am selecting the data, it doesn't show me the ticks next to the options.
I am using bootstrap 2.3.2 with bootstrap-select. I have the css and js of them added to my asserts. I can choose and get the values however, I am not able to see the ticks next to the options when I am selecting them.
Cheers,
It's always wise to look through the scripts you are using even if they don't mean much, they will make sense after awhile.
Reference: https://github.com/caseyjhol/bootstrap-select/blob/master/bootstrap-select.js
See lines 942-965 and locate near the bottom:
$.fn.selectpicker.defaults = {
.... // bunch of default settings
iconBase: 'glyphicon', // the font family for the checkmark
tickIcon: 'glyphicon-ok', // classname for the checkmark
...
};
This defaults to glyphicon, part of Bootstrap 3. You will need to install this font or you can use Font Awesome (go to their site, follow instructions) and change the two values when you call the script:
$('.selectpicker').selectpicker({
iconBase: 'NameofFOnt',
tickIcon: 'classname'
});
This "problem" still exists within Bootstrap 4 as Bootstrap-select uses Glyphicon. Putting together all the answers this helped me (BS4.3.1, fa 5.7.1, BS-select 1.13.8):
<select data-icon-base="fas" data-tick-icon="fa-check">
Use the snake case as mentioned here
add Font Awesome css in your HTML page.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
and replace these in bootstrap-select.js and bootstrap-select.min.js
iconBase: 'glyphicon', tickIcon: 'glyphicon-ok'
to
iconBase:"fontawesome",tickIcon:"fa fa-check"
If you are talking about way through CDN so, this is the solution:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"type="text/javascript"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"rel="stylesheet" type="text/css" />
<script>
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
});
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<form action="#" method="POST">
<div class="form-group row">
<div class="col-sm-10">
<select class="form-control selectpicker" id="select-country lstFruits" multiple="multiple" data-live-search="true" >
<option data-tokens="china">China</option>
<option data-tokens="malayasia">Malayasia</option>
<option data-tokens="singapore">Singapore</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and if you want to add the icons offline files so you can import the icons through import, just place the below code above your bootstrap css.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
Am struggling with proper syntax to change a link you go to onclick using javascript.
I have:
js:
function changeLink {
link = "page2.php";
document.getElementById('go').onclick= function() { location.href(link); };
}
html:
<button type="submit" name="submit1" style="width:100%;height:30px" onclick="changeLink();">Change Place To Go</button>
<div id="go" onclick="document.location.href='page1.php';">Click to go somewhere</div>
JS fiddle
Thanks for any suggestions!
Let's start with some common.js:
//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now let's do your main page, index.php:
//<![CDATA[
function direct(id, link){
E(id).onclick = function(){
location = link;
}
}
direct('button1', 'page1.php'); direct('button2', 'page1.php');
//]]>
HTML can look more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'common.css'; #import 'index.css';
</style>
</head>
<body class='njs'>
<div id='main'>
<input type='button' id='button1' value='button 1' />
<input type='button' id='button2' value='button 2' />
</div>
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='index.js'></script>
</body>
</html>
Your CSS on common.css:
body{
margin:0;
}
#main{
width:980px; margin:0 auto;
}
Your CSS on index.css:
#button1,#button2{
height:30px; width:300px;
}
Note:
You could use a CSS class instead of the comma separated ids. This is just to show you what the syntax should look like. You should know that onclick fires before form submission, therefore redirecting would happen before submission, so there is no point in using a submit button. There is really no point in having a form in your case, unless you can explain why. I would just use <a href='page1.php'>page 1</a>, and the like, so you don't even need to use JavaScript. You can use CSS to style a link into a button.
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.
i need to display an image only after a button click in asp.net mvc2
but i am getting it even before click as well as after click
can someone give me a solution as to why this is happenning??
Try something on the lines of:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<button>Show it</button>
<img src="url" style="display: none" />
<script>
$("button").click(function () {
$("img").show("slow");
});
</script>
</body>
</html>
http://api.jquery.com/show/