I have a form in which I'm hiding and showing fields according to the dropdown selection. Initially, when the button is clicked, only the dropdown selection option is shown and the rest of the fields are hidden. Once the form is saved, the user can add another form. So when I click the button for the second time, the .hide()/.show() doesn't work. Instead the entire form is displayed. Here is my code:
$(document).ready(function () {
$("#button").click(function () {
alert("handler called");
$("#name").hide();
$("#selection").on('change', function () {
alert("handler called1");
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
My HTML is:
<div id = "days">
<table>
<tbody>
<tr>
<td>
<div class="selection" id="selection">
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td><select class="selection"></select></td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The
alert("Handler called");
is fired the second time but the .hide() doesnt work.
It truly is hard to understand your end result, but after analyzing what you are doing more, i think this is what you want:
HTML:
<select id="days_dropdown">
<option value='0'>select one</option>
<option value='night'>night</option>
<option value='day'>day</option>
<option value='afternoon'>afternoon</option>
</select>
<form id="myForm" style="display:none">
<label>Name</label>
<input type="text">
<button type="submit">Save</button>
</form>
JS:
$(document).ready(function() {
$("#days_dropdown").change(function() {
if ($(this).val() === "day") {
$("#myForm").show();
} else {
$("#myForm").hide();
}
});
$("#myForm").submit(function() {
//..your code to save the form info
$(this).hide();
$("#days_dropdown").val(0);
return false;
});
});
Let me know if this is the desired result, and ill explain in more detail your mistakes.
On
$("#selection").on('change', function () {
you select your div with id "selection", not the selection tag. And also you should get value of selected option, not the value of "select" tag
Need to modified some in JS code for proper work:
$(document).ready(function () {
$("#button").click(function () {
$("#name").hide();
$("select.selection").on('change', function () {
var sel = this;
if (sel.options[sel.selectedIndex].value == "day") {
$("#name").show();
}
});
});
});
Here is a FIDDLE
Its hard to understand specifically what you are going for, but is this what you are trying to do?
HTML
<button id='btn'>Click Me</button>
<div id="days">
<table>
<tbody>
<tr>
<td>
<div>
<table>
<tbody>
<tr>
<td><label>selection</label></td>
</tr>
<tr>
<td>
<select id="selection">
<option value='something'>1</option>
<option value='day'>2</option>
<option value='something'>3</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="name" id="name">
<table>
<tbody>
<tr>
<td><label>Name</label></td>
<td><input type="text"</input></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS:
$(document).ready(function() {
$("#btn").click(function() {
$("#name").hide();
$("#selection").on('change', function() {
if ($("#selection").val() == "day") {
$("#name").show();
}
});
});
});
The problem I initially saw was your .on('change') , you were trying to attach this to a div, but you want to attach it to the select element
Related
I need to perform validation on TextArea based on below scenario:
If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
If Email is selected in the dropdown, we can enter any character in the TextArea.
image snippet here
Below is my code to achieve above scenario. I have performed validation based on class name of Text Area. When I change dropdown value, I am changing the class name of Text Area.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeNotifyTypeValue(textboxControl)
{
textboxControl.value="";
if (textboxControl.className=="mobileValidation")
textboxControl.className="emailValidation";
else
textboxControl.className="mobileValidation";
}
$(function() {
$('.numberValidation').keyup(function() {
this.value = this.value.replace(/[^0-9,][.]?/g, '');
});
$('.emailValidation').keyup(function() {
//email validation
});
});
</script>
</head>
<body>
<table border="1" class="display"
id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select
id="notifyTypeID0"
class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0"
class="emailValidation">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my doubt
I can see through inspect element, when I change dropdown value, the class name of text Area is being changed on run time. But, still validation is being perform based on old class name of text Area.
There are some issue with your <script>, you are trying to use pure javascript in jquery.
Once try this script and check
$(document).ready(function(){
$('textarea').keyup(function(){
if($(this).hasClass("mobileValidation")){
var cv = $(this).val();
$(this).val(cv.replace(/[^0-9,][.]?/g, ''));
} else if($(this).hasClass("emailValidation")){
//your email validation code;
}
});
});
The code is messed up with both javascript and jQuery. I'm providing javascript only solution. And classes are also mismatching (mobileValidation and numberValidation).
Here is the running code. You can run code snippet and check.
<html>
<head>
<script>
function changeNotifyTypeValue(textboxControl) {
textboxControl.value = '';
if (textboxControl.className == "mobileValidation")
textboxControl.className = "emailValidation";
else
textboxControl.className = "mobileValidation";
}
function validate(textboxControl) {
console.log(textboxControl.className);
if (textboxControl.className == "emailValidation") {
console.log('email');
} else {
console.log('number');
textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
}
}
</script>
</head>
<body>
<table border="1" class="display" id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you
You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').
Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>
Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}
Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});
I have a table as follows:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Remove">Remove</a>
</td>
</tr>
</table>
And I have a hyperlink:
<a class="Clone">Add</a>
What I need to do is to add the <tr class="Sample"> into the table each time I click on the
<a class="Clone">
and remove a row when I click on the <a class="Remove"> corresponding to that row.
I tried as follows :
<script>
$(document).ready(function(){
$('.Clone').click(function(){
$('#shipping').append('.Sample');
});
});
</script>
But on clicking the hyperlink the text ".sample" gets written into the table. How can I do it ?
Try:
$('a.Clone').click(function () {
$('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
$(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td> <a class="Remove">Remove</a>
</td>
</tr>
</table> <a class="Clone">Add</a>
The first part clones the input and appends it to the table. The second part handles removing the rows (leaving the top row).
When add button is clicked call this function:
function myAddFunction(){
var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
$('#shipping').append(html);
}
When remove button is clicked call this function:
function myRemoveFuncion(){
$(this).closest('tr').remove();
}
Hopre it helps.
I've just wrote a script for you
$( document ).ready(function() {
$(".Remove").on("click", function() {
$(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});
});
try this fiddle
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#shipping').on('click', 'a.Clone', function(e){
e.preventDefault();
$('table#shipping').append( $(this).closest('tr').clone() );
});
$('#shipping').on('click', 'a.Remove', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
</script>
HTML:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Clone" href="#">Clone</a>
<a class="Remove" href="#">Remove</a>
</td>
</tr>
</table>
I have this:
<table>
<tr id="firstaut">
<td>Author:</td>
<td>
<input class="auts" name="name" />
</td>
<td>
<button class="aut_button" type="button">delete</button>
</td>
</tr>
<tr>
<td colspan="2">
<a onclick="addmore()"> + add more name</a>
</td>
</tr>
</table>
$(function(){
$('.aut_button').on('click',function(){
alert('test');
});
});
function addmore(){
$("<tr id='firstaut'><td>Author:</td><td><input class='auts' name='name'/></td><td><button class='aut_button' type='button'>delete</button></td></tr>")
.insertAfter('#firstaut').delegate('.aut_button');
}
If i click on newly added delete button, it is not alerting. what am i doing wrong?
Try using on with the other overload,
$(function(){
$('table').on('click', '.aut_button' ,function(){
alert('test');
});
});
Please read here to know more about event delegation.
I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.
Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.