I am using one search box.How to clear value of this text box By button click.
$(document).ready(function(){
$(".searchClear").click(function(){
//document.getElementById("searchGo").value="";
$('#searchGo').removeAttr('value');
});
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>
Try this
$(document).ready(function(){
$(".searchClear").click(function(){
$('#searchroleName').val('');
});
Empty the value rather than removing the element attribute, Also your brackets are not closed properly.
Also the selector of an input is wrong.
Try following code
$(document).ready(function() {
$(".searchClear").click(function() {
//document.getElementById("searchGo").value="";
$('#searchroleName').val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input class="col-lg-3" type="text" name="searchroleName" id="searchroleName">
<button class="btn searchGo" id="searchGo">Go</button>
<button type="reset" class="btn searchClear">Clear</button>
Related
Using jquerymobile 1.4.5
I have a series of radio buttons
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Condition (handles etc.):</legend>
<input name="radio-choice-h-28" id="radio-choice-h-28a" value="1" type="radio">
<label for="radio-choice-h-28a">Satisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28b" value="2" type="radio">
<label for="radio-choice-h-28b">Unsatisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28c" value="0" type="radio">
<label for="radio-choice-h-28c">Not Applicable</label>
</fieldset>
and two buttons
<form>
<input id="set" data-inline="true" value="Save" type="button">
<input id="reset" data-inline="true" value="Reset" type="button">
</form>
The events are attached in the document ready area
<script type="text/javascript">
$(document).ready(function () {
$("#set").click(function() {
$('#radio-choice-h-28a').attr("checked", true).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
$('#radio-choice-h-28a').checkboxradio("refresh");
});
$("#reset").click(function () {
$("input[type='radio']").attr("checked", false).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
});
});
</script>
I can set the value of the radio the first time through, and reset all the radio buttons the first time through.
When i click the set button the second time, nothing happens.
the second click of the reset also does not fire after the first click.
firebug does not show any error messages, but the breakpoint is hit each time the buttons are clicked (both set and reset)
What am i missing?
Found it....
I changed the attr to prop and now it works...
$("#radio-choice-h-28a").prop("checked", true).checkboxradio("refresh");
try using
$(document).on('click', "#set", function(){
});
Instead of
$("#set").click(function() { });
In the following code sample is there a 'Angular way' of preventing the default event of a button click or form submit. Currently I'm using 'onsubmit' to accomplish the task.
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>
Change your html to use $event like this (ctrl removed because controllers have been removed from Angular.dart):
<form onsubmit="return false;">
<input ng-model="task">
<button class="btn btn-primary" ng-click="addTask($event)">Add</button>
</form>
And in your component class:
void addTask(MouseEvent evt){
evt.preventDefault();
}
<form onsubmit="return false;">
<input ng-model="ctrl.task">
<button class="btn btn-primary" ng-click="ctrl.addTask($event)">Add</button>
</form>
In the controller:
$scope.ctrl = function() {
addTask: function(event) {
event.preventDefault();
}
}
I can't seem to show a datepicker from jQuery UI on a hidden field as I get this error:
Uncaught TypeError: Cannot read property 'left' of undefined
When I use a regular text field, I don't seem to have a problem. I get this error with both jQuery UI 1.9.0 and 1.9.2, the version of jQuery is 1.8.3
html
<table>
<tr>
<td>
<small class="date_target">until <span>Dec. 31, 2013</span></small>
<input type="hidden" class="end_date" />
</td>
</tr>
</table>
JS
$(".end_date").datepicker({
dateFormat: 'yyyy-mm-yy',
yearRange: '-00:+01'
});
$('.date_target').click(function () {
$(this).next().datepicker('show');
});
I provided a (not) working example on this jsfiddle too
It's because the input field is not visible to the browser (because it's hidden).
Try this:
<input type="text" style="height: 0px; width:0px; border: 0px;" class="end_date" />
and you are fine. Of course, you can add the extra style attributes to the CSS class "end_date". A "display:none" will not help, because then the field is fully invisible again.
Example also in a JS Fiddle.
Let's check datepicker _findPos function
$.datepicker._findPos = function (obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
/*because position of invisible element is null, js will break on next line*/
return [position.left, position.top];
};
If target obj of datepicker is invisible, it will use the closest sibling position which is not invisible
There are several solutions：
Solution 1
Because of LTR, you can exchange position of two element
<tr>
<td>
<input type="hidden" class="end_date" />
<small class="date_target">until <span>Dec. 31, 2013</span></small>
</td>
</tr>
Solution 2
Add an visible element next to the hidden element, so datepicker will find the visible element position
<tr>
<td>
<small class="date_target">until <span>Dec. 31, 2013</span></small>
<input type="hidden" class="end_date" /><span> </span>
</td>
</tr>
Solution 3
Redefine _findPos function, so you can set position of calendar wherever you want
$.datepicker._findPos = function (obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
// if element type isn't hidden, use show and hide to find offset
if (!position) { position = $(obj).show().offset(); $(obj).hide();}
// or set position manually
if (!position) position = {left: 999, top:999};
return [position.left, position.top];
};
I had the same problem while using Bootstrap as well, cause I needed my datepicker to show with a button click.
This works:
<div class="form-group">
<label class="sr-only" for="txtDate">Date</label>
<input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
<button type="button" class="btn btn-default btn-sm" id="btnDate">
<span class="glyphicon glyphicon-calendar"></span> Calendar
</button>
</div>
This doesn't work:
<div class="form-group">
<label class="sr-only" for="txtDate">Date</label>
<input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
</div>
<button type="button" class="btn btn-default btn-sm" id="btnDate">
<span class="glyphicon glyphicon-calendar"></span> Calendar
</button>
JS:
$('#txtDate').datepicker({
dateFormat: 'yy-mm-dd',
showAnim: 'fade'
});
$("#btnDate").on('click', function(){
$('#txtDate').datepicker('show');
});
So all I needed was to put the button on the same div element. In case anyone else has this problem.
I am using a simple html button to submit the data.I am using codeigniter framework.The following code is my button for cacel the page and go back to the previous page.
<input type="button" value="Cancel" onclick="" class="cancel_button">
When I click the cancel button it should go to the following url
http://localhost/sample/categorycontroller/index
Please let me know,how to pass the url through the button.?
Thanks in advance
Try this:
<input type="button" value="Cancel" onclick="window.location = 'http://localhost/sample/categorycontroller/index'" class="cancel_button">
Please user this :
<input type="button" value="Cancel" onclick="window.location.href = 'http://localhost/sample/categorycontroller/index'" class="cancel_button">
<input type="button" value="Cancel" onclick="goBack()" class="cancel_button">
Then create a Javascript function called goBack()
<script type="text/javascript">
function goBack() {
window.location = 'http://localhost/sample/categorycontroller/index';
}
</script>
I have a button like this
<input type="button" id="btnEdit" value="Edit Selected" class="emrBTN" style="top:5;right:95;width:100; visibility:hidden" />
I want to change the visibility to visible using jquery onclick ob a button event. How can I do that.
Thanks
jQuery('#btnEdit').css('visibility', 'visible');
It is very near the top of the CSS section of the documentation.
Solution here: http://jsfiddle.net/hY3eg/
HTML:
<input type="button" value="Make Visible" id="makeVisible"/>
<input type="button" id="btnEdit" value="Edit Selected" class="emrBTN" style="top:5;right:95;width:100; visibility:hidden" />
JS:
$(function() {
$("#makeVisible").click(function() {
$("#btnEdit").css("visibility", "visible");
});
});