onClick enable form - javascript

I have problem when i want show form edit
<!-- this is form-->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<% while(resultset.next()){ %>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td><%= no %></td>
<td><input id='f1' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(2)%>'></td>
<td><input id='f2' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(3)%>'></td>
<td><input id='f3'class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(4)%>'></td>
<td><input id='f4' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(5)%>'></td>
<td><input id='f5' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(6)%>'></td>
<td><input id='f6' class="form-control btn-no-border" type="text" disabled="disabled" value='<%= resultset.getString(7)%>'></td>
<td><a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"></td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</form>
</tbody>
<% no++; } %>
</table>
The form will enable when the glypicon edit click. Here is the
JAVASCRIPT :
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('#elementId').click(function(){
$('#f1').removeAttr("disabled");
$('#f2').removeAttr("disabled");
$('#f3').removeAttr("disabled");
$('#f4').removeAttr("disabled");
$('#f5').removeAttr("disabled");
$('#f6').removeAttr("disabled");
$('#f7').removeAttr("disabled");
});
</script>
when <a id='elementId' onclick="showDiv()"><span class='glyphicon glyphicon-pencil'></span></a> <input type='submit' id="welcomeDiv" style="display:none;"> click
for first row, work.
but for the second row like this

You are repeating the same id on one page. You must use only one id on a page. You can use the same class multiple times but not id.

Basically when you click on AAA then it is removing the class "aaa" from input field. You can check it with Firebug . It is not showing or popping up anything in it. But I have written a new code. It will enable and disable the input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
box.

A small example to do for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa"/></td>
<td><input type="text" class="aaa"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').removeClass('aaa');
});
</script>

In this way you are just referring to closest element of click.You can modified any content based on this. Please feel free to ask any query, if you face any problem in it. I just shared an example for execution for this.
This is applicable for any number of rows in a table.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th><th>Company Name</th><th>City</th><th>State</th><th>Zip</th><th>Branch</th><th>Address</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>
<form method='POST' action='EditCompany'>
<tr align='center'>
<td>1</td>
<td><input type="text" class="aaa" value ="kool" disabled="disabled"/></td>
<td><input type="text" class="aaa" value ="fool" disabled="disabled"/></td>
<td class="abc">AAA</td>
</tr>
</form>
</tbody>
</table>
<script type="text/javascript">
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
</script>
<script type="text/javascript">
$('.abc').click(function(){
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).closest('tr td:eq(2)').find('a:eq(0)').show();
$(this).closest('tr td:eq(2)').find('a:eq(1)').hide();
// Or YOu can use
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','block');
$(this).closest('tr td:eq(2)').find('a:eq(0)').css('display','none');
});
</script>
Please refer eq:(COlUMN of TR). It starts from zero so make adjustment accordingly. Hope you get complete answer of your query.

Add some class in tr.
<script type="text/javascript">
$('.abc').click(function(){
$('trClassName').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
});
</script>
Hope it will solve all your problems.

Only add class in tbody tr and also it should be with dot in jquery syntax.I have mentioned classname and it should also be with .TrClassName which you will mention in tr.

Related

Reveal fields if needed

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>
Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class
It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

extracting html table with filled in radio buttons

I have table which contains several radio buttons. After selecting a radio button and clicking a button, the html of the table (including the filled in radio button) should be stored in a variable. However, only the html table is stored in a variable (i.e. there is no checked property in the stored html code).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
<td><input type="radio"></td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>
<script>
function extract_table()
{
// store html table
var table = $('form').html();
alert(table);
}
</script>
</body>
</html>
You can reflect the checked or other applied properties, if you loop the items and set as attributes before getting html().
function extract_table() {
var table = $('form');
$('form :radio').each(function() {
$(this).attr('checked', this.checked);
})
alert(table.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
<table id="satisfaction_table">
<tr>
<th>Nr</th>
<th>Question</th>
<th>1 (Unacceptable)</th>
<th>2 (Poor)</th>
<th>3 (Average)</th>
<th>4 (Good)</th>
<th>5 (Excellent)</th>
</tr>
<tr>
<td>1</td>
<td>Did you call more than once before your call was answered?</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
<td>
<input type="radio">
</td>
</tr>
</table>
</form>
<button type="button" onClick="extract_table()">Extract</button>

Jquery serialize() method is returning null

I am using serialize() method in my JSP page. But its returning null. Dont know what I am doing wrong
Please help.
jQuery Code :
$(document).ready(function() {
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}
});
HTML Code :
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>Address :</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
<tr>
<input type="button" id="addBtn" />
</tr>
</table>
</form>
I posted relevant code only.
I think your javascript code is bad formatted, I tried this and it works fine...
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
There's an error in your javascript code. It should be:
<script type="text/javascript">
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
</script>
Notice the closing bracket and semicolon after your click method.
you forgot the close parenthesis, the code below works
$(document).ready(function () {
$("#addBtn").click(function () {
var offerData = $("#testForm").serialize();
alert(offerData);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
<td>Name :</td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td>Address :</td>
<td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>
Missing closing parenthesis for click event handler. Also in the HTML the last <tr> has no <td> included. Consider including your input element into <td colspan="2">
jQuery
$("#addBtn").click(function() {
var offerData = $("#testForm").serialize();
alert(offerData);
}); // <-- missing );
HTML
<tr>
<td colspan="2">
<input type="button" id="addBtn" />
</td>
</tr>

jQuery Find First Row From Closest Method

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>
Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')
You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

how to do dynamic divs - expand collapse loop

I need a function that allows my client to add more divs on the form or not, clicking on a button (+) for example, like a loop
this loop should repet divs and the button to add more divs, like bellow on the pic
does anybody has an ideia of how to do it?
is expand collapse the best way of doing it?
Thank you very much!
I am not certain what is your desire so I post both options:
If you want to expand hidden existing fields and asuming you can use JQUery:
<table>
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
<tr class="hiddenarea" style="display: none;">
<th>Field3 (Hidden)</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$(".hiddenarea").toggle();
});
</script>
///////////////////////////////////
The second solution to add a new line to the table is:
<table id="mytable">
<tr>
<th>Field1</th>
<td><input type="text" value="" /></td>
</tr>
<tr>
<th>Field2</th>
<td><input type="text" value="" /></td>
</tr>
</table>
<input id="show_hide" value="Collapse/Expand" />
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
});
</script>

Categories