I´m trying to make a text input appear when I click on the "outra", that means "other" option on the checkbox...
I want it to appear just when i click that and then it will register that thing on the database.
Does anyone know how to help me?
Code with the functions:
<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>
Are you using a framework or anything? You would want to add a function that checks if the checkbox is checked. Judging from your tags, I'll offer a JQuery suggestion.
The JQuery to accomplish that might look like:
$('#checkboxes-4').is(":checked")
And then you would conditionally show your text input. So maybe:
if ($('#checkboxes-4').is(":checked")) {
$('#id_of_textbox').hide();
} else {
$('#id_of_textbox').show();
}
Related
I have 2 checkboxes. I need one, not both, but at least 1 to be checked. It is not a multiple selection but zero is not accepted. If one is checked, this line will work jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click'); otherwise it should alert. The following makes it alerting all the time.
UPDATE
I am not using the submit button or I would have used the validate plugin. It is a normal button to go next in the wizard <button type="button" class="btnNext">Next step</button>
HTML
<div class="form-group">
<label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category">
Cultura
</label>
<label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category">
Scienze
</label>
<input type="hidden" name="usp-category-required" value="1">
</div>
JS
jQuery('.btnNext').on("click", function(){
if(jQuery(".tab-pane").is("#step1")) {
var isChecked = false;
$('input[type=checkbox]').on("change", function () {
isChecked = true;
});
if ( isChecked ) {
jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
} else {
alert( 'Please, check at least one checkbox!' );
}
}
});
With jQuery you can use is:
$('#form').on('submit', function(e) {
e.preventDefault();
if ($('input[name="hi"]').is(':checked')) {
console.log('checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" name="hi" value="hi">Hallo<br>
<input type="checkbox" name="gb" value="gb">Tschuss<br>
<input type="submit" value="Submit">
</form>
Adapted to your code:
$('.btnNext').click(function(e) {
e.preventDefault();
if ($('#usp-category-7').is(':checked') || $('#usp-category-8').is(':checked')) {
console.log('at least one is checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category">
Cultura
</label>
<label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
<input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category">
Scienze
</label>
<input type="hidden" name="usp-category-required" value="1">
<button class="btnNext">Next</button>
</div>
Thanks to a comment, I personally resolved it like this, making them radio buttons. But I will accept the other answer as it is correct.
jQuery('.btnNext').on("click", function(){
if(jQuery(".tab-pane").is("#step1")) {
if($('input[type=radio').is(':checked')) {
jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
} else {
alert( 'Please, check at least one checkbox!' );
}
}
});
I have a problem checking all the checkboxes and once they're checked, the button should be disabled. I'm new to JavaScript and it's really hard for me to understand how I can fix this. Anyone who would know how to fix this would be really a big help for my project.
Here's my code by the way:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.chk1').change(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
}
else {
var isChecked = false;
$('.chk1').each(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
isChecked = true;
}
});
if (!isChecked) {
$('#btnClick').attr('disabled', 'disabled');
}
}
})
});
</script>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
All | None
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
One
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Two
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Three
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
</body>
</html>
In my code when I check one or more checkboxes the button gets enabled and when there is no checked checkbox the button gets disabled.
Now my problem is when I click the All link, it should check all the checkboxes and enable the button and when I click the None it should uncheck the checkboxes and disable the button.
To check all and uncheck checkboxes use JQuery. Give all the checkboxes the same class, for example "chk1" and then call
$( ".chk1" ).prop ('checked', true);
You can then iterate all elements of the class and check if they are all checked
$( ".chk1" ).each(function() {
if ($(this).is(':checked'))
// do something
})
The shortest code to achieve your stated objective is as follows:
$(function() {
$('#show').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', true);
$('#btnClick').prop('disabled', false);
});
$('#hide').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', false);
$('#btnClick').prop('disabled', true);
});
});
In the following demo, you'll notice that your markup was cleaned to take care of the following:
Remove inline JavaScript which among other thing is a nightmare to maintain.
Remove duplicate IDs; IDs should be unique.
Remove repeated element attributes
$(function() {
$('#show').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', true);
$('#btnClick').prop('disabled', false);
});
$('#hide').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', false);
$('#btnClick').prop('disabled', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0">
<a id="show" href="#">All</a> | None
<tr>
<td>
<input type="checkbox" class="chk1" name="name" />
One
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Two
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Three
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
Try this , short and simple. (See snippet for HTML)
removed inline JS.
simplified and reduced the code.
JS
$('.chk1').change(function () {
if ($(".chk1:checked").length >= 1) {
$('#btnClick').removeAttr('disabled');
} else {
$('#btnClick').attr('disabled', 'disabled');
}
});
$('#show').click(function () {
$('.chk1').prop('checked', true);
$('.chk1').trigger('change')
});
$('#hide').click(function () {
$('.chk1').prop('checked', false);
$('.chk1').trigger('change')
});
$('.chk1').change(function () {
if ($(".chk1:checked").length >= 1) {
$('#btnClick').removeAttr('disabled');
} else {
$('#btnClick').attr('disabled', 'disabled');
}
});
$('#show').click(function () {
$('.chk1').prop('checked', true);
$('.chk1').trigger('change')
});
$('#hide').click(function () {
$('.chk1').prop('checked', false);
$('.chk1').trigger('change')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0"> All | None
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" name="name" />One</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Two</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Three</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Four</td>
</tr>
<button id="btnClick" disabled="disabled">Click me !!!</button>
</table>
Note :
1.Used trigger so that the button will be enabled / disabled based on click.
2.If value of href is # then above code works fine, if it has some other URL , then you have use events like #PeterKA mentoned in his answer.
This code will help for your query "once you've checked all the checkbox the button will be disabled"
$('.chk1').change(function () {
if ($('.chk1:checked').length == $('.chk1').length) {
$('#btnClick').prop('disabled',true);
}
else{
$('#btnClick').prop('disabled',false);
}
});
Hello and thanks in advance for any help
In my store page, I have a checkbox that is checked when user agrees with the terms. When he checks the checkbox, submit button is disabled (false). My problem is that this solution doesn't work on iPhone and other mobile devices.
Here's the code:
function terms() {
if (document.getElementById("cbTerms").checked)
document.getElementById("submit").disabled = false;
else
document.getElementById("submit").disabled = true;
}
function cbc() {
if (document.getElementById("cbc").checked)
document.getElementById("cbc") = ("הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה");
else
document.getElementById("cbc").value = ".";
}
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br>
<br>
<input type="checkbox-0" id="cbTerms" name="cbTerms" onclick="terms();" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר כי קראתי את התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" oninput="cbc()" style="width:15px; height:15px;">
<p style="margin-bottom:0px; font-size:14px; display: -webkit-inline-box;">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
At first sight your first checkbox is not really a checkbox.
<input type="checkbox-0" ...> should be more like: <input type="checkbox" ...>
With this change it will work.
P.S.:
Consider using braces for your if() {} else {} statements as you will propably run into some logic error if you change something in the future (e.g. add a line of code) and forget to add them.
The change event is preferred over click. And in addition, you'd pass the currently clicked checkbox on the fly as following
<input class="btn btn-toranj alt" name="submit" type="submit" id="submit" value="לרכישה" disabled="true">
<br><br>
<input type="checkbox" id="cbTerms" name="cbTerms" onchange="terms(this);" style="...">
<p style="...">הריני מאשר כי קראתי את
התקנון
</p>
<br>
<input type="checkbox" id="cbc" name="os3" onchange="cbc(this)" style="...">
<p style="...">הריני מאשר קבלת מבצעים והטבות אל דואר האלקטרוני</p>
<input type="hidden" value="הטבות ומבצעים" id="on3" name="on3">
<script type="text/javascript">
function terms(me)
{
document.getElementById("submit").disabled = !me.checked;
}
function cbc(me){
var val=document.getElementById("cbc").checked?
"הריני מאשר קבלת מבצעים והטבות אל הדואר האלקטרוני מפראיה":".";
document.getElementById("cbc").value = val;
}
</script>
I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.
Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});
Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});
From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.
I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!
If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/
Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO
There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/