Appear div on select change with php

Appear div on select change with php - javascript

I am kinda stuck and I can't tell why.
I am trying to make a form and within this form I put a 'select' tag. Every options has a single number, 0 to 5. If you choose less than 2, a div appears, else, nothing appears. Here's my code :
<script>
$(document).ready(function(){
$("#depuis").change(function(){
if ($('#depuis') < 2)
$('#moins2').show();
});
});
</script>
And this is my body :
<form action="test.php" method="post">
<table class="formDiv" id="info_perso">
<tr>
<td><label for="depuis">Depuis combien d'annees:</label></td>
<td><select id="depuis" name="depuis">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</td>
</tr>
</table>
</form>
<table class="formDiv" id="moins2">
<tr>
<td>Veuillez entrer votre ancienne adresse.</td>
</tr>
<tr>
<td><label for="adresse2">Adresse :</label></td>
<td><input type="text" id="adresse2" name="adresse2"></td>
<td><label for="app2">App :</label></td>
<td><input type="text" id="app2" name="app2"></td>
</tr>
<tr>
<td><label for="codepostal2">Code Postal :</label></td>
<td><input type="text" id="codepostal2" name="codepostal2"></td>
<td><label for="ville">Ville :</label></td>
<td><input type="text" id="ville" name="ville"></td>
</tr>
<tr>
<td><label for="telephone2">Telephone :</label></td>
<td><input type="text" id="telephone2" name="telephone2"></td>
</tr>
</table>
There's a problem in my function, how can I fix it?

try something like this
$(function(){
$("#depuis").change(function(){
if (this.value < 2){
$('#moins2').show();
}else{
$('#moins2').hide();
}
});
})

Write:
check();
$("#depuis").change(function () {
check();
});
function check() {
if (parseInt($("#depuis").val()) < 2) {
$('#moins2').show();
} else {
$('#moins2').hide();
}
}
DEMO here.

if ($('#depuis') < 2)
$('#moins2').show();
you are not comparing with integers... first get the indexed size and then compare
or use else case to check what is going wrong here...

Try this:
<script>
$(document).ready(function(){
$("#depuis").change(function(){
if ($('#depuis').val() < 2)
$('#moins2').show();
else
$('#moins2').hide();
});
});
</script>
Demo

Getting select box value use .val()
<script>
$(document).ready(function(){
$("#depuis").on('change',function(){
if (parseInt($("#depuis").val()) < 2)
$('#moins2').show();
else
$('#moins2').hide();
});
$("#depuis").trigger('change')
});
</script>
DEMO

add a onchage event on your select box like this
<select id="depuis" name="depuis" onchange="javascript:show_div(this.value);">
and use js function
function show_div(str)
{
if(str<2)
{
document.getElementById('moins2').style.display="block";
}
else
{
document.getElementById('moins2').style.display="none";
}
}
you can also use jquery function as follows without attibute onchange on select box
$(function(){
$("#depuis").change(function(){
if (this.value < 2){
$('#moins2').show();
}else{
$('#moins2').hide();
}
});
})
See JS Fiddle

Related

Enable/disable dropdowns when checkbox checked/unchecked

I'm creating a web app using Java servlets and JSP. I have a table which contains songs. Every song has its own checkbox and drop-down. like this:
You can see that taken songs have their checkbox and drop-down disabled and that's how I want it.
What I want is when the page loads all the drop-downs will be disabled, and when I check one of the available checkboxes the drop-down that is in the same line will be enabled and when I uncheck that checkbox the dropdown will be disabled again.
Here is the JSP code:
<table id="myTable">
<tr>
<th>Songs</th>
<th>Selected</th>
<th>#</th>
<th>Available/Taken</th>
</tr>
<c:forEach items="${Entities}" varStatus="loop">
<tr>
<td><c:out value="${Entities[loop.index]}"/></td>
<td><input id="checkbox1" type="checkbox" name="selected" value=" ${Entities[loop.index]}" ${checkboxDis[loop.index]} ><br></td>
<td>
<select name="myselect" id="drop" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
<td>
<c:choose>
<c:when test="${checkboxDis[loop.index].equals('disabled')}">
<i class="fa fa-ban" style="color:red;"></i>
</c:when>
<c:when test="${checkboxDis[loop.index].equals('')}">
<i class="fa fa-check-circle" style="color:green;"></i>
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
The jQuery code I've done so far:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
$('#drop')[i].prop("disabled", false);
}
}
} else {
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
$('#drop')[i].prop("disabled", true);
}
}
}
});
});
The code isn't working because I don't know how to handle the drop-downs since they have the same names and ids.

Your IDs need to be unique - in this case not needed at all for enabling the select
$(function() {
$("input[type='checkbox']").on('change', function() {
$(this).closest("tr").find("select[name=myselect]").prop("disabled", !this.checked)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input id="checkbox_1" type="checkbox" name="selected" value="1"></td>
<td>
<select name="myselect" id="drop_1" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
<tr>
<td><input id="checkbox_2" type="checkbox" name="selected" value="2"></td>
<td>
<select name="myselect" id="drop_2" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
</table>

Change your JSP to this:
<td><input id="checkbox_${checkboxDis[loop.index]}" type="checkbox" name="selected" value="${Entities[loop.index]}"><br></td>
<td>
<select name="myselect" id="drop_${checkboxDis[loop.index]}" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
Now your checkboxes and dropdowns have corresponding IDs which you can then use with jQuery:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
$('#drop_' + $(this).val()).prop("disabled", false);
} else {
$('#drop_' + $(this).val()).prop("disabled", true);
// Instead of a for-loop for removing the unchecked song,
// you can also use Array.filter():
selected1 = selected1.filter(song_id => song_id !== $(this).val());
/*
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
}
}
*/
}
});
});

make an input text into read only when one value is selected from drop down list using jquery

i have one select box there in that options are,
none
current
future
if you select 'NONE' the all text box should be editable.
if you select 'current' the class="current" those text box should be editable and remaining should be only readonly.
similarly same like to future also. When i select future the future text boxes should be editable and remaining should be readonly
$('#cognizant').change(function(){
if(this.value == ""){
$('.current').prop('readonly',true);
} else{
$('.current').prop('readonly',false);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current"/>
<input type="text" id="cognizantbi" class="current"/>
<input type="text" id="futurevsm" class="future" />
<input type="text" id="futuresymbols" class="future" />
</td>
</tr>
</tbody>
</table>

Let's change your javascript code only.
We need to use jQuery's change() function (documentation) and then validate the selected option.
The final code:
$('#cognizant').change(function(){
var value = $(this).val();
if(value == ''){
// NONE
$('#curator input[type="text"]').removeAttr('readonly');
}
else if(value == '1'){
// CURRENT
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .current').removeAttr('readonly');
}
else if(value == '2'){
// FUTURE
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .future').removeAttr('readonly');
}
});
See it in action: https://jsfiddle.net/x5fdLqff/4/

$('#cognizant').change(function(){
switch(this.value) {
case "":
$('.current').prop('readonly',false);
$('.future').prop('readonly',false);
break;
case "1":
$('.current').prop('readonly',false);
$('.future').prop('readonly',true);
break;
case "2":
$('.current').prop('readonly',true);
$('.future').prop('readonly',false);
break;
}
}).change();

<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="current">current</option>
<option value="future">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current myinputs"/>
<input type="text" id="cognizantbi" class="current myinputs"/>
<input type="text" id="futurevsm" class="future myinputs" />
<input type="text" id="futuresymbols" class="future myinputs" />
</td>
</tr>
</tbody>
</table>
<script>
$('#cognizant').change(function(){
var type = $("#cognizant").val();
$( ".myinputs" ).each(function( index ) {
$( this ).prop('readonly', false);
});
if(type != ""){
$("."+type).each(function( index ) {
$( this ).prop('readonly', true);
});
}
});
</script>
I have change option value in select box and made little change in javascript code.
hope it works for you.

As an alternative approach, with a small change in the html. You add a class name of 'none' to all the input fields, which is the same as option 1.
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current none"/>
<input type="text" id="cognizantbi" class="current none"/>
<input type="text" id="futurevsm" class="future none" />
<input type="text" id="futuresymbols" class="future none" />
</td>
</tr>
</tbody>
</table>
Then the jQuery to be like this. Comments explain approach.
$(function(){
$('#cognizant').on("change", function() {
//Set all text boxes to readonly
$("input[type='text']").prop("readonly", true);
//Select the option text, based on its value.
var text = $("#cognizant option[value='"+$(this).val()+"']").text();
//Set the property readonly to false on the selected class.
$("."+text).prop('readonly', false);
}).trigger("change");
});

How to toggle text when a specific value in drop-down AND checkbox is checked

So right now, I have:
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
<td class="label">Out of Print?</td>
<td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>
<div id="showthis" style="display:none">
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>
and my script as:
$('#status').change(function () {
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
Basically I am looking for the hidden texts to pop up
When the drop-down menu is changed AND when it's set to Disabled
and you check the checkbox, the last checkbox appears.
The problems I am having are:
1) When I click on Disabled and check the checkbox, and then I change the Disabled to another option, the hidden text still pops up.
2) You click on any option other than the default one, then you click on the checkbox first before you change the option from the drop-down menu to Disabled -> the hidden text does not show up.
How would I approach this?
Fiddle

Changes made: Invalid htmls fixed, Improper event bindings fixed.
Your HTML:
<table>
<tbody>
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</tbody>
</table>
<table id=outprint style="display:none">
<tbody>
<tr>
<td class="label">Out of Print?</td>
<td>
<input type="checkbox" name="outOfPrint" id="chk" />
</td>
</tr>
</tbody>
</table>
<table id="showthis" style="display:none">
<tbody>
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td>
<input type="checkbox" name="removeAndNotify" />
</td>
</tr>
</tbody>
</table>
Javascript:
var show;
$('#status').change(function() {
show = $(this).val();
if (show != "-1") {
$('#outprint').show();
} else {
$('#outprint').hide();
$('#showthis').hide();
}
});
$('#chk').change(function() {
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
} else {
$('#showthis').hide();
}
});
DEMO

I guess you just need to reset the state of your hidden controls to default once you change the options from the dropdown and then iterate through the logic.
$('#status').change(function () {
ResetState();
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
function ResetState()
{
$('#outprint').hide();
$('#showthis').hide();
$('#chk').prop("checked", false);
}
Example : https://jsfiddle.net/DinoMyte/up4j39qr/4/

Disable next form field on dynamically inserted form elements

I know this has been asked many times before but none of those solutions seem to work in my situation.
I need the checkbox on each row to disable the next text field. Each table row is created on the fly (JS clone). Only the first row is static. Each subsequent row, the name and ID are appended with a new number (formfield1, formfield2, etc) and happen after the page has loaded.
HTML
<div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop-->
<p class="label">Enter Fuel Stop:</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">
<tbody>
<tr>
<td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">
<option value="AZ">AZ</option>
<option value="CA" selected="selected">CA</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="OR">OR</option>
<option value="UT">UT</option>
</select>
</td>
<td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="Gallons"/></td>
<td><input type="checkbox" name="data_yard1" id="data_yard1" class="enablePPG" value="yes" onclick="disablePPG(this);"/> Yard
</td>
<td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="PPG" /></td>
</tr>
</tbody>
</table>
<a id="add_fuel_row" class="add_btn">+ State</a>
</div><!--close #fuel_stop-->
<input type="submit" name="Submit" class="send_button" value="Send"/>
</form>
</div><!--close .record_entry_container-->
JS (not working but I think should)
function disablePPG() {
$(this).click(function() {
if ($(this).is(':checked')){
$(this).next('.price_field').prop('disabled', true);
} else {
$(this).next('.price_field').prop('disabled', false);
}
});
}
The following JS works on the first row of form elements, but obviously not a solution for multiple rows when added.
function disablePPG() {
$(this).click(function() {
if ($('#data_yard1').is(':checked')) {
$('#data_price1').prop('disabled', true);
} else {
$('#data_price1').prop('disabled', false);
}
});
}
Any help much appreciated.

$(".enablePPG").on("click", function()
{
if($(this).is(":checked") == true)
$(this).parent().next().children().attr("disabled", "disabled");
else
$(this).parent().next().children().removeAttr("disabled");
});

Adding rows dynamically with jQuery

I'm building a form where I need multiple optional inputs, what I have is basically this:
Every time a user presses the plus button a new row of form inputs should be added to the form, how can I do this in jQuery? Also, is it possible to automatically add a new row when all rows (or just the last row, if it's easier / faster) are filled? That way the user wouldn't need to press the plus button.
I'm sorry for asking maybe such a basic question but I'm still very green with jQuery, I could do this with PHP but I'm sure Javascript / jQuery plays a more appropriate role here.
#alex:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$form = $('#personas');
$rows = $form.find('.person');
$('a#add').click(function() {
$rows.find(':first').clone().insertAfter($rows.find(':last'));
$justInserted = $rows.find(':last');
$justInserted.hide();
$justInserted.find('input').val(''); // it may copy values from first one
$justInserted.slideDown(500);
});
</script>
</head>
<body>
<form id="personas" name="personas" method="post" action="">
<table width="300" border="1" cellspacing="0" cellpadding="2">
<tr>
<td>Name</td>
<td>More?</td>
</tr>
<tr class="person">
<td><input type="text" name="name[]" id="name[]" /></td>
<td>+</td>
</tr>
</table>
</form>
</body>
</html>

This will get you close, the add button has been removed out of the table so you might want to consider this...
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
return false;
});
});
</script>
HTML markup looks like this
<a id="add">+</a></td>
<table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td>Name</td>
</tr>
<tr class="person">
<td><input type="text" name="name" id="name" /></td>
</tr>
</tbody>
</table>
EDIT To empty a value of a textbox after insert..
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #name').val('');
return false;
EDIT2 Couldn't help myself, to reset all dropdown lists in the inserted TR you can do this
$("#mytable tbody>tr:last").each(function() {this.reset();});
I will leave the rest to you!

As an addition to answers above: you probably might need to change ids in names/ids of input elements (pls note, you should not have digits in fields name):
<input name="someStuff.entry[2].fieldOne" id="someStuff_fdf_fieldOne_2" ..>
I have done this having some global variable by default set to 0:
var globalNewIndex = 0;
and in the add function after you've cloned and resetted the values in the new row:
var newIndex = globalNewIndex+1;
var changeIds = function(i, val) {
return val.replace(globalNewIndex,newIndex);
}
$('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );
globalNewIndex++;

I have Tried something like this and its works fine;
this is the html part :
<table class="dd" width="100%" id="data">
<tr>
<td>Year</td>
<td>:</td>
<td><select name="year1" id="year1" >
<option value="2012">2012</option>
<option value="2011">2011</option>
</select></td>
<td>Month</td>
<td>:</td>
<td width="17%"><select name="month1" id="month1">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select></td>
<td width="7%">Week</td>
<td width="3%">:</td>
<td width="17%"><select name="week1" id="week1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td width="8%"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td>Actual</td>
<td>:</td>
<td width="17%"><input name="actual1" id="actual1" type="text" /></td>
<td width="7%">Max</td>
<td width="3%">:</td>
<td><input name="max1" id="max1" type="text" /></td>
<td>Target</td>
<td>:</td>
<td><input name="target1" id="target1" type="text" /></td>
</tr>
this is Javascript part;
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" /></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text" /></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text" /></td></tr>';
$('#data').append(strToAdd);
});
});
//]]>
</script>
Finaly PHP submit part:
for( $i = 1; $i <= $count; $i++ )
{
$year = $_POST['year'.$i];
$month = $_POST['month'.$i];
$week = $_POST['week'.$i];
$actual = $_POST['actual'.$i];
$max = $_POST['max'.$i];
$target = $_POST['target'.$i];
$extreme = $_POST['extreme'.$i];
$que = "insert INTO table_name(id,year,month,week,actual,max,target) VALUES ('".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."')";
mysql_query($que);
}
you can find more details via Dynamic table row inserter

Untested.
Modify to suit:
$form = $('#my-form');
$rows = $form.find('.person-input-row');
$('button#add-new').click(function() {
$rows.find(':first').clone().insertAfter($rows.find(':last'));
$justInserted = $rows.find(':last');
$justInserted.hide();
$justInserted.find('input').val(''); // it may copy values from first one
$justInserted.slideDown(500);
});
This is better than copying innerHTML because you will lose all attached events etc.

Building on the other answers, I simplified things a bit. By cloning the last element, we get the "add new" button for free (you have to change the ID to a class because of the cloning) and also reduce DOM operations. I had to use filter() instead of find() to get only the last element.
$('.js-addNew').on('click', function(e) {
e.preventDefault();
var $rows = $('.person'),
$last = $rows.filter(':last'),
$newRow = $last.clone().insertAfter($last);
$last.find($('.js-addNew')).remove(); // remove old button
$newRow.hide().find('input').val('');
$newRow.slideDown(500);
});

Develop Reference

JavaScript is the programming language of the Web.

Appear div on select change with php - javascript

try something like this $(function(){ $("#depuis").change(function(){ if (this.value < 2){ $('#moins2').show(); }else{ $('#moins2').hide(); } }); })

Write: check(); $("#depuis").change(function () { check(); }); function check() { if (parseInt($("#depuis").val()) < 2) { $('#moins2').show(); } else { $('#moins2').hide(); } } DEMO here.

if ($('#depuis') < 2) $('#moins2').show(); you are not comparing with integers... first get the indexed size and then compare or use else case to check what is going wrong here...

Try this: <script> $(document).ready(function(){ $("#depuis").change(function(){ if ($('#depuis').val() < 2) $('#moins2').show(); else $('#moins2').hide(); }); }); </script> Demo

Getting select box value use .val() <script> $(document).ready(function(){ $("#depuis").on('change',function(){ if (parseInt($("#depuis").val()) < 2) $('#moins2').show(); else $('#moins2').hide(); }); $("#depuis").trigger('change') }); </script> DEMO

Related

Enable/disable dropdowns when checkbox checked/unchecked

make an input text into read only when one value is selected from drop down list using jquery

How to toggle text when a specific value in drop-down AND checkbox is checked

Disable next form field on dynamically inserted form elements

Adding rows dynamically with jQuery

Categories

Resources