I have the following jQuery Function on a site:
$('#CAT_Custom_381715_0').click(function () {
$(".grow").fadeIn("slow");
});
What I am aiming for is when a checkbox is clicked it will then show other parts of the form.
The HTML code is below:
<tr>
<td><label>Have You Grown This Plant?</label><br />
<input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>
<tr class="grow"> <!-- FORM CODE --> </tr>
<tr class="grow"> <!-- FORM CODE --> </tr>
CSS for .grow
.grow{
display:none;
}
I assume has something to do with the table causing the issue. No errors are thrown. I originally had a div wrapping the code but Firefox would remove the div. Not sure if that was Firefox or my CMS.
The problem is the <tr> with the class of grow does not show when the checkbox is clicked.
How do I get jQuery to work properly.
I switched the click behavior to on and it is toggling. However, I also recommend you read this post and make sure to check to see if your checkbox is actually checked, and not just clicked on.
Setting "checked" for a checkbox with jQuery?
Here is the Codepen link: http://cdpn.io/jztKb
HTML
<table>
<tr>
<td><label>Have You Grown This Plant?</label><br />
<input type="checkbox" value="Yes" id="CAT_Custom_381715_0" />Yes</td>
</tr>
<tr class="grow"><td>Hi</td></tr>
<tr class="grow"><td>Hi</td></tr>
</table>
CSS
.grow {
display: none;
}
jQuery
$('#CAT_Custom_381715_0').on('click', function() {
$(".grow").fadeToggle("slow");
});
Related
I know we can find lots of similar questions on stackoverflow. I am using ReactJS.
<body>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 1</p>
<a></a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkbox1">
<p>Check 2</p>
<a></a>
</td>
</tr>
</tbody>
</table>
</body>
Here is an example of what I am using. there are above 35 checkboxes, and whenever I am clicking on any one of them the page is jumping to top.[![enter image description here][1]][1]
As I have tried on simple html page with 100 checkboxes, its working fine but in my React code. There is jump
Here is how I am handling change event:
<input type="checkbox" onChange={this.props.checkedList} name="article" value={item.id}/>
checkedList(e) {
let id = e.target.value
if (this.state.marked.includes(id)) {
let filteredArray = this.state.marked.filter(item => item !== id)
this.setState({marked: filteredArray});
}
else {
this.setState({marked: this.state.marked.concat(id)});
}
}
As you are calling setState in the event, it is causing the component to render which has the state marked. You should use the local variable in the component to handle the array marked or handle the shouldComponentUpdate. You can find details here to how to use it.
You might be able to use aria-label="test".
Example:
<input aria-label="test" id="test" type="checkbox" />
The aria-label attribute is used to define a string that labels the
current element. Use it in cases where a text label is not visible on
the screen. (If there is visible text labeling the element, use
aria-labelledby instead.)
Reference - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I'm working in a form where I have a table of data and a button to open a modal. I need to set this button to always be enabled; I tried using the code below but without success.
ko.applyBindings({
editarTexto: function(data) {
alert("msg")
},
items: [{}, {}, {}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<fieldset data-bind="disable: true">
<table class="table">
<thead>
<tr>
<th class="col-lg-1 ">Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button type="button" class="form-control" data-bind="click: function() { $root.editarTexto($data) }, disable: false">
<span class="glyphicon glyphicon-pencil" aria-hidden="true" data-bind="disable: false">×</span>
</button>
</td>
</tr>
</tbody>
</table>
</fieldset>
Could anyone help me?
You've obscured the actual issue in your title and proze around the code. The code itself however shows that your issue can be paraphrased as:
How to enable only certain buttons in a fieldset with the disabled attribute?
The repro can thus be much smaller:
<fieldset disabled>
<input> <!-- should be disabled -->
<button>x</button> <!-- should be ENabled, but isn't -->
</fieldset>
And the answer is: you can't. The only solution is to not disable the fieldset and set all descendant elements disabled except the buttons.
For reference, you can see from the enable/disable binding source file that it doesn't do anything besides setting the disabled attribute on the element in question.
For reference, see the MDN entry about fieldset disabled attribute:
If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., not editable. They won't receive any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.
For reference, see also the AngularJS version of your question.
According to the spec you can put your button inside the <legend>.
<fieldset disabled>
<legend>
Legend
<!-- This is ENABLED -->
<button onclick="console.log('click')">Enabled</button>
</legend>
<input> <!-- this is disabled -->
<button>disabled</button> <!-- this is disabled -->
</fieldset>
I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it
You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>
There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.
I have this form which I can't make submit.
<div class="enviar">
<form onClick="submitForm();" id="MessageSend" name="MessageSend" method="post" action="Send_Text_Msg.php">
<table width="100%">
<tr width="100%">
<td colspan="2"width="600px">
<textarea disabled="disabled" rows="4" name="MessageTextArea" id="MessageTextArea" style="resize: none;"></textarea>
</td>
<td>
<div class="button raised blue" style="cursor: pointer;">
<div class="center" fit>Enviar</div>
<paper-ripple fit ></paper-ripple>
</div>
</td>
<td><input type="submit" onclick="submitForm();"hidden id="IDConversa" name="IDConversa" value=""/></td>
</tr>
</table>
</form>
</div>
Since I'm using a < div > as a button I use this Javascript code to submit it
function submitForm()
{
alert("hue");
if(document.getElementById('MessageTextArea').value == "")
return false;
else
document.getElementById('MessageSend').submit();
}
And the weird part is that even the alert() isn't showing up. I was using a normal button before this material design one and It wasn't working either
EDIT:
I gave up on using form. I'll use AJAX instead. Thanks for the help
I tried it in jsfiddle. It seems you have script in bad order!!! If i modified your script as below it start work.
tutorial w3c
Put your validatation script into head or on body. In jsfiddle left side no wrap .. option
Add onsubmit no onclick into the form
<form id="MessageSend" name="MessageSend" method="post" onsubmit="return submitForm()" action="Send_Text_Msg.php">
and it working fine
DEMO JSFIDDLE
You can't write it like this:
</td>
<input hidden id="IDConversa" name="IDConversa" value=""/>
</tr>
Any html data in table should be in td's. Or put that hidden field outside table.
You should also avoid doing onclick on divs. Make an a tag, and put it there.
When I click on a radio button, if it's the last one in the list, it shows all of the hidden divs and doesn't close all open divs when I select another radio button. I know I'm close...but missing something.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().filter(":lt(" + this.value + ")").slideToggle("slow");
});
});
I thought I was taking care of it by having the "hide" at the beginning of the chain.
Html
<table cellpadding="0" cellspacing="0">
<tr>
<td width="25"><input type="radio" name="rNumber" value="1"></td>
<td width="25"><input type="radio" name="rNumber" value="2"></td>
<td width="25"><input type="radio" name="rNumber" value="3"></td>
</tr>
</table>
The divs are as follows:
<div id="grp1" class="groupNumber">Content Here</div>
<div id="grp2" class="groupNumber">Content Here</div>
<div id="grp3" class="groupNumber">Content Here</div>
What I want is the div for the corresponding radiobutton to be visible and to close any others that may be open.
That is because yo are using lt, you should use eq instead. try this.
using lt you are getting all the divs less that the index value to be shown so it is displaying that one and all previous ones. instead just use eq to get the div to be shown from the collection.
$(document).ready(function() {
$('input').on('change',function(){
$(".groupNumber").hide().eq((+this.value -1)).slideToggle("slow");//Probably Slide toggle probably doesn't make sense here as change event won't be triggered if you select the same option again.
});
});
Fiddle