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");
});
});
Related
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>
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 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 am working on a project and I'd like to use Jquery UI for some of the forms like adding and updating stuff instead of normal pages. I designed the dialog, set up the form but it works only if the form/div is in the same file as the button. I am using CodeIgniter for this project by the way.
So I have few questions:
Does JQuery UI dialogs support using divs from separate files? (if the button is not in the same file as the form/div)
If it does, how can I use a div that is in a different file (instead of placing the div in the same file with the button where I have few other components)?
Example:
index.php
<body>
<input type="button" id="add_new" value="add new" />
</body>
form.php
<body>
<div id='"new_user_form'>
<input type="text" id="name" />
<input type="text" id="username" />
<input type="password" id="password" />
<input type="button" id="add_user" value="add new" />
</div>
</body>
custom.js
$(document).ready(function ()
{
$('# add_new ').click (function ()
{
$("# new_user_form ").dialog
({
title: 'Add new user',
height: 400,
width: 600,
resizable: false,
modal: true,
draggable: false,
buttons:
[
{
text: 'add new',
id: ' add_user ',
click: function()
{
alert("Testing 123...");
}
},
{
text: 'cancel',
click: function()
{
$(this).dialog('close');
}
}
]
})
})
})
thanks for reading, hope someone can help me!
It is totally possible, but I noticed a few errors :
You wrote id='"new_user_form', it could make " part of the id.
Same for this selector $('# add_new ') and $("# new_user_form "), trim it.
You declare your .dialog() on a div that is probably not yet in the DOM, since you load it from form.php.
do not use body in a page you will append, or you might end up with two body tags.
You could load form.php with something similar to .load("form.php"), you will have to remove those body tags from form.php :
$("body").load("form.php",function()
{
$("#new_user_form").dialog(
{
// your options
});
});
Or you can also declare a dialog and replace its content when you need to, you will have to remove body and div from your form.php in order to use this code :
<div id='new_user_form' style='display:none;'></div> <!-- somewhere in your index.php -->
// when document ready is triggered
$("#new_user_form").dialog();
// when you need it :
$("#new_user_form").load("form.php",function(){$("#new_user_form").dialog("open")});
I don't know why the load() function didn't work but I found a better way to fix this problem.
How I did it:
users_view.php (previously index.php)
<body>
<input type="button" id="add_new" value="add new" />
<div id="new_user_form">
<?php $this->load->view('add_user_form'); ?>
</div>
</body>
add_user_form.php (previously form.php)
<div>
<input type="text" id="name" />
<input type="text" id="username" />
<input type="password" id="password" />
<input type="button" id="add_user" value="add new" />
<input type="button" id="cancel" value="cancel" />
</div>
custom.js
$(document).ready(function ()
{
$("#new_user_form").dialog
({
title: 'Add new userŅ',
height: 400,
width: 600,
resizable: false,
modal: true,
draggable: false,
autoOpen: false
})
$('#add_new').click (function ()
{
$("#new_user_form").dialog("open");
})
$('#cancel').click(function()
{
$("#new_user_form").dialog("close");
});
})
Thanks for the answers! I hope this will help other people :)