We Keep Coding

Select option tag call in javascript function

good morning everyone. I have this form in which there is this select tag and the various input fields.
<form class="membership-form webform" name="CreaUtente"
action="CreaUtente" onsubmit="document.required()" method="post"
role="form">
<!-- VALORI UTENTE -->
<h6 class="modal-title" id="membershipFormLabel">Dati utente</h6>
<select name="select" class="form-control" hidden required>
<%
for (int j = 0; j < utenti.size(); j++) {
%>
<option id="list">
<%=utenti.elementAt(j).getUsername().toString()%>
</option>
<%
}
%>
</select>
<input type="text" class="form-control" name="nome"
placeholder="Nome" required> <input type="text"
class="form-control" name="cognome" placeholder="Cognome"
required> <input type="text" class="form-control"
name="email" placeholder="email"> <input type="date"
class="form-control" name="data" placeholder="data di nascita"
required>
<input type="text" class="form-control"
name="username" id="user" onkeyup="return Control()" placeholder="codice fiscale" required>
<p id="alert">warning</p>
<input
type="password" class="form-control" name="password"
placeholder="Password" required><input type="text"
class="form-control" name="numero"
placeholder="numero di telefono">
<button type="submit" class="form-control" id="submit-button"
name="Accedi"
style="background-color: #343a40 !important; color: white !important">Crea</button>
</form>`
I would like to make a function in javascript to check that the value I write in the "username" field is not already present in the select tag. How could I do? I tried this but it doesn't work.
`function Control(){
var username = document.getElementById("user");
var list = document.querySelectorAll("list");
var alert = document.getElementById("alert")
for(let i=0; i < list.length; i++){
if(list[i].value === user.value){
alert.style.color='red';
}
else{
alert.style.color='green';
}
}
}`

specify # before id name with querySelectorAll as its an id.
var list = document.querySelectorAll("#list");
And add break when it find a match, as it is again setting green, after matching the next option.
if (list[i].value === user.value) {
alert.style.color = 'red';
break;
}

calculate the array of text field in jquery / javascript using jquery appendix section?

I've created a user interface using form fields using HTML and CSS. My backend programming in PHP. I have to input value one to many relationships such as one order have many passengers. So I created form fields like order and passengers can be inserted one-time into the database.
So A user able to fill the order data then they will add passenger's data using the jquery appendix section. if a user clicked the add button, the page will generate another passenger details form fields.
So My Problem is Passengers form field has some calculation field like
*. total_tax = yq + yr + tax_3 + tax_4
These are each passenger form field equation.
So I want to, how to calculate each individual passenger?
(When I type text automatically calculate the value to form field individually)
I'm using PHP's latest version 7.3.10. I already tried the calculation using javascript and jquery. It only works the first passenger form fields. It doesn't work others passenger (If I added 10 passengers that only works first passenger).
So I want to calculate all passengers form fields individually using javascript or jquery keyup event or whatever?
order.php:
<form action="includes/exchange-order.inc.php" method="post">
<div id="main_div" class="main_sec_div">
<button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc()" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc()" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
<br />
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
</div>
</form>
<script>
$(document).ready(function() {
var i = 0;
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `<div id="sub_div${i}" class="second-div">
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc()" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc()" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
<br />
</div>`;
$('#main_div').append(html);
});
// remove button
$(document).on('click', '.remove', function(e) {
var remove_btn_id = $(this).attr('id');
$('#sub_div' + remove_btn_id).remove();
i--;
console.log('Remove', i);
});
});
</script>
tex_calc.js:
//Total Tax[Tax - 3, Tax - 4]
function calc(obj) {
var tax_3 = 0;
var tax_4 = 0;
var total_tax = 0;
var e = obj.id.toString();
if (e == 'tax_3') {
tax_3 = Number(obj.value);
tax_4 = Number(document.getElementById('tax_4').value);
total_tax = Number(document.getElementById('total_tax').value);
}
else if (e == 'tax_4') {
tax_3 = Number(document.getElementById('tax_3').value);
tax_4 = Number(obj.value);
total_tax = Number(document.getElementById('total_tax').value);
}
else if (e == 'total_tax') {
tax_3 = Number(document.getElementById('tax_3').value);
tax_4 = Number(document.getElementById('tax_4').value);
total_tax = Number(obj.value);
}
// Total Tax
total_tax = tax_3 + tax_4;
document.getElementById('total_tax').value = total_tax.toFixed(2);
}
So I expect to calculate all passengers form fields individually using javascript or jquery keyup event or whatever?
how to calculate each passenger individually?

I found my question's answer that 100% worked.
Order.php :
<form action="includes/exchange-order.inc.php" method="post">
<div id="main_div" class="main_sec_div">
<button style="margin:1rem 1rem 0 0;" type="button" name="add" id="add" class="btn btn-success btn-sm add"><i class="fas fa-plus"></i></button>
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_30" onkeyup="calc(this)" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_40" onkeyup="calc(this)" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax0" value="0.00" required>
<br />
</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
</form>
<script>
$(document).ready(function() {
var i = 0;
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `<div id="sub_div${i}" class="second-div">
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
<br />
<br />
<label for="validationCustom04">Tax-3 (0.00)</label>
<input name="tax_3[]" type="number" step=".01" class="form-control form-control-sm" id="tax_3${i}" onkeyup="calc(this)" required>
<br />
<label for="validationCustom03">Tax-4 (0.00)</label>
<input name="tax_4[]" type="number" step=".01" class="form-control form-control-sm" id="tax_4${i}" onkeyup="calc(this)" required>
<br />
<label for="validationCustom04">Total Tax (0.00)</label>
<input style="background:#ccc;" name="total_tax[]" type="number" step=".01" class="form-control form-control-sm" id="total_tax${i}" value="0.00" required>
<br />
</div>`;
$('#main_div').append(html);
});
// remove button
$(document).on('click', '.remove', function(e) {
var remove_btn_id = $(this).attr('id');
$('#sub_div' + remove_btn_id).remove();
i--;
console.log('Remove', i);
});
});
</script>
tex_calc.js file coding:
//Total Tax[YQ, YR, Tax - 3, Tax - 4]
var tax_3 = [];
var tax_4 = [];
var total_tax = [];
function calc(obj) {
var e = obj.id.toString();
if (e == 'tax_3' + i) {
tax_3[i] = Number(obj.value);
tax_4[i] = Number(document.getElementById('tax_4' + i).value);
total_tax[i] = Number(document.getElementById('total_tax' + i).value);
}
else if (e == 'tax_4' + i) {
tax_3[i] = Number(document.getElementById('tax_3' + i).value);
tax_4[i] = Number(obj.value);
total_tax[i] = Number(document.getElementById('total_tax' + i).value);
}
else if (e == 'total_tax' + i) {
tax_3[i] = Number(document.getElementById('tax_3' + i).value);
tax_4[i] = Number(document.getElementById('tax_4' + i).value);
total_tax[i] = Number(obj.value);
}
// Total Tax
total_tax[i] = Number(tax_3[i] + tax_4[i]);
// console.log('Total ', total_tax[i]);
document.getElementById('total_tax' + i).value = total_tax[i].toFixed(2);
}
}

Add elements on click on dynamically generated <a> tag with dynamic id

I have a form with a textarea & a text box in 3 cols in a row, I can add more textbox on click, add this row dynamically on click event.
I've done create this row dynamically on click event, but I can't add textbox on click in the dynamically created row.
Can anyone help me with this?
Also if anything is missing in my code & my approach to this, feel free to suggest another way to do this.
I'm using jQuery and Bootstrap.
Here is a JSFiddle
var count = 3;
$(document).on('click', '#addpv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addpvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addprvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
var count = 3;
$(document).on('click', '#addprmv1', function () {
var appendTxt = "<div class='form-group'><input type='text' class='form-control m-b-10' placeholder='Parameter Value' name='para_ans1[]' id='para_ans" + count + "'><small class='form-text'><a href='javascript:void(0);'id='removemanager'>Remove</a></small></div>"
$("#addprmvdynamic").append(appendTxt);
count++;
console.log(count)
});
$(document).on('click', '#removemanager', function (e) {
$(this).closest("div").remove();
});
$(document).ready(function () {
var max_fields = 30; //maximum input boxes allowed
var wrapper = $("#dynamic"); //Fields wrapper
var add_button = $("#addparas1"); //Add button ID
var x = 1;
var pq = 3;
var pa = 3;
var pp = 3;
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
pq++;
pa++;
pp++;
var $newSelects = $('<div class="row"><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3"> <small>Add parameter values</small> <div id="addpvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3"> <small>Add parameter values</small> <div id="addprvdynamic"> </div></div></div><div class="col-md-4"> <div class="form-group"> <textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea> <input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2"> <input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3"> <small>Add parameter values</small> <div id="addprmvdynamic"> </div></div></div>Remove</div>')
wrapper.append($newSelects);
console.log(pq);
console.log(pa);
console.log(pp);
}
});
$(wrapper).on("click", "#remove-pararow", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12"><label>Create Parameters</label></div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn1" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans1[]" id="pv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans1[]" id="pv3">
<small>Add parameter values</small>
<div id="addpvdynamic">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn2" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans5[]" id="prv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans5[]" id="prv3">
<small>Add parameter values</small>
<div id="addprvdynamic">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<textarea type="text" name="parameter[]" parsley-trigger="change" required placeholder="Parameter" class="form-control m-b-10" id="pn3" rows="2"></textarea>
<input type="text" class="form-control m-b-10" required placeholder="Parameter Value" name="para_ans9[]" id="prmv1">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv2">
<input type="text" class="form-control m-b-10" placeholder="Parameter Value" name="para_ans9[]" id="prmv3">
<small>Add parameter values</small>
<div id="addprmvdynamic">
</div>
</div>
</div>
<div class="col-md-12">
Add more
</div>
</div>
<div class="" id="dynamic">
</div>

Your Code is a mess and an excellent example of so many things you can go wrong in js but still achieve a kind of working result.
I guess you need to dig a bit more into how javascript is parsed and when which code will execute in which context, for example your multiple var count definitions are sensless and as far as i can see you dont need the count at all.
But i wont dive into all those errors,
I thing what you are conceptionally doing wrong is adding dynamic things and write static code for it.
Your job would be to keep everthing generic that is generic.
To give you a quickstart, if you have the following markup:
<div class="col-md-4">
<div class="form-group">
<input name="para_ans1[]" id="para_ans1_1" type="text" class="form-control m-b-10" required placeholder="Parameter Value" >
<input name="para_ans1[]" id="para_ans1_2" type="text" class="form-control m-b-10" placeholder="Parameter Value" >
<input name="para_ans1[]" id="para_ans1_3" type="text" class="form-control m-b-10" placeholder="Parameter Value" >
<a data-id="ans1" class="addParameterValue" href="javascript:void(0);"><small>Add parameter values</small></a>
<div class="dynamic" data-id="ans1">
</div>
</div>
</div>
.....
you would only need need two generic functions for adding and removing
$(document).on('click', '.addParameterValue', function () {
var current_id = $(this).attr('data-id');
// use the actual amount of dynamic added inputs in the _current_ form-group
var current_count = $(this).parent().find('input').length;
// for readability i splitted up the appendTxt, look how everything necessary is parametrized
var inp_txt = " <input name='para_'"+current_id+"[]' type='text' class='form-control m-b-10' placeholder='Parameter Value' >";
// and the removelink has a class now too and referrences the input above
var rmv_lnk = "<a data-removeid='para_"+current_id+"_"+current_count+"' class='removemanager' href='javascript:void(0);' >Remove</a>"
var appendTxt = "<div class='form-group' id='para_"+current_id+"_"+current_count+"'>"+inp_txt+"<small class='form-text'>"+rmv_lnk+"</small></div>";
// finally add it to the current row´s dynamic container
$('.dynamic[data-id="'+current_id+'"]').append(appendTxt);
});
// and your generic remove function
$(document).on('click', '.removemanager', function () {
var remove_id = $(this).attr('data-removeid');
$('#'+remove_id).remove();
});
so you this way would be the generation and removal of input generic, to add more rows you have to adapt this pattern but further investigation is your part

How to shift values from one div panel to other in jquery?

In a Form, there are multiple div Panels
<form>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
</form>
Requirement:
If user left panel1 blank and entered text to panel 2;
then we want to shift all values from panel 2 to panel 1; during final submission of form.
In real use case we have 10 such panels.
Fiddle: https://jsfiddle.net/rop5f0d6/

Try this.
var inputsValue = [];
$("button").click(function () {
$(".panel2 input").each(function () {
inputsValue.push(this.value);
});
$(".panel1 input").each(function (i, value) {
$(this).val(inputsValue[i]);
});
inputsValue = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>

This will only move the data from panel 2 to panel 1 if the first panel is left blank (what I read from the requirements).
Also it wipes panel 2 data to prevent duplicate form data being posted. From your question I think this is what you are aiming for?
Here is how you can implement this functionality in jQuery:
$("button").click(function(){
var moveData = true, formvalues = [];
$(".panel1 input").each(function(e, field){
if( field.value != '' ){
moveData = false;
return false;
}
});
// only move data if first panel is blank
if( moveData ){
$(".panel2 input").each(function(){
formvalues.push( this.value );
this.value = '';
});
$(".panel1 input").each(function (i) {
this.value = formvalues[i];
});
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
I've also written the solution in vanilla JS for your reference (possibly useful) as plain JS is more efficient in performance.
var submitBtn = document.getElementsByTagName("button")[0];
submitBtn.addEventListener("click", function(){
var moveData = true,
formvalues = [],
panel1 = document.getElementsByClassName("panel1"),
panel1Fields = panel1[0].getElementsByTagName("input"),
panel2 = document.getElementsByClassName("panel2"),
panel2Fields = panel2[0].getElementsByTagName("input");
for(var i=0; i < panel1Fields.length; i++){
if( panel1Fields[i].value != '' ){
moveData = false;
return false;
}
}
// only move data if first panel is blank
if( moveData ){
for(var i=0; i < panel2Fields.length; i++){
formvalues.push( panel2Fields[i].value );
panel2Fields[i].value = '';
}
for(var i=0; i < panel1Fields.length; i++){
panel1Fields[i].value = formvalues[i];
}
}
});
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<button>Send</button>

Prevent elements from clearing after failed validation on nested .NET master page

The validation works perfectly, but if the validation fails, the form clears all data.
How can I validate the form without causing the user to have to re-enter all the data again? Due to the nature of the redirect, I need the html form to render exactly as it does now.
HTML:
<div class="formHalf">
<label for="first_name">
First Name*</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="last_name">
Last Name*</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="company">
Company</label>
<input id="company" maxlength="40" name="company" size="20" type="text" class="text" />
</div>
<div class="formWhole">
<label for="address">
Address</label>
<input id="address" maxlength="80" name="address" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="city">
City</label>
<input id="city" maxlength="40" name="city" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="state">
State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="zip">
Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" class="text" />
</div>
<div class="formHalf">
<label for="country">
Country</label><input id="country" maxlength="40" name="country" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="email">
Email*</label><input id="email" maxlength="80" name="email" size="20" type="text"
class="text" />
</div>
<div class="formHalf">
<label for="phone">
Phone*</label><input id="phone" maxlength="40" name="phone" size="20" type="text"
class="text" />
</div>
<div class="formWhole">
<label for="description">
Description</label><textarea name="description"></textarea>
</div>
<div class="formWhole">
<input type="submit" name="formSubmit" id="formSubmit">
</div>
</div>`
SCRIPT:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#formSubmit").click(function () {
for (i = 0; i < 1; i++) {
var isValid = validateForm();
if (isValid) { }
$("form").attr("action", "https://www.other web site that redirects back to my page after logging form");
}
});
});
function validateForm() {
var message = "";var message2="";
var elements = new Array("first_name", "last_name", "phone", "email");
var userElement = new Array(" First Name", "Last Name", "Phone Number", "E-Mail Address");
for (i = 0; i < elements.length; i++)
{
var x = document.getElementById(elements[i]).value;
if (x == null || x == "") {
if (message != "")
message += ", "; message += userElement[i];
}
if (i == 3 && x != null && x != "") {
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
message2 += "The email address is not valid.";
}
}
if (i == 2 && x != null && x != "") {
var checknumber = x.replace(/[^0-9]/g, '');
if (checknumber.length != 10 && checknumber.length != 11) {
message2 += "The phone number is needs to be in format 123-456-7890 or 1-234-567-8901.";
}
}
// email and phone validation
}
if (message != "" || message2 != "") {
if (message != "") {
message += " must be filled out.";
}
message += message2;
alert(message);
return false;
}
return true;
}
</script>`

The easiest way is just to catch the POST or GET value's on the server's side. When using PHP for example you can refill the First name by adding the following the corresponding input-tag:
value="<?=$_POST['first_name']?>"
You should change the POST tot GET if it's a get-action. Don't forget to additionally validate at the server's side.

if the extension of your page is aspx then add the runat="server" attribute to each data input tag and then you will have the data persisted !