JQuery serialize on form is EMPTY (ajax/post/get)

 Hi All,

I had several times a problem, that the collected data by jQuery API's serialize() or serializeArray() was empty, although the inputs were not empty.

Follow these checkups to by pass the problem.

1] when the input don't name attribute the result will be empty.

<form id="form1">
        <input type="text" value="test value">
        <button>submit</button>
</form>

//$('#form1').serialize()  ==> "" (empty)

SOLUTION:

<form id="form1">
        <input type="text" value="test value" value="ANYNAME">
        <button>submit</button>
</form>

//$('#form1').serialize()  ==> "ANYNAME=test+value" 

Free Javascript Obfuscator Online

Protects JavaScript code from stealing/reading and shrinks its size.

Free Javascript Obfuscator is a professional tool for obfuscation of javascript. It Converts JavaScript source code into scrambled and completely unreadable form, preventing it from analyzing and theft.
Visit: http://freejsobfuscator.com/

u can choose if to process by your will: parameters / functions / strings / new lines / indentations and it is 100% free!

Javascript | clear input file value = file url

Included javascript function for clearing INPUT FILE contents!
I did it for disable uploading NON excel file (.xls).
(a message should be include...)

The CODE for ASP.NET:

<asp:FileUpload ID="txtFile" runat="server"
Enabled="true"
onchange="if (this.value.endsWith('.xls') == false) { this.parentNode.innerHTML = this.parentNode.innerHTML; }" />

The CODE HTML:

<input type="file" onchange="if (this.value.endsWith('.xls') == false) { this.parentNode.innerHTML = this.parentNode.innerHTML; }" style="width:216px;" />

Enjoy...
:)

Javascript html date control (validation)

Here is a sample code for an html input date control include DATE validation!
I searched a lot for such method for integration with PHP page but was little difficult.

Here is the HTML CODE:

<input id="inputDate1" name="Field1" value="21/07/2006" type="text" onblur="validateDate(this, '/')" maxlength="10">

<button onclick="setTodayDate(this.previousSibling, '/')">today</button>

Here is the JAVASCRIPT CODE:

function validateDate(p_inputObj, delim)
{
var text = p_inputObj.value;
var errorMsgs = "Following error(s) :\n";
var isDateCorrect = true;

var delim1 = text.indexOf(delim);
var delim2 = text.indexOf(delim, delim1+1);
if (delim2 <= delim1)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Must be in format of dd/mm/yyyy like (21/09/2008)\n";
}
else
{
var day = parseInt(text.substring(0, delim1), 10);
var splitter1 = text.substring(delim1, delim1+1);
var month = parseInt(text.substring(delim1+1, delim2), 10);
var splitter2 = text.substring(delim2, delim2+1);
var year = parseInt(text.substring(delim2+1), 10);

if (isNaN(day) || isNaN(month) || isNaN(year))
{
isDateCorrect = false;
if (isNaN(day)) { errorMsgs = errorMsgs + "- Day not in correct format!\n"; }
if (isNaN(month)) { errorMsgs = errorMsgs + "- Month not in correct format!\n"; }
if (isNaN(year)) { errorMsgs = errorMsgs + "- Year not in correct format!\n"; }
}
else
{
if (day<1)
{
errorMsgs = errorMsgs + "- Day must be between grater than 0\n";
isDateCorrect = false;
}

if (month>12 || month<1)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Month must be between 01 to 12\n";
}
else
{
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12 )
{
if (day>31)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 31\n";
isDateCorrect = false;
}
}
else if(month==2)
{
// is leap year
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
{
if (day>29)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 29\n";
isDateCorrect = false;
}
}
else
{
if (day>28)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 28\n";
isDateCorrect = false;
}
}
}
else
{
if (day>30)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 30\n";
isDateCorrect = false;
}
}
}

if (year<2000)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Year not valid. must be more than 2000!\n";
}
else if (year>9999)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Year must be 4 digits!\n";
}
}
}

if (isDateCorrect == true)
{
var newStr = (day<10 ? '0' : '') + day + delim +
(month<10 ? '0' : '') + month + delim +
year; // +" "+hour+":"+minute+" "+AMPM;
p_inputObj.title = '';
var date = new Date();
date.setFullYear(year, month-1, day);
p_inputObj.dateVal = date;
p_inputObj.value = newStr;
p_inputObj.style.backgroundColor='#FFFFFF';
return true;
}
else
{
//alert(errorMsgs);
errorMsgs = errorMsgs.substring(0, errorMsgs.length-1);
p_inputObj.dateVal = null;
p_inputObj.title = errorMsgs;
p_inputObj.style.backgroundColor='#ffaaaa';
p_inputObj.focus();
return false;
}
}

function setTodayDate(p_inputObj, p_delim)
{
var dtNow = new Date();
var day = dtNow.getDate();
var month = dtNow.getMonth() + 1;
var year = dtNow.getFullYear();
p_inputObj.value = (day<10 ? '0' : '') + day + p_delim +
(month<10 ? '0' : '') + month + p_delim +
year;
}

Date format if dd/MM/yyyy but it can also be MM/dd/yy or yyyy!
Enjoy... :)

Html (& javascript) Slider example

Here is an example for html slider - Only using HTML & Javascript.
Nice animated slider (good looking animation)

Code:

<html>
<head>
<style>
.spltr {width: 4px; background-color: firebrick;}
</style>
<script language="javascript" type="text/javascript">
function scrollSpeedAdd(obj,step)
{
scrollStop();
scrollAdd(obj, scrollAdd.step + step);
}
function scrollAdd(obj,step)
{
scrollAdd.elem = document.getElementById('MainSlideDiv');
if(scrollAdd.elem)
{
scrollAdd.step = step;
scrollAdd.I = window.setInterval(startScroll,10);
}
}
function startScroll()
{
scrollAdd.elem.scrollLeft = scrollAdd.elem.scrollLeft + scrollAdd.step;
}
function scrollStop()
{
window.clearInterval(scrollAdd.I);
}
</script>
</head>
<body
<b>Set your mouse over the arrows...</b><br /><br />
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="khaki">
<tr style="text-align: center;">
<td width="30" onmouseout="scrollStop();" onmouseover="scrollAdd(this,-2)" onclick="scrollSpeedAdd(this,-1)"> << </td>
<td width="640" align="center">
<div style="overflow:hidden; width:630; height:55;" id="MainSlideDiv" dir="rtl">
<table width="100%" style="text-align:center" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Test 1111 </td>
<td class="spltr"> </td>
<td>Test 2222 </td>
<td class="spltr"> </td>
<td>Test 3333 </td>
<td class="spltr"> </td>
<td>Test 4444 </td>
<td class="spltr"> </td>
<td>Test 5555 </td>
<td class="spltr"> </td>
<td>Test 6666 </td>
<td class="spltr"> </td>
<td>Test 7777 </td>
<td class="spltr"> </td>
<td>Test 8888 </td>
<td class="spltr"> </td>
<td>Test 9999 </td>
<td class="spltr"> </td>
<td>Test AAAA </td>
<td class="spltr"> </td>
<td>Test BBBB </td>
<td class="spltr"> </td>
<td>Test CCCC </td>
<td class="spltr"> </td>
<td>Test DDDD </td>
<td class="spltr"> </td>
<td>Test EEEE </td>
<td class="spltr"> </td>
<td>Test FFFF </td>
<td class="spltr"> </td>
</tr>
</table>
</div>
</td>
<td width="30" onmouseout="scrollStop()" onmouseover="scrollAdd(this,2)" onclick="scrollSpeedAdd(this,+1)"> >> </td>
</tr>
</table>
</body>
</html>

Javascript | Restrict number of open windows

Javascript Restrict number of open windows

here is a javascript code which allows:

• Check if window is open
• List open windows
• Manage 5 open windows (Any amount)
• Open restricted num. of windows.

function openWindowMAX5(p_url)
{
var win_I;
for(var i=0; i<5; i++)
{
win_I = window.open('', 'win_' + i);
if (win_I.document.location.href == 'about:blank')
{
window.status = 'win_'+i;
win_I = window.open(p_url, 'win_' + i);
break;
}
}
event.returnValue = false;
return false;
}

Used html code:
Open on new window

Tested on:

Working: IE7, CHROME 1.0.154

Not Working: Mozilla Firefox 3.0