I´m trying to make this code work but I don´t know how to do it... When I click on Outro the upper div closes, and when I click Outra in the down one the upper close.
I don´t know what I´m doing wrong because the function has different values and if it´s only one it works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function() {
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>" /></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>
Related
How to call function with tr onblur event or how to detect any click-event outside tr border?
Thanks
Html:
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
Use jQuery.closest to see if the target element is inside a tr or a tr like this:
$(document).click(function(e) {
if($(e.target).closest("tr").length)
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
If you want to just check if the element clicked is a tr or not then use jQuery.is like this:
$(document).click(function(e) {
if($(e.target).is("tr"))
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
Example of the first case:
$(document).click(function(e) {
if ($(e.target).closest("tr").length) // if the length is != 0 (a tr is found)
alert("tr was clicked!");
else // otherwise ...
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
Example of the second case:
$(document).click(function(e) {
if ($(e.target).is("tr")) // if the target of the click is a tr
alert("tr was clicked!");
else // otherwise
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
You can bind the click events on the document itself, and check the event.target object, if parents of the event.target don't contain the tr, manually trigger the blur event on tr.
$.fn.bindBlur = function(callback){
this.each(function(){
var that = this;
$(document).on("click", function(e){
if(that.is($(e.target) || that.has($(e.target))){
return callback();
}
});
});
};
I have a form that has a checkbox for whether or not a textbox (call it "text1") should be shown. They are located on the same line, as well as a span indicating what they are for. There is another textbox ("text2") on a line above it that, if set to 0, hides text1 as well as its corresponding checkbox and span. This form is being designed for people that want to tab through it easily, like their current system. My problem is that when you set text2 to 0, it resets the cursor to the top of the page so that they have to tab through a lot of fields they have already done to get back to where they were. How do I stop this? Here's some example code:
HTML
<form>
<input type="text" id="text0" tabindex = 1/>
....
<table>
<tr>
<td>
<input type="text" id="text2" tabindex = 2/>
<input type="checkbox" id="check1" tabindex = 2/>
<span id="span1" tabindex = 2>Span Text</span>
<input type="text" id="text1" tabindex = 2/>
<input type="text" id="text3" tabindex = 2 readonly/>
</td>
<td>
<input type="text" id="text4" tabindex = 3/>
<input type="text" id="text5" tabindex = 3/>
</td>
</tr>
<tr>
<td>
<input type="text" id="text6" tabindex = 2/>
<input type="text" id="text7" tabindex = 2/>
</td>
<td>
<input type="text" id="text8" tabindex = 3/>
<input type="text" id="text9" tabindex = 3/>
</td>
<tr>
</table>
</form>
CSS:
#text1 {
visibility:hidden;
}
JS:
$("#text2").change(function() {
if ($(this).val() == 0) {
$('#check1').css("visibility", "hidden");
$('#span1').css("visibility", "hidden");
$('#text1').css("visibility", "hidden");
}
else {
$('#check1').css("visibility", "visible");
$('#span1').css("visibility", "visible");
$('#text1').css("visibility", "visible");
}
});
I don't see any cursor issue, but I fixed your jQuery and html code. Run this snippet:
$("#text2").on('keyup',function(){
if ($(this).val() == '0') {
$('#check1').css("visibility", "hidden");
$('#span1').css("visibility", "hidden");
$('#text3').attr('tabindex', '2');
$('#text4').attr('tabindex', '3');
} else {
$('#check1').css("visibility", "visible");
$('#span1').css("visibility", "visible");
$('#text1').css("visibility", "visible");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="textbox" id="text2" placeholder="text 2" tabindex = 1/>
<input type="checkbox" id="check1" tabindex = 2/>
<span id="span1">Span Text</span>
<input type="textbox" id="text3" tabindex= 3/ placeholder="text 3">
<input type="textbox" placeholder="text 4" id="text4" tabindex= 4/>
</form>
I'm trying to code that only ONE button can be selected per ROW. I tried too many this and this is the closest I did it.
I can selected and deselect it. But only one per row can be selected.
What my code does:
I can select any button and it will be added a class to it get red.
so now this button is selected. I can unselect it as well.
This is my code:
$('.btn').click(function(){
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
}else {
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
<style>
.selected {
color:red;
}
</style>
Some print to help:
You can do it like following. Just find the others .btn and remove .selected from them and set data-selected to false when you are selecting a .btn. Hope this will help you.
$('.btn').click(function () {
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
} else {
$(this).closest('tr').find('.btn').not(this)
.removeClass('selected').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn"/></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn" /></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
</table>
Why not just make radio buttons that looks like buttons, if you give them the same name they will already have the functionality you are looking for built in.
http://jsfiddle.net/DIRTY_SMITH/YB8UW/616/
<ul class="donate-now">
<li>
<input type="radio" id="a25" name="amount" />
<label for="a25">$25</label>
</li>
<li>
<input type="radio" id="a50" name="amount" />
<label for="a50">$50</label>
</li>
<li>
<input type="radio" id="a75" name="amount" checked="checked" />
<label for="a75">$75</label>
</li>
<li>
<input type="radio" id="a100" name="amount" />
<label for="a100">$100</label>
</li>
</ul>
<br>
<ul class="donate-now">
<li>
<input type="radio" id="b25" name="amountb" />
<label for="b25">$25</label>
</li>
<li>
<input type="radio" id="b50" name="amountb" />
<label for="b50">$50</label>
</li>
<li>
<input type="radio" id="b75" name="amountb" checked="checked" />
<label for="b75">$75</label>
</li>
<li>
<input type="radio" id="b100" name="amountb" />
<label for="b100">$100</label>
</li>
</ul>
I made a working example for you which can be used for multiple rows: https://jsfiddle.net/448feo3j/
$('.button-default').click(function() {
$(this).parents('tr').find('.button-default').removeClass('button-clicked').attr('data-selected', false);
$(this).addClass('button-clicked').attr('data-selected', true);
});
below is the code to check a default value for the radiobutton tag by giving checked="checked", but i am not able to display the related form by default, it can be displayed only when i click on it, how to display anyone of these forms by default ?
HTML:
<form>
<label><input value="1" type="radio" name="formselector" checked="checked" onclick="displayForm(this)">Old Definitions</label>
<label><input value="2" type="radio" name="formselector" onclick="displayForm(this)">New Definition</label>
</form>
<panel method="post" style="visibility:hidden" id="form1" name="form1">
<table style="width:100%;">
<tr>
<th ><span class="dropt">ID Reserve Tracks</th>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" >
</td>
</tr>
</table>
</panel>
<panel style="visibility:hidden" id="form2">
<table style="width:100%;">
<th ><span class="dropt">MD Reserve Tracks</th>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" >
</td>
</table>
</panel>
JavaScript:
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='collapse';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='collapse';
document.getElementById("form2").style.visibility='visible';
}
else{
}
}
jsfiddle: http://jsfiddle.net/uLkHk/
Your Html is not well formed, you should improve that.
To make it work as you want, just do not set the option checked in HTML. Then select it in JavaScript, calling the Click method.
See this, I modified a little your HTML, and it works.
<html>
<body>
<form>
<label>
<input value="1" type="radio" id="radioOld" name="formselector" onclick="displayForm(this)" />Old
Definitions</label>
<label>
<input value="2" type="radio" id="radioNew" name="formselector" onclick="displayForm(this)" />New
Definition</label>
</form>
<form method="post" style="visibility: hidden" id="form1" name="form1">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">ID Reserve Tracks</span>
</td>
<td>
<input id="idtracks" autocomplete="off" name="idtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<form style="visibility: hidden" id="form2">
<table style="width: 100%;">
<tr>
<td>
<span class="dropt">MD Reserve Tracks</span>
</td>
<td>
<input id="mdtracks" autocomplete="off" name="mdtracks" type="text" maxlength="50" />
</td>
</tr>
</table>
</form>
<script>
function displayForm(c) {
if (c.value == "1") {
document.getElementById("form1").style.visibility = 'visible';
document.getElementById("form2").style.visibility = 'collapse';
}
else if (c.value == "2") {
document.getElementById("form1").style.visibility = 'collapse';
document.getElementById("form2").style.visibility = 'visible';
}
else {
}
}
</script>
<script>
document.getElementById('radioOld').click();
//document.getElementById('radioOld').checked = true;
//var theDefaultOption = document.getElementById('formselector');
//displayForm(theDefaultOption);
</script>
</body>
</html>
Or you can simply set the default panel's visibility to visible in the HTML as Barmar said.
I am trying to create a checklist that allows users to add their own items.
This is part of my HTML:
<tr>
<td>
<input name="checkbox65" id="checkbox65" type="checkbox" />
</td>
<td>
<label for="checkbox65">Get directions for where you are going</label>
</td>
</tr>
<h3>
My items
</h3>
<fieldset data-role="controlgroup">
<label for="textinput4">Add new item</label>
</td>
<input name="new_item" id="textinput4" placeholder="" value="" type="text"
/>
</fieldset>
<input type="submit" id="add" value="Add" />
And this is my script:
<script>
$('#add').on('click', function (e) {
var $this = $(this);
var $newRow = $this.closest('table').find('tr:first').clone();
$newRow.find(':input').val('');
$newRow.insertAfter($this.parent());
});
</script>
But I just do not get any response..
Is this what you need ?
HTML
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
Get directions for where you are going
</label>
</td>
</tr>
<tr><td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
</td></tr>
</table>
Notice I've changed id="checkbox65" to class="checkbox65" because you can't use same id twice. Also changed input type=submit to <button> for adding new elements.
JS
$('#add').on('click', function (e) {
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
$newRow.find(':input').prop('checked', false);
$newRow.insertAfter($firstRow);
});
DEMO.
Update: Or maybe this one or this one.