Develop Reference

How to serialize a form in custom key/value pairs?

I need to serialize a form in a custom key/value pair format. This is how my HTML code looks like:
<form name="ltq_frm" id="ltq_frm">
<table class="table" id="licenses_to_quote">
<thead>
<tr>
<th>License ID</th>
<th>Quote ID</th>
<th>Agreement Type</th>
<th>Customer Site</th>
</tr>
</thead>
<tbody id="licenses_to_quote_body">
<tr data-id="96">
<td>
96
<input type="hidden" name="license_id" value="96">
</td>
<td>
<input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
<tr data-id="100">
<td>
100
<input type="hidden" name="license_id" value="100">
</td>
<td>
<input class="hidden-select2-100" type="hidden" name="quote_id" value="">
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
</tbody>
</table>
</form>
<button id="subm">
Click
</button>
And this is how I am serializing it:
$(function() {
$('#subm').click(function() {
var sA = $('#ltq_frm').serializeArray();
var s = $('#ltq_frm').serialize();
console.log(sA);
console.log(s);
});
});
This is "working" but I am getting an array of four values as output. I would like to get something like:
[
'license_id' => 'quote_id'
]
Using the example above:
[
96 => 249,
100 =>
]
The values above comes from the hidden elements on the form, those named as license_id and quote_id.
I was checking here but I couldn't get the idea in how to transform my values into the needed key/value pairs.
This is a jsFiddle I was working with in case you need it.
Note: this is a code in development so if you have a better suggestion or need to give me something different go ahead

You could manually map each row, get the two inputs, use the first as the key and the second as the value, like this
var result = $('#ltq_frm tbody tr').map(function() {
var inp = $('input', this), o = {};
o[inp.first().val()] = inp.last().val();
return o;
}).get();
FIDDLE

I get it. You need a custom code like this to do it:
var finalObj = { };
$.each(​$('form')​.serializeArray()​, function() {
finalObj[this.name] = this.value;
})​;
console.log(finalObj);
Snippet
var finalObj = { };
$.each($('form').serializeArray(), function() {
finalObj[this.name] = this.value;
});
console.log(finalObj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
<table class="table" id="licenses_to_quote">
<thead>
<tr>
<th>License ID</th>
<th>Quote ID</th>
<th>Agreement Type</th>
<th>Customer Site</th>
</tr>
</thead>
<tbody id="licenses_to_quote_body">
<tr data-id="96">
<td>
96
<input type="hidden" name="license_id" value="96">
</td>
<td>
<input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
<tr data-id="100">
<td>
100
<input type="hidden" name="license_id[]" value="100">
</td>
<td>
<input class="hidden-select2-100" type="hidden" name="quote_id[]" value="">
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
</tbody>
</table>
</form>
Update: To get your custom way, I need to still change it further. In your question, the code has some inconsistencies. Those I corrected are as follows:
license_id[] to license_id.
quote_id[] to quote_id.
Please follow one single convention.
var finalObj = { };
var lastLID = "";
$.each($('form').serializeArray(), function() {
if (this.name == "license_id")
lastLID = this.value;
else (this.name == "quote_id")
finalObj[lastLID] = this.value;
});
console.log(finalObj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
<table class="table" id="licenses_to_quote">
<thead>
<tr>
<th>License ID</th>
<th>Quote ID</th>
<th>Agreement Type</th>
<th>Customer Site</th>
</tr>
</thead>
<tbody id="licenses_to_quote_body">
<tr data-id="96">
<td>
96
<input type="hidden" name="license_id" value="96">
</td>
<td>
<input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
<tr data-id="100">
<td>
100
<input type="hidden" name="license_id" value="100">
</td>
<td>
<input class="hidden-select2-100" type="hidden" name="quote_id" value="">
</td>
<td>Percentage Support</td>
<td>Frito-Lay, Inc.</td>
</tr>
</tbody>
</table>
</form>

Loan Calculator Javascript Code Issue?

I am creating a loan calculator for my website with Javascript Code and the website is https://www.usawebcash.com/missouri-installment-loans. I am getting issues with the coding of this loan calculator in Javascript. I want help for this code and the code is following:
<script language="JavaScript">
<!--
function showpay() {
if ((document.calc.loan.value == null || document.calc.loan.value.length == 0) ||
(document.calc.months.value == null || document.calc.months.value.length == 0) ||
(document.calc.rate.value == null || document.calc.rate.value.length == 0)) {
document.calc.pay.value = "Incomplete data";
} else {
var princ = document.calc.loan.value
var term = document.calc.months.value
var intr = document.calc.rate.value / 1200
document.calc.pay.value = princ * intr / (1 - (Math.pow(1 / (1 + intr), term)));
}
// payment = principle * monthly interest/(1 - (1/(1+Interest of Month)*Months))
}
// -->
</script>
Calculate button. Clicking the Reset button will clear all values
<p>
<center>
<form name=calc method=POST>
<table width=60% border=0>
<tr>
<th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font>
</th>
<tr bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font>
</th>
</tr>
<tr>
<td bgcolor="#eeeee">Loan Amount</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=loan size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Loan Length in Months</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=months size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Interest Rate</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=rate size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Monthly Payment</td>
<td bgcolor="#eeaaaa" align=right><em>Calculated</em>
<input type=text name=pay size=10>
</td>
</tr>
<tr>
<td bgcolor="#aaeeaa" align=center>
<input type=button onClick='showpay()' value=Calculate>
</td>
<td bgcolor="#eeeeaa" align=center>
<input type=reset value=Reset>
</td>
</tr>
</table>
</form>
<font size=1>Enter only numeric values <br>
Non-numeric values will cause errors are not allowed
<p align="center"><font face="arial" size="-2">This free script provided by</font>
<br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font>
</p>

How to add date validation?

This is my form that I use to post data. All of it works just fine in terms of inputting. This is just for reference to my javascript validation form.
<form action= "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" name="input" id="input">
<br>
<table>
<tr>
<th>Animal Name</th>
<td><input type="text" name="ANM_NAME" id="ANM_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Owner Name</th>
<td><input type="text" name="OWN_NAME" id="OWN_NAME" maxlength="20"></td>
</tr>
<tr>
<th>Sign in</th>
<td><input type="date" name="SIGN_IN" id="SIGN_IN"></td>
</tr>
<tr>
<th>Medication</th>
<td><input type="text" name="MEDS" id="MEDS" maxlength="20"></td>
</tr>
<tr>
<th>Special Requirements</th>
<td><input type="text" name="SPEC" id="SPEC" maxlength="20"></td>
</tr>
<tr>
<th>Food</th>
<td><input type="text" name="FOOD" id="FOOD" maxlength="20"></td>
</tr>
<tr>
<th>Notes</th>
<td><input type="text" name="NOTE" id="NOTE" maxlength="20"></td>
</tr>
</table>
<br>
<input type="button" id="button" value="Submit">
</form>
Currently I have this for validation, on the button click it sets the var flag to true and then checks input type text to see if they have text, if they do it submits, if not it creates pop-up alert.
<!-- Checking if inputs are entered-->
<script>
$("#button").click(function(){
var flag=true;
// check all input values
$("input[type='text']").each(function(){
if( $(this).val()=="" ){
flag=false;
}
});
// submit the form
if(flag){
$("form#input").submit()
}else{
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
But it does not work for the date as it is using a different input type. How would I add the date input to this validation?

You can select more then one type of input using a delimiter:
<script>
$("#button").click(function() {
var flag = true;
// check all input values
$("input[type='text'],input[type='date']").each(function() {
if ($(this).val() == "") {
flag = false;
}
});
// submit the form
if (flag) {
$("form#input").submit()
} else {
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>

Javascript - Read textbox length

I am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.

You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}

check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;

alert(document.getElementById('txt_Password').value.length);

Keep submit button disabled until form is complete and confirming password

I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.
I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.
If you can find something that works. THANK YOU SO MUCH!!
Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id='register' value="Register"disabled='disabled'></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>

Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation
<script type="text/javascript">
function passwordConfirm() {
var confirmPass = document.getElementById("confirmpassid").value
if(pass != confirmPass) {
alert("Mismatching passwords");
}
}

Try not to use this but if you want you may give it a try (jQuery would be good)
var els=[];
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(i=0; i<inputs.length;i++)
{
if(inputs[i].type=='text' || inputs[i].type=='password')
{
if(inputs[i].name!='fname' && inputs[i].name!='lname')
{
inputs[i].onkeyup=check;
els.push(inputs[i]);
}
}
}
}
function check()
{
var isValid=true;
for(i=0; i<els.length;i++)
{
if(!els[i].value.length)
{
isValid=false;
break;
}
else isValid=true;
}
var reg=document.getElementById('register');
if(isValid && matctValidInputs()) reg.disabled=false;
else reg.disabled=true;
}
function matctValidInputs()
{
var re=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
var ps=document.getElementById('mypassword');
var cps=document.getElementById('myconfirmpassword');
var snum=document.getElementById('mysnumber');
var mail=document.getElementById('myemail');
if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
return true;
else return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}
Before you test the demo:
Password must be 6 characters and match with confirm password.
The Sigma Number must be a number and minimum 6 digits.
Email must match a valid email (very basic regex)
No alerts/notifications given.
DEMO.

just copy and paste my code.there might be few things you might wanna improve.If it is so,let me know
<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' && email!='')
{
document.getElementById("register").disabled=false;
}
else
document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
{
alert("password missmatches");
return false;
}
}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">
</td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id="register" value="Register" disabled='disabled' "></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>