Hi everyone, I'm hoping someone can help me learn the right way to do
this. Its experimental for me at this point. Example code is at the
bottom.
So what I'm attempting to do is to do input form validation by loading
a function which self-assembles an object that has its properties set
as the ID names of the inputs in a given form. The values of those
inputs are then assigned as the values of those properties. In this
way, you can pull all of the data in a form at once and iterate
through the object to do your data checks, validation, etc. Since the
properties correspond to the ID names, its easy to dynamically
manipulate the DOM based on the structure of the object.
In my example code below, I have a version that works correctly but it
is commented out. It is setup so that the properties are predefined,
then sets their values. It works, but its not the more dynamic self
assembling one that I want.
The second function that is not commented out was my (poor) attempt at
building a working one. Basically, given a form ID, we loop through
all inputs in the form and retrieves their IDs and values. The problem
I have is that I don't know how to create new properties for the
"check" function based on the IDs of the inputs.
Thank you!
<script type="text/javascript">
$(document).ready(function(){
//standard method that works
//check = function(){
//this.user = $('#user').attr('value');
//this.pass = $('#pass').attr('value');
//this.one = $('#one').attr('value');
//this.two = $('#two').attr('value');
//}
//attempted jquery version
check = function(){
$('#form1 :input').each(function(obj){
obj.$(this).attr('id') = $(this).attr('value');
});
}
$('#clicker').click(function(){
c = new check();
alert( c.user+" | "+c.pass+" | "+c.one+" | "+c.two );
});
});
</script>
<form id="form1">
<h4>user</h4>
<input type="input" id="user"/>
<h4>pass</h4>
<input type="input" id="pass"/>
<h4>one</h4>
<input type="input" id="one"/>
<h4>two</h4>
<input type="input" id="two"/>
</form>
<input type="button" id="clicker" value="Click"/>
