I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">
This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});
Updated fiddle
Source
Related
I've come back to web development after a lengthly lay off, I'm using bootstrap and creating a simple contact form. If there is an error with validation I want to add a couple of classes to make the form element turn red and put the little cross in the input.
I've used the examples from the bootstrap site and I get it to work fine. As soon as I put the content into a form the addClass doesn't stick. The input flashes red and goes back to the grey border. I've stripped back my whole html to check it isn't anything else I've done and have narrowed the error down to the tags.
Any help greatly appreciated. PS my first post on here, apologies if I've missed anything
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
#emailError{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div id="emailDiv" class="form-group">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control" id="email">
<div class="form-control-feedback" id="emailError">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-element">
<input type="submit" value="Sign Up" id="submitBtn">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#submitBtn").click(function(){
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
});
</script>
</body>
</html>
Like #AlonEitan said, you need to disable the default action of the form, which is to submit the form and that will reload the page. You can disable the action with e.preventDefault() or return false. You can disable it conditionally if you find errors, or you can disable it by default, then manually submit once the form is validated. Here's an example.
$("#submitBtn").click(function(e){
e.preventDefault();
if (there are errors) {
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
} else {
$('#formId').submit();
}
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</head>
<script>
function confirm() {
BootstrapDialog.confirm('Are you sure you want to do this?');}
</script>
<input type="button" value="confirm" onclick="confirm()" />
Hi. I'm trying to make a bootstrap confirm alert which is activated by a button input. I'm a total beginner, so it's probably something fundamental/obvious that I'm missing... Any help very much appreciated. Mike.
a few things:
your script tag is incorrect, need to be fixed
you most likely need the bootstrap.css
you need to add bootstrap-dialog.js
function confirm() {
BootstrapDialog.confirm('Are you sure you want to do this?');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<input type="button" value="confirm" onclick="confirm()" />
Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here
I am new to JQuery Mobile and Javascript in general, so I am trying to learn it by doing a project. I am using JQuery mobile to design a web app and I require a few text inputs. In the JQuery documentation, there are text input examples that have a blue halo when they are clicked, and when the mouse moves away, the blue halo vanishes as well. I copied the provided code, but my text box does not have the same effect. I then tried inspecting the elements in the documentation and I realized that when the text box was clicked, the text input element gained an attribute called "ui-focus". How is this done?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" />
</head>
<body style class="ui-mobile-viewport ui-overlay-a">
<div role="main" class="ui-content">
<label for="basic">Email:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
<label for="basic">Password:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
</div>
</body>
You have copied rendered HTML code. JQM wraps input with a div to give it a new look. You don't have to add any extra code, only input tag, JQM will take care of the rest.
<input type="text" />
I'm having a little difficulty programming the DateTextBox widget to operate with a month and year only input, and to put a mm/yy format in the DateTextBox. Can anyone help me tidy this up?
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<div id="dt_text" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="popupClass: 'dojox/widget/MonthAndYearlyCalendar'">
</div>
This DateTextBox JSFiddle shows my weak efforts so far. Alternative methods of getting a mm/yy textbox input without using these widgets are equally welcome.
Just to clarify, if you're going an alternative route, the important bit is a good mm/yy popup which I can use to inject the selected date into the textbox. I'm familiar with different types of text box djits, but not with date selector popups.
I'm using Dojo 1.8 and cannot upgrade so please make your answers compatible with this version
I have prepared two modules with screenshot to you which they both match your requirement.
Quickly changing year
Easy to select month and year
skip to select day
Modules:
DateTextBox with MonthAndYearlyCalendar View
MonthTextBox
<link rel="stylesheet" href="scripts/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="scripts/dojo/dojox/widget/Calendar/Calendar.css">
<script>
dojo.require("dojox.widget.MonthAndYearlyCalendar");
</script>
<body class="claro">
<input type="text" name="monthNyear" value="11/2013" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="constraints:{datePattern: 'MM/yyyy'}, popupClass:'dojox.widget.MonthAndYearlyCalendar'" />
<input type="text" name="monthOnly" value="11" data-dojo-type="dojox/form/MonthTextBox" />
</body>
I suggest use ValidationTextbox, it is more earlier to use and meet your requirement too.
Here is the reference link and sample code you could copy and paste(tested in 1.8.3)
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<input type="text" name="monthNyear" id="monthNyear" value="12/99" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{2}\/\\d{2}', invalidMessage:'Invalid mm/yy'" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<input type="text" name="skippedDay" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="constraints:{datePattern:'yyyy-MM'}" value="2013-12" />
PS: you can change the yyyy-MM to MM-yyyy to match your format.
But I tried that, the default value will be ignore. (in version 1.8.3).
PS2: users still needed select the day in popup calendar, but the textbox will not show and submit the day.