I want to display and hide a table using a checkbox. The table appears and disappears with no problem . But the checkbox is not getting checked . I have Jquery v1.8.2 . i have the following code :
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#checkbox').toggle(function() {
document.getElementById('table').style.display = "inline";
}, function() {
document.getElementById('table').style.display = "none";
});
</script>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="checkbox" id="checkbox">
<br />
<table id="table" style="display: none;">
<tr>
<td>
<input type="file" name="file">
<input type="submit" name="upload" value="upload">
</td>
</tr>
</table>
</form>
</body>
</html>
Try this way -
$('#checkbox').change(function () {
if ($(this).is(":checked")) {
$('#table').show();
} else {
$('#table').hide();
}
});
Working demo --> http://jsfiddle.net/pmNAe/
Try
$('#checkbox').click(function () {
if (this.checked) {
$('#table').show();
} else {
$('#table').hide();
}
});
Demo: Fiddle
You can Try like
$('#checkbox').click(
var my_dis = document.getElementById('table').style.display;
if(my_dis == 'inline')
document.getElementById('table').style.display = "none";
else //if(my_dis == 'none')
document.getElementById('table').style.display = "inline";
);
Check the solution in this fiddle:
JSFiddle
$('#checkbox').change(function(){
var $this = $(this);
var $table = $("#table");
if($this.is(":checked"))
$table.show();
else
$table.hide();
});
Try this JSFIDDLE
Note: You can use change instead of click but but change get fired only after blur in firefox.
$(function(){
$('#checkbox').click(function (){
if(this.checked){
$("#table").show();
}else{
$("#table").hide();
}
});
});
Related
I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>game</title>
<style>
</style>
</head>
<body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/*var input;
var room;
function submitFunction() {
alert("hello")
}
*/
</script>
<script type="text/javascript">
var input;
var room;
room = "Main Enterence"
$(document).ready(function () {
$("#mainForm").submit(function() {
input = document.getElementById("textInput").value;
if (input == "east") {
if (room == "Main Enterence") {
room = "Bedroom"
enterBedroom();
}
}
if (input == "west") {
}
if (input == "north") {
}
if (input == "south") {
}
})
})
function enterBedroom() {
$( "#consoleOutput" ).append( "<p>Test</p>" );
}
</script>
<div id="consoleOutput">
<p id="welcomeText"></p>
</div>
<form onsubmit="submitFunction()" id="mainForm">
<input type="text" id="textInput">
<input type="submit" name="sumbit">
</form>
</body>
</html>
Hi,
I am trying to make a text-based HTML game. My .append method from jQuery is not working. When I .append() a paragraph tag to a it displays for a split second and goes away. Please help
This happens, because the page is refreshed - you submit form. You have to add first parametr to submit event and use preventDefault() function on it
$("#mainForm").submit(function(event) {
event.preventDefault();
});
Error:
There are two functions invoked during submit of the form...
When you need page not to refresh then don't use submit without preventing the default event...
Solution:
var input;
var room;
room = "Main Enterence";
$("#mainForm").click(function() {
input = document.getElementById("textInput").value;
if (input == "east") {
if (room == "Main Enterence") {
room = "Bedroom"
$("#consoleOutput").append( "<p>Test</p>" );
}
}
if (input == "west") {
}
if (input == "north") {
}
if (input == "south") {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="consoleOutput">
<p id="welcomeText"></p>
</div>
<form id="mainForm">
<input type="text" id="textInput">
<input type="button" value="submit" name="submit">
</form>
It clears because you are using submit which will cause the page to reload/refresh. Change that to click
your html button:
<input type="button" name="sumbit" id="submit" value="submit">
your js:
$(document).ready(function () {
$("#submit").click(function() {
.
.
.
Below is my code. But I am not getting an output.
$(document).ready(function () {
$('#txtOpenQty').keyup(function (e) {
var txtVal = $(this).val();
$('#txtCloseQuantity').val(txtVal);
});
$('#txtCloseQuantity').keyup(function (e) {
var txtVal = $(this).val();
$('#txtOpenQty').val(txtVal);
});
});
This should work for you.
<input type="text" id="one" />
<input type="text" id="two" />
$('#one').keyup(function(e) {
var txtVal = $(this).val();
$('#two').attr("value", txtVal);
});
Check here for example.
update:
<input type="text" id="one" />
<input type="text" id="two" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('#one').keyup(function(e) {
var txtVal = $(this).val();
$('#two').val(txtVal);
});
</script>
try this one
<textarea id="o"></textarea>
<textarea id="t"></textarea>
<script>
$(document).ready(function(){
console.log('jquery in');
$('#o').keyup(function(e){
console.log($(this).val());
$('#t').val($(this).val());
});
});
</script>
<input width="5" size="5/" col="5" value="23232" id="txtOpenQty">
<input width="5" size="5/" col="5" value="2323" id="txtCloseQuantity">
And in JS O copied your code as it is.
<script>
$(document).ready(function (){
$('#txtOpenQty').keyup(function (e) {
var txtVal = $(this).val();
$('#txtCloseQuantity').val(txtVal);
});
$('#txtCloseQuantity').keyup(function (e) {
var txtVal = $(this).val();
$('#txtOpenQty').val(txtVal);
});
});
</script>
I tried the same example its working fine for me, can you please explain in more details,
where are you writing this code, or what is HTML you are using?
I would like to show and hide a text based on the length of the text in textbox. i have tried the following code. But its not working. Help me out.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
if(x.length<1)
document.getElementById("lname").style.visibility = 'visible';
else
document.getElementById("lname").style.visibility = 'hidden';
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<div id="lname" style="visibility:hidden">hey im printing</div>
</body>
</html>
You should check the input value length:
var x=document.getElementById("fname");
if(x.value.length<1)
Use this
var x=document.getElementById("fname").value;
while assigning value to var x.
Try this
function myFunction()
{
var x=document.getElementById("fname").value;
if(x.length>=1)
{
document.getElementById("lname").style.visibility="visible";
}
else
document.getElementById("lname").style.visibility = 'hidden';
}
DEMO
Try this.
<input type="text" id="fname" onkeyup="myFunction()">
<div id="lname" style="visibility:hidden">hey im printing</div>
function myFunction()
{
var x=document.getElementById("fname");
if(x.value.length>0){
document.getElementById("lname").style.visibility = 'visible';
}else{
document.getElementById("lname").style.visibility = 'hidden';
}
}
Working DEMO
Check this out using jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
function myFunction()
{
// var x=document.getElementById("fname").val();
var x=$("#fname").val();
alert(x.length)
if(x.length < 1) {
alert('if');
$("#lname").css("display", "block");
}
//document.getElementById("lname").style.visibility = 'visible';
else {
$("#lname").css("display", "none");
}
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<div id="lname" style="display:none">hey im printing</div>
</body>
</html>
My issue: When I add another text input, I cannot show/hide it.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
$(".slidingDiv1").hide();
$(".show_hide1").show();
$('.show_hide1').click(function(){
$(".slidingDiv1").slideToggle();
});
});
var counter = 1;
var limit = 3;
function addInput(divName){
mainCanvasDiv = document.createElement("div");
mainCanvasDiv.className = "slidingDiv1";
mainCanvasDiv.style.display = "none";
var newdiv = document.createElement('div');
newdiv.id = "dynamicInput" + counter;
newdiv.innerHTML = "<a href='#' class='show_hide1'>Show/hide</a>";
mainCanvasDiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='dynamicInput" + counter +"1'><br><input type='text' name='dynamicInput" + counter +"2'>";
document.getElementById(divName).appendChild(newdiv).appendChild(mainCanvasDiv);
counter++;
}
$(document).ready(function(){
$('#sortable').sortable({
update: function(event, ui) {
var newOrder = $(this).sortable('toArray').toString();
document.getElementById('sort').value = newOrder;
}
});
});
</script>
</head>
<body>
<form action="lost.php" method="POST">
<div id="sortable">
<div id="dynamicInput">
Show/hide
<div class="slidingDiv">
<input type="text" name="myInputs[]">
</div>
</div>
</div>
<input type="button" value="Add another text input" onClick="addInput('sortable');"><br />
<input type="hidden" name="sort" id="sort" value="">
<input type=submit value="GO!">
</form>
</body>
</html>
Any advice?
Update:
I have changed
$('.show_hide1').click(function(){
to
$('.show_hide1').on("click", "div a.show_hide1", function(){
Maybe I am doing something wrong, I am not strong in JS.
Fixed: http://jsfiddle.net/Yhp3c/
You need to use live instead of click as live also targets future (read: DOM scripted) elements.
Edit: As stated in comments: Use on instead of live.
Replace your click events for:
$("#sortable").on("click","div a.show_hide", function() {
$(".slidingDiv").slideToggle();
});
$("#sortable").on("click","div a.show_hide1", function() {
$(".slidingDiv1").slideToggle();
});
I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>
Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>
there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked
Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});
I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});