Develop Reference

javascript add new form

I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.
the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!
Here is a JSFiddle
$("#addMore").click(function() {
$(".row-fluid:last").clone().appendTo(".wrapper");
});
$("#produse").change(function() {
var $this = $(this),
value = $this.val(); // save value
$('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
$("#ModeleCanapele").show();
break;
case 'Coltare':
$("#ModeleColtare").show();
break;
case 'Mobila':
$("#ModeleMobila").show();
break;
case 'Fotolii':
$("#ModeleFotolii").show();
break;
case 'Seturi':
$("#ModeleSeturi").show();
break;
// ...etc
}
});
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.
NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.
To be clear, current HTML specification does state that:
If the id value is not the empty string, it must be unique in a document. ref
But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <tr>).
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

IDs need to be unique. Use a class
You need to delegate the event handlers when you insert dynamic content
DRY, don't repeat yourself
function resetFunction() { // not sure what you want here?
$(this).closest(".row-fluid").remove();
}
$(function() {
$("#addMore").click(function() {
var $clone = $(".row-fluid:last").clone(true)
$('.sub_select_class',$clone).hide(); // we hide every second select
$clone.appendTo(".wrapper");
});
$(".row-fluid").on("click",".filter", resetFunction);
$(".row-fluid").on("change", ".produse", function() {
var value = $(this).val(), // save value
$parent = $(this).closest(".row-fluid");
$('.sub_select_class',$parent).hide(); // we hide every second select
$(".Modele" + value,$parent).show();
});
});
.sub_select_class {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select class="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select class="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select class="ModeleColtare sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select class="ModeleSeturi sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button class="filter" name="filter">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

Validating a Cell to become required when another Cell in the same row has a value in Javascript

In my form, there are several rows which have two input field. I want to get the required error in quantity cell if the product cell has selected. This should happen for the each and every row. Currently, I have a jquery function which I have used for each and every row separately. I want a single function which can work for every row. Hope someone will help to solve my problem. Thank you.
I have attached my code for the reference
$('#product1').change(function () {
if ($(this).val() != null ) {
$('#quantity1').prop('required',true);
}
});
$('#product2').change(function () {
if ($(this).val() != null ) {
$('#quantity2').prop('required',true);
}
});
$('#product3').change(function () {
if ($(this).val() != null ) {
$('#quantity3').prop('required',true);
}
});
<tr>
<td><select class="form-control select2 error" name="product1" style="width: 100%" id="product1">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>
<td><input class="form-control" name="freeIssue1" id="freeIssue1" type="text" /></td>
<td align="center"><button class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
</tr>
<tr>
<td><select class="form-control select2 error" name="product2" style="width: 100%" id="product2">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>
<td><input class="form-control" name="freeIssue2" id="freeIssue2" type="text" /></td>
<td align="center"><button class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
</tr>
<tr>
<td><select class="form-control select2 error" name="product3" style="width: 100%" id="product3">
<option disabled selected value> -- select a Product -- </option>
<option value="1"> Product 1 </option>
<option value="2"> Product 2 </option>
<option value="3"> Product 3 </option>
</select>
</td>
<td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>
<td><input class="form-control" name="freeIssue3" id="freeIssue3" type="text" /></td>
<td align="center"><button class="btn btn-danger" name="close" id="close" onclick="SomeDeleteRowFunction(this)"><i class="fa fa-close"></i></button></td>
</tr>

Edited answer -- didn't originally notice that you were trying to make a different element required based off of which was selected, which makes way more sense.
$('.productSelect').on('change', function(event){
var elementID = $(event.target).attr("id");
var numberPart = elementID.replace("#product", "");
if ($(event.target).val() != null ) {
$("#quantity" + numberPart).prop('required', true);
}
});
I changed the class selector, so for this to work you would have to add the 'productSelect' class to your html. Using event.target lets you decipher which element was actually edited and modify it without having to declare a function for every element. I haven't tested this but I think it is probably close to what you're after.

This is the correct solution for my problem.
$('.productSelect').change(function() {
var elementID = $(this).attr("id");
var numberPart = elementID.split("t", 2);
if ($(this).val() != null) {
$('#quantity' + numberPart[1]).prop('required', true);
}
});
Hope this will help someone.

Trouble saving HTML input to .txt using JS

I'm having issues using the below code to save the text input value to a .txt file. Any suggestions would be appreciated. I'm calling the function from the .js file using onclick in the last input tag. It's supposed to save the data from the second to last input tag to the .txt file. Ultimately I would like to save all values in the form, but just one value is a starting point.
<script src="../Js/Code.js"></script>
<form>
<table>
<tr>
<td>
<label for="incomeday">Date of income:</label>
<input type="date" name="incomeday">
</td>
<td>
<label for="incometype">Frequency:</label>
<select type="list" name="incometype">
<option>Select One</option>
<option value="One Time">One Time</option>
<option value="Weekly">Weekly</option>
<option value="Bi-Weekly">Bi-Weekly</option>
<option value="Monthly">Monthly</option>
</td>
<td>
<label for="incomeamount">Amount:</lable>
<input type="text" name="incomeamount" value="">
</td>
<td>
<input type="submit" onclick="saveIncome()" value="Submit">
</td>
</tr>
</table>
</form>
function saveIncome(){
var amount = document.getElementsByName("incomeamount").value;
var fo = fopen("../Data/Data.txt","w");
fwrite("../Data/Data.txt",amount);
fclose("../Data/Data.txt");
}

Display:none does not seem to be working all html elements

I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.

Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.

As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}

javascript to change form data not working

I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...

You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.

Go on jsfiddle.net and paste your code in. The code you provided works.