How to get getElementById - javascript

Below is the JavaScript that I used to getElementById but this is not working:
<script type="text/javascript">
function invoke(but)
{
if(but==5)
{
alert(document.firstChild);
}
else if(but==6)
{
window.location.href="index1.jsp";
}
}
function UnBloc1()
{
document.getElementById("temp2").style.display="block";
document.getElementById("temp4").style.display="block";
}
</script>
and the JSP applicable is a below:
<%
try{
int i=0;
int temp=0, temp1=0,temp2=0, temp3=0, temp4=0;
for(i=0;i<14;i++)
{
temp=temp+1;
temp1=temp1+1;
temp2=temp2+1;
temp3=temp3+1;
temp4=temp4+1;
i++;
%>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="<%=i%>" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc<%=i%>" name="abc<%=i%>" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp1<%=i%>" id="temp1<%=i%>" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp3<%=i%>" id="temp3<%=i%>" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp4<%=i%>" id="temp4<%=i%>" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<% }
}
catch(Exception e)
{
out.println(e);
}
%>
The source code generated is as below. Here I want to know how to get the dynamic button values in getElmentById for button for UnBloc() method in JavaScript.
<html>
<head><script type="text/javascript">
function invoke(but)
{
if(but==5)
{
alert("hi");
}
else if(but==6)
{
window.location.href="index1.jsp";
}
}
function UnBloc1()
{
document.getElementById("temp2").style.display="block";
document.getElementById("temp4").style.display="block";
}
</script> </head>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="1" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc1" name="abc1" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp11" id="temp11" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp31" id="temp31" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp41" id="temp41" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="3" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc3" name="abc3" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp13" id="temp13" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp33" id="temp33" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp43" id="temp43" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="5" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc5" name="abc5" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp15" id="temp15" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp35" id="temp35" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp45" id="temp45" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="7" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc7" name="abc7" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp17" id="temp17" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp37" id="temp37" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp47" id="temp47" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="9" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc9" name="abc9" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp19" id="temp19" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp39" id="temp39" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp49" id="temp49" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="11" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc11" name="abc11" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp111" id="temp111" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp311" id="temp311" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp411" id="temp411" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
<tr><form name="abc" method="post" action="">
<td><input type="text" value="13" name="id1" id="id1"></td>
<td><center><input type="text" value="a" readonly="readonly" id="abc13" name="abc13" size="100"></center></td>
<td><input type="Submit" value="Resume" name="temp113" id="temp113" onClick="invoke(5)"></td>
<td><input type="button" value="Update Answer" onClick="UnBloc1()"></td>
<td><input type="text" name="temp313" id="temp313" style="border:hidden; display: none"/></td>
<td><input type="Submit" value="Submit Answer" name="temp413" id="temp413" style="display: none" onClick="invoke(6)"/>
</td>
</form></tr>
</table></body></html>

Related

How to disable all input when checkbox is checked on load with jquery

I want the input each tr disabled if its checkbox is unchecked - on page load. As I understand, I have to call a function to check if the checkbox was checked. But as my code below, it's not working.
$(function() {
fn_chkBox('.form-check-input'); //see if checked on load
function fn_chkBox() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else {
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
}
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
I want all the input in each row tr disabled when load if its checkbox is empty.

You can use the .form-check-input:not(:checked) selector to select all checkboxes that are not checked.
$(function() {
$('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

To do what you require you can simply trigger() your change event handler on the checkboxes when the page loads.
Two other things to note here. Firstly, the logic there can be simplified by providing the inverse checked property state to the prop('disabled') call. Secondly, be careful when placing your event handlers outside document.ready. If you've put the jQuery code in the head of the page you encounter issues with the event not being bound.
With all that said, try this:
jQuery($ => {
$(".form-check-input").on('change', e => {
$(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked);
}).trigger('change');
});
.form-control { width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

You can leverage your existing function and just trigger a 'change' event on load. You can also shorten your function by setting disabled to !$(this).is(':checked')
$(function() {
$('input[type=checkbox]').trigger('change')
});
$(".form-check-input").change(function() {
$(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>

how to generate object from variants using jquery

I'm trying to generate objects from array variants using jquery but i didn't get proper solution for that can anyone help?
here is my HTML code.
<table>
<tr class="variants">
<td>
100g/
<input id="100g" name="variant_name" type="hidden" value="100g">
m/
<input id="m" name="variant_name" type="hidden" value="m">
blue
<input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>...</td>
<td>...</td>
</tr>
<tr/>....</tr>
<tr/>....</tr>
I need output something like that.
{
"100g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
},
"200g":{
"m":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
},
"s":{
"blue":{
"sku":"1-3",
"image":"link",
"price": "9"
}
}
}}
here is fiddle link for more information.
https://jsfiddle.net/fhLqsz3w/
It would be greatly appreciated if someone helped me

You can iterate through each tr of the table. Iterate through all the input tag of a row. For all the hidden input, if the key (value is the value of the input element) is present, move to next object otherwise create an object corresponding to that key. For all the non-hidden field, accumulate values in an object accumulator, after exiting the loop, now add the non-hidden object to the original object.
$('#update_btn').click(function(e) {
var obj = {};
$('table tbody tr').each(function() {
var temp = obj;
var notHidden = {};
$(this).find('input').each(function(i,e) {
if(e.type=="hidden"){
if(!(e.value in temp))
temp[e.value] = {};
temp = temp[e.value];
}
//added textbox value
if(e.type!="hidden"){
notHidden[e.getAttribute('name')] = e.value;
}
})
Object.assign(temp, notHidden);
});
console.log(obj);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-condensed" id="variants">
<tbody>
<tr><th> Variant </th> <th> SKU </th><th>Cross Price and Price</th> <th> Qty</th> <th> Image Link/ID </th></tr>
<tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
100g/ <input id="100g" name="variant_name" type="hidden" value="100g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-3">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
m/ <input id="m" name="variant_name" type="hidden" value="m">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr><tr class="variants">
<td>
200g/ <input id="200g" name="variant_name" type="hidden" value="200g">
s/ <input id="s" name="variant_name" type="hidden" value="s">
blue <input id="blue" name="variant_name" type="hidden" value="blue">
</td>
<td>
<input placeholder="SKU" name="sku" type="text" value="1-7">
</td>
<td>
<input placeholder="Cross Price" step="any" name="cross_price" type="number" value="30.91">
<input placeholder="Price" step="any" name="price" type="number" value="10.3">
</td>
<td>
<input placeholder="Quantity" step="any" name="qty" type="number" value="">
</td>
<td>
<input name="img" type="text" value="default">
</td>
</tr><tr>
</tr></tbody>
</table>
<button id="update_btn">click
</button>

How to Show Form Post data on same page Asynchronously (without refreshing page)?

i am working on small project.. In one module, i need to do some entries using multiple forms. and i need that added form data(respective table data) to be displayed in same page after adding each value.
So, that user will get to know what data he inserted.
Pls look at the code.
<div class="container">
<div class="row">
<br><br>
<h4> School Name: <?php echo $sn; ?>
</h4>
</div>
</div>
<div class="container col-md-offset-1 col-md-7">
<h3>Budget/Students Count:</h3>
<br>
<ul class="nav nav-tabs">
<li class="active">K6</li>
<li>K7</li>
<li>K8</li>
<li>K9</li>
<li>K10</li>
<li>K11 SC</li>
<li>K12 SC</li>
<li>K11 NSC</li>
<li>K12 NSC</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form name="add_name" id="add_name" class="col-md-5">
<table class="table" id="dynamic_field">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
<td><label style="font-size:10px;"></label></td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu1" class="tab-pane fade">
<form name="add_name1" id="add_name1" class="col-md-5">
<table class="table" id="dynamic_field1">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu2" class="tab-pane fade">
<form name="add_name2" id="add_name2" class="col-md-5">
<table class="table" id="dynamic_field2">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
Script:
$(document).ready(function() {
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
$(function() {
var i = 1;
$("#add").click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#add1").click(function() {
i++;
$('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
$('#submit1').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name1').serialize(),
success: function(data) {
alert(data);
$('#add_name1')[0].reset();
}
});
});
In section.php i have written sql query insertion.
Now what i need is, i need this entered data to be displayed in same page. and table should be updated every time when i add new value.

$.ajax({
type:"GET",
url:"path/to/file",
data: 'your data',
success:function(html){
$('.response').html(html); //this return response to your page
}
})

set focus to next nextbox on enter key pressed

HTml
<form action="#">
<table cellpadding="0" cellspacing="0" width="100%" class="formTbl">
<tr>
<td width="20%"><label>ExportDate</label></td>
<td width="30%"><input name="TxtExportDate" type="text" id="TxtExportDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgEExpDate" />
<span id="cvExportDate" style="color:Red;display:none;"></span>
</td>
<td width="20%"><label>UniqueExportId</label></td>
<td width="30%"><input name="TxtUniqueExportId" type="text" id="TxtUniqueExportId" /></td>
</tr>
<tr>
<td><label>Exporter Of Record</label></td>
<td><input name="TxtExporterOfRecord" type="text" id="TxtExporterOfRecord" /></td>
<td><label>Destination</label></td>
<td><input name="TxtDestination" type="text" id="TxtDestination" /></td>
</tr>
<tr>
<td><label>Transport Mode</label></td>
<td><input name="TxtTransportMode" type="text" id="TxtTransportMode" /></td>
<td><label>Carrier</label></td>
<td><input name="TxtCarrier" type="text" id="TxtCarrier" /></td>
</tr>
<tr>
<td><label>AESNo</label></td>
<td><input name="TxtAESNo" type="text" id="TxtAESNo" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAESNo" style="display:none;"></span></td>
<td><label>AESDate</label></td>
<td><input name="TxtAESDate" type="text" id="TxtAESDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgAESDate" />
<span id="cvAESDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Status</label></td>
<td><input name="txtStatus" type="text" id="txtStatus" /></td>
<td colspan="2"></td>
</tr>
<tr>
<td><label>Reference 1</label></td>
<td><input name="TxtReference1" type="text" id="TxtReference1" /></td>
<td><label>Reference 2</label></td>
<td><input name="TxtReference2" type="text" id="TxtReference2" /></td>
</tr>
<tr>
<td><label>Reference 3</label></td>
<td><input name="TxtReference3" type="text" id="TxtReference3" /></td>
<td><label>Reference 4</label></td>
<td><input name="TxtReference4" type="text" id="TxtReference4" /></td>
</tr>
<tr>
<td><label>Reference 5</label></td>
<td><input name="TxtReference5" type="text" id="TxtReference5" /></td>
<td><label>Reference 6</label></td>
<td><input name="TxtReference6" type="text" id="TxtReference6" /></td>
</tr>
<tr>
<td><label>Reference 7</label></td>
<td><input name="TxtReference7" type="text" id="TxtReference7" /></td>
<td><label>Reference 8</label></td>
<td><input name="TxtReference8" type="text" id="TxtReference8" /></td>
</tr>
<tr>
<td><label>Direct ID</label></td>
<td><input name="TxtDirectId" type="text" id="TxtDirectId" /></td>
<td><label>Produced Date</label></td>
<td><input name="TxtProducedDate" type="text" id="TxtProducedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgProduceDate" />
<span id="cvProducedDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Goods Issued Date</label></td>
<td><input name="TxtGoodsIssuedDate" type="text" id="TxtGoodsIssuedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgGoodIssueDate" />
<span id="cvGoodsIssuedDate" style="color:Red;display:none;"></span>
</td>
<td><label>Shipping Date</label></td>
<td><input name="TxtShippingDate" type="text" id="TxtShippingDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgShippingDate" />
<span id="cvShippingDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Part No</label></td>
<td><input name="TxtPartNo" type="text" id="TxtPartNo" /></td>
<td><label>Alternate Part</label></td>
<td><input name="TxtAlternatePart" type="text" id="TxtAlternatePart" /></td>
</tr>
<tr>
<td><label>Unit Of Measuremnt</label></td>
<td><input name="TxtUnitOfMeasuremnt" type="text" id="TxtUnitOfMeasuremnt" /></td>
<td><label>Export Qty</label></td>
<td><input name="TxtExportQty" type="text" id="TxtExportQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvExportQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>Part Description</label></td>
<td><input name="TxtDescription" type="text" id="TxtDescription" /></td>
<td><label>Claim Code</label></td>
<td><input name="TxtClaimCode" type="text" id="TxtClaimCode" /></td>
</tr>
<tr>
<td><label>Avail Qty</label></td>
<td><input name="TxtAvailQty" type="text" id="TxtAvailQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAvailQty" style="display:none;"></span></td>
<td><label>Cont Qty</label></td>
<td><input name="TxtContQty" type="text" id="TxtContQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvContQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>ScheduledB</label></td>
<td><input name="TxtScheduledB" type="text" maxlength="10" id="TxtScheduledB" /></td>
<td><label>HIT</label></td>
<td><input name="TxtHIT" type="text" id="TxtHIT" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvHIT" style="display:none;"></span></td>
</tr>
<tr>
<td><label>FTA Duty</label></td>
<td><input name="TxtFTADuty" type="text" id="TxtFTADuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTADuty" style="display:none;"></span></td>
<td><label>FTA Rate</label></td>
<td><input name="TxtFTARate" type="text" id="TxtFTARate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTARate" style="display:none;"></span></td>
</tr>
<tr>
<td><label>US Duty</label></td>
<td><input name="TxtUSDuty" type="text" id="TxtUSDuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSDuty" style="display:none;"></span></td>
<td><label>US Rate</label></td>
<td><input name="TxtUSRate" type="text" id="TxtUSRate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSRate" style="display:none;"></span></td>
</tr>
<tr>
<td>
<label>
Share Partner Code</label>
</td>
<td>
<input name="TxtSharePartnerCode" type="text" id="TxtSharePartnerCode" />
</td>
<td><label> Contract Number </label> </td>
<td>
<input name="txtContractNumber" type="text" maxlength="15" id="txtContractNumber" class="TextBox" autocomplete="Off" />
</td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="submit" name="BtnAdd" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("BtnAdd", "", true, "AddExport", "", false, false))" id="BtnAdd" class="blueBtn" />
<input type="submit" name="BtnCancel" value="Cancel" id="BtnCancel" class="blueBtn" />
</td>
</tr>
</table>
<input type="submit" value="submit"/>
</form>
Javascript
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
I have update this fiddle
http://jsfiddle.net/andrewwhitaker/GRtQY/
with this
fiddle
http://jsfiddle.net/mparvez1986/L8Ax7/
but updated fiddle is not working, please help

That's because .nextAll() only selects the next siblings and in your first fiddle inputs are siblings which is not case in the second fiddle. The better option in your case is using the .index() method:
var $inputs = $("input").on("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
// `i` is the index of the current element
// in the cached jQuery collection
var i = $inputs.index(this);
$inputs.eq(i+1).focus();
}
});
http://jsfiddle.net/6S7Kc/

javascript calculator on asp.net content page. Is it possible?

I have an asp.net content page and I need to write a calculator inside(?) it.
<%# Page Title="Calculator" Language="C#" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" Inherits="WebApplication2.Calculator" MasterPageFile="~/Site.Master" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<!-- calculator code here -->
</asp:Content>
I have a html page with a simple javascript calculator:
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
<form action="#" name="Calc">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
</form>
</body>
</html>
I need to adapt this code for using with an asp.net content page. How can I do it ?
I know that asp.net is server-side technology and javascript is a client-side. But I don't know how to use one inside another =\

Yes it's possible, only put the JS or Jquery script inside the content looks the code below:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table style="width: 160px" border="2">
<tr>
<td colspan="4">
<input id="Text1" type="text" maxlength=16 name="Input" style="width:98%" /></td>
</tr>
<tr>
<td style="width: 40px">
<input id="Button1" type="button" value="1" onclick="addvalue('1')" /></td>
<td style="width: 40px">
<input id="Button2" type="button" value="2" onclick="addvalue('2')" /></td>
<td style="width: 40px">
<input id="Button3" type="button" value="3" onclick="addvalue('3')" /></td>
<td>
<input id="Button7" type="button" value="+" onclick="addvalue(' + ')" /></td>
</tr>
<tr>
<td>
<input id="Button4" type="button" value="4" onclick="addvalue('4')" /></td>
<td>
<input id="Button5" type="button" value="5" onclick="addvalue('5')" /></td>
<td>
<input id="Button6" type="button" value="6" onclick="addvalue('6')" /></td>
<td>
<input id="Button8" type="button" value="-" onclick="addvalue(' - ')" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="7" onclick="addvalue('7')" /></td>
<td>
<input id="Button10" type="button" value="8" onclick="addvalue('8')" /></td>
<td>
<input id="Button11" type="button" value="9" onclick="addvalue('9')" /></td>
<td>
<input id="Button12" type="button" value="*" onclick="addvalue('*')" /></td>
</tr>
<tr>
<td>
<input id="Button13" type="button" value="C" onclick="Calc.Input.value=null" /></td>
<td>
<input id="Button14" type="button" value="0" onclick="addvalue('0')" /></td>
<td>
<input id="Button15" type="button" value="=" onclick="Calc.Input.value = eval(Calc.Input.value)" /></td>
<td>
<input id="Button16" type="button" value="/" onclick="addvalue(' / ')" /></td>
</tr>
</table>
<script type="text/javascript">
function addvalue(arg1) {
Calc.Input.value += arg1;
}
</script>
</asp:Content>
I hope that helps

Categories