We Keep Coding

Clone Table Row with drop down not working

I am trying to clone a row from a template, with selected values. I also want to reset the template row after the clone.
$("CloneButton").click(function() {
var clonedRow = $('#rowtemplate').clone();
clonedRow.html($(clonedRow).html().replace(/#/g, index));
clonedRow.find('.project').text(project);
clonedRow.find('.billingcodeCssId').val(timeCodeID);
clonedRow.find('.billingcodeCss').text(timeCode);
$('#Maintable').append(clonedRow.find('tr'));
});
When I try to clone the table row JS Fiddle, the selector is not picking up the selector.
Whats wrong with selector, and how to clone the row with drop down with the selected values?

Try This
There will be many changes needed in your code ..
you wrote $("CloneButton").click(function() { - it misses the # ID selector - so your button click will not fire. You need to write $("#CloneButton").click(function() {
You need to set selectd attribute for both dropdown before you clone and append. You can set selected attribute using .attr("selected", true)
Below code is working fine for me. Check Working Code Snippet
$("#CloneButton").click(function() {
var drp1Value = $('#rowtemplate tr').find('select').eq(0).val();
$("option[value=" + drp1Value + "]", $('#rowtemplate tr').find('select').eq(0))
.attr("selected", true).siblings()
.removeAttr("selected");
var drp2Value = $('#rowtemplate tr').find('select').eq(1).val();
$("option[value=" + drp2Value + "]", $('#rowtemplate tr').find('select').eq(1))
.attr("selected", true).siblings()
.removeAttr("selected");
var clonedRow = $('#rowtemplate tr').clone();
$('#Maintable').append(clonedRow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h4 >Main Table</h4>
<table id="Maintable" >
<th>Client</th><th>Heading</th><th>Heading</th><th>Total</th><th>Delete?</th>
<tr>
<td>
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Modeling</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select>
</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="0">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
<option value="">Budget-070</option>
<option selected="selected" value="5">Budget-070</option>
<option value="6">Budget-784</option>
<option value="7">Cost Center-027</option>
</select></span>
</td>
<td>
<input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
</td>
<td class="rowtotal">10.00</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
</td>
</tr>
<tr>
<td><span class="project">
<select class="form-control projectcodeid" id="Records" name="Records[1].SelectedProjectFromList"><option value="">Xilinx ISE</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select></span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_1__SelectedBillingCodesFromList" name="Records[1].SelectedBillingCodesFromList"><option value="">Bill-727 </option>
<option value="1">TIME CODE A </option>
<option selected="selected" value="2">Bill-727 </option>
<option value="3">Bill-561 </option>
<option value="4">Bill-281 </option>
</select></span>
</td>
<td>
<input name="Records[1].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[1].TimeRecords[0].Meters" type="text" value="">
</td>
<!-- added row totals rowtotalmeters-->
<td class="rowtotal">
0.00
</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
</td>
</tr>
</table>
<!--*********** End Main Table-->
<hr />
<h4>Row template</h4>
<button type="button" id="CloneButton">Add Clone Row to table!</button>
<table id="rowtemplate">
<tr>
<td>
<span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Default</option>
<option value="0">Null</option>
<option value="1">Ventosanzap</option>
<option value="2">Modeling</option>
<option value="3">Xilinx ISE</option>
</select></span>
</td>
<td>
<input type="hidden" name="Records.Index" value="0">
<span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
<option value="">Default</option>
<option value="0">Null</option>
<option value="">Budget-070</option>
<option value="5">Budget-070</option>
<option value="6">Budget-784</option>
<option value="7">Cost Center-027</option>
</select></span>
</td>
<td>
<input name="Records[0].TimeRecords[0].ID" type="hidden" value="">
<input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value="">
</td>
<td class="rowtotal">0.00</td>
<td>
<input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false">
</td>
</tr>
</table>
Please check the code snippet

Javascript form - different email based on choice

I am using a javascript form with a server-side processor and I want to be able to have the form go to different emails based on the dropdown. I've gotten as far as I could based on other forms but I can't seem to get the emails to go through. I have added under the option tag on the email addresses for the choices and changed the value from an overall form email to "mailTo" () I am pretty sure this is where the issue is but I don't know how to fix it.
<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
<input type="hidden" name="recipient" value="mailTo">
<input type="hidden" name="subject" value="Website Consult Request">
<table width="100%" border="0" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td>Nearest Location*</td>
<td><select id="mailTo" name"mailTo">
<option value="option1#testsite.com">Option1</option>
<option value="option2#testsite.com">Option2</option>
<option value="option3#testsite.com">Option3</option>
<option value="option4#testsite.com">Option 4</option>
</select></td>
</tr>
</tbody>
</table><p> </p>
<input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
<input type="hidden" name="redirect" value="thankyou.html">
</form>

EDIT - My final code did not save previously
What you can do is add a javascript function to change the value of "recipient" to the selected email like...
function changeVal() {
var selectedVal = document.getElementById("mailTo").value;
document.getElementById("recipient").value = selectedVal;
var test = document.getElementById("recipient").value;
//alert(test);
}
<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
<input type="hidden" name="recipient" id="recipient" value="mailTo">
<input type="hidden" name="subject" value="Website Consult Request">
<table width="100%" border="0" cellspacing="10px" cellpadding="10px">
<tbody>
<tr>
<td>Nearest Location*</td>
<td><select id="mailTo" name"mailTo" onchange="changeVal()">
<option value="option1#testsite.com">Option1</option>
<option value="option2#testsite.com">Option2</option>
<option value="option3#testsite.com">Option3</option>
<option value="option4#testsite.com">Option 4</option>
</select></td>
</tr>
</tbody>
</table><p> </p>
<input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
<input type="hidden" name="redirect" value="thankyou.html">
</form>
...I added an alert that you can comment out if you would like to test. Also I did this in javascript and not Jquery as you only asked for that.

Unable to post tag returned through document.getElementById('div').innerHTML

I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>

Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.

Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.

Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.

Multiple rows to database, not adding

I found this script to add rows to my form somewhere and I can add rows that works, the only problem is that when I submit it, only the first row are submitted. Never tried anything like this before so I might be completely off and if that is the case at least I will know that.
THIS IS THE HTML
<form name="addshow" action="addshow.php" method="post">
<input type="submit" value="Lägg till">
<input type="reset" value="Nollställ"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#tableclassen tbody>tr:last').clone(true).insertAfter('#tableclassen tbody>tr:last');
return false;
});
});
</script>
<a id="add">+</a>
<TABLE id='tableclassen' cellpadding="3" cellspacing="0">
<TBODY>
<TR valign="top">
<TD width>
<input type="text" placeholder="ID" name="Horse_id" required oninvalid="this.setCustomValidity('Ange ID')" oninput="setCustomValidity('')" size="5"/>
</TD>
<TD>
<input type="text" placeholder="Årtal" name="years" required oninvalid="this.setCustomValidity('Ange årtal')" oninput="setCustomValidity('')" size="6"/>
</TD>
<TD>
<input type="text" placeholder="Plac." name="place" required oninvalid="this.setCustomValidity('Ange placering')" oninput="setCustomValidity('')" size="4"/>
</TD>
<TD>
<input type="text" placeholder="Ange eventnamn" name="event" required oninvalid="this.setCustomValidity('Ange eventnamn')" oninput="setCustomValidity('')" size="35"/>
</TD>
<TD>
<input type="text" placeholder="Ange klass" name="class" required oninvalid="this.setCustomValidity('Ange klass')" oninput="setCustomValidity('')" />
</TD>
<TD>
<input type="text" placeholder="Assoc." name="association" required oninvalid="this.setCustomValidity('Ange Assoc.')" oninput="setCustomValidity('')" size="6"/>
</TD>
<TD>
<input type="text" placeholder="Poäng" name="points" required oninvalid="this.setCustomValidity('Ange poänh')" oninput="setCustomValidity('')" size="3"/>
</TD>
<TD>
<select name="type" required oninvalid="this.setCustomValidity('Välj typ')" oninput="setCustomValidity('')">
<option value="" disabled selected>Välj typ</option>
<option value="SWE">SWE</option>
<option value="INTER">INTER</option>
</select>
</TD>
<TD>
<select name="dis">
<option value="" disabled selected>Välj Dis</option>
<option value="D">D</option>
<option value="SJ">SJ</option>
<option value="E">E</option>
<option value="U">U</option>
<option value="K">K</option>
<option value="T">T</option>
</select>
</TD>
</TR>
</TBODY>
</TABLE>
</form>
THIS IS THE PHP/DATABASE PROCESS
<?php
session_start();
ob_start();
include("function/conn.php"); //Databas koppling
mysql_set_charset("utf8");
$Horse_id = addslashes($_POST['Horse_id']);
$Year = addslashes($_POST['years']);
$Place = addslashes($_POST['place']);
$Event = addslashes($_POST['event']);
$Class = addslashes($_POST['class']);
$Assoc = addslashes($_POST['association']);
$Point = addslashes($_POST['points']);
$Type = addslashes($_POST['type']);
$Dis = addslashes($_POST['dis']);
//Sparar värden i variabler ifrån form
$result = mysql_query(" INSERT INTO shows
(Horse_id, years, place, event, class, association, points, type, dis)
VALUES('$Horse_id', '$Year', '$Place', '$Event', '$Class', '$Assoc', '$Point', '$Type', '$Dis') ") or die(mysql_error());
// Lägger in ny post i databasen
if ($result){ //Skicka tillbacka användaren till backend
header("location: admin.php");
}
else{
echo "Something went wrong.";
}
?>

Give the form fields array-style names, e.g.
<input type="text" placeholder="ID" name="Horse_id[]" required oninvalid="this.setCustomValidity('Ange ID')" oninput="setCustomValidity('')" size="5"/>
Then in PHP, $_POST['Horse_id'] will be an array of all the inputs; the server script can loop through them and insert them all in the DB. If you use the same name in all rows without [], $_POST['Horse_id'] will only contain the last one.

The problem is because you don't change the name'ed field of the cloned inputs and the back-end only takes the last one in most cases.
I left an example in a similar topic: Change name attribute of input/select field nested in a cloned table for dynamic form entry - Javascript

Get array values from an option select with javascript to populate text fields

I have a form where the user can make an "instant search" with ajax, and the search result are shown as "select... option" tags, when the user choose an option, it's value will populate a text field. The "simplified" version of the code is this:
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
<option value="2413">2413 - Name A</option>
<option value="2414">2414 - Name B</option>
<option value="2415">2415 - Name C</option>
</select>
</form>
You can also check it on line: http://jsfiddle.net/BCXfQ/
Now, I need to get TWO values for each option select, like this:
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
<option value="['Name A', '2413']">2413 - Name A</option>
<option value="['Name B', '2414']">2414 - Name B</option>
<option value="['Name C', '2415']">2415 - Name C</option>
</select>
</form>
But I don't know how to get the array values and populate the two fields one with Code and the other with Name.
Online: http://jsfiddle.net/zm3nX/
I tried since now to change
form1.elements['Code'].value = this.options[this.selectedIndex].value
to
form1.elements['Code'].value = this.options[this.selectedIndex].value[0]
and to
form1.elements['Code'].value = this.options[this.selectedIndex[0]].value
but with no luck.
Thanks for any help.

Have you considered using data attributes instead?
Code: <input type="text" id="foo-code" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" id="foo-name" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" id="foo-list">
<option data-name="Name A" data-code="2413">2413 - Name A</option>
<option data-name="Name B" data-code="2413">2413 - Name B</option>
<option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>
and glue things together:
var select = document.getElementById("foo-list");
var code = document.getElementById("foo-code");
var name = document.getElementById("foo-name");
select.addEventListener('change', function(event) {
code.value = this.getAttribute("data-code");
name.value = this.getAttribute("data-name");
}, false);

You can do something like:
<script>
function updateValues(el) {
var form = el.form;
var v = el.value;
v = v.replace(/^\[\'|\'\]$/g,'').split("', '");
form.Code.value = v[1];
form.Name.value = v[0];
}
</script>
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" size="32" readonly> <br>
Name: <input type="text" name="Name" size="32" readonly> <br>
<select class="paselect" onchange="updateValues(this);">
<option value="['Name A', '2413']">2413 - Name A
<option value="['Name B', '2413']">2413 - Name B
<option value="['Name C', '2413']">2413 - Name C
</select>
</form>
Note that in IE if the user navigates the options using the cursor keys, an onchange event will be dispatched every time they move focus to a different option. Other browsers will wait for an option to actually be chosen with tab or space (depending on the browser).

Yeah I'd take an approach similar to the way Angular does this - using jquery with rodneyrehm's example:
<select class="paselect" id="foo-list">
<option data-name="Name A" data-code="2413">2413 - Name A</option>
<option data-name="Name B" data-code="2413">2413 - Name B</option>
<option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>
$('#foo-list').change(function() {
var opt = $(this.options[this.selectedIndex]);
var name = opt.attr('data-name');
var code = opt.attr('data-code');
$('#status').text('Name: ' + name + ', Code: ' + code);
});
http://jsfiddle.net/b9chris/mbSLB/
This avoids the potentially flimsy regex; strings you store and what to escape when become simpler to consider and error check.
The data- prefix is just there to comply with the HTML5 spec, but the truth is you can make up whatever attribute names you like - so if you were generating this HTML on the server and wanted to keep it short you could even use a= and b=.

Try this
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="getValue(this.value);">
<option value="Name A-2413">2413 - Name A</option>
<option value="Name B-2413">2413 - Name B</option>
<option value="Name C-2413">2413 - Name C</option>
</select>
</form>
<script>
function getValue(val){
var myval=val.split('-');
form1.elements['Code'].value=myval[1];
form1.elements['Name'].value=myval[0];
}
</script>

Use this code.
<script>
function setdata(selectvalue, selecttext){
form1.elements['Code'].value = selectvalue;
form1.elements['Name'].value = selecttext;
}
</script>
<form action="action.php" method="post" name="form1" id="form1">
Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" onchange="setdata(this.value,this.options[this.selectedIndex].text)">
<option value="['Name A', '2413']">2413 - Name A</option>
<option value="['Name B', '2414']">2414 - Name B</option>
<option value="['Name C', '2415']">2415 - Name C</option>
</select>
</form>
Hope it helps to you.