Member Avatar for chris.aaker

I simply want to input some from data into my javascript library. The form has the name "signup" and a link has on onclick property to call the "interface_signup()" function in javascript shown below. This is obviously a ridiculous way to do it, but my attempts to use "this" or better ways have not worked. What is the best way to pass this form data in so that I can send it to another fuction in the form of an object? Thanks in advance

var path="interface_login.php"
	var key1 = document.signup.fname.name
	var key2 = document.signup.lname.name
	var key3 = document.signup.email.name
	var key4 = document.signup.pass.name
	var value1 = document.signup.fname.value
	var value2 = document.signup.lname.value
	var value3 = document.signup.email.value
	var value4 = document.signup.pass.value
	var param1 = {} 
	param1[key1] = value1
	param1[key2] = value2
	param1[key3] = value3
	param1[key4] = value3
	ajax_post_two(path, param1);
  • 5 Contributors
  • 17 Replies
  • 202 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by peter_budo
Member Avatar for danishbacker

This is a good method i think.
What is the problem / error?
Are doing this for facebook application?

or the data is sending but you are not able to receive it ?

Member Avatar for chris.aaker

It just seems realy repetetive...I thought there would be a way to loop through the input elements?

Member Avatar for danishbacker

This is a good method i think.
What is the problem / error?
Are doing this for facebook application?

or the data is sending but you are not able to receive it ?

Please ignore my previous post :) sorry for that.

Sorry I didnt read it fully, I only checked the last line :)

you can access form elements as array, like

var val = document.forms[0].elements[0].value;

this you can also do in a loop.

Member Avatar for Shanti C

or simply pass this document.signup.elements object to second method.
for clearance chec out the following:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function first_method()
{
	alert(document.test.elements);
	second_method(document.test.elements);
}
function second_method(list)
{
	alert(list.length);
	for(i=0;i<list.length;i++)
	{
		alert(list[i].name+":"+list[i].value);
	}
}
</script>
</head>
<body>
<form name="test" method="post" action="">
<select name="htmlcombo" id="htmlcombo" >
 <option  value="0">Select</option>
    <option  value="1">Text1</option>
    <option  value="2">Text2</option>
    <option  value="3">Text3</option>
</select>
<br>
<input type="text" name="test1">
<br>
<br>
<input type="submit" name="submit" value="Submit" onclick="first_method();"> 

</form>
</body>
</html>
Member Avatar for chris.aaker

OK. Thanks a bunch. After i verify this works all mark it as solved.

Member Avatar for chris.aaker

OK thanks again. That works great. Would it be better to pass the variabels in from the html using something like first_method(this.form). Do you know if there is any extra overhead associated with using DOM from with in the javascript. In general which was is better...via the DOM as you showed above or passing a parameter in to the first_method? I'm happy/satisifed with the current answer but figured I'd ask an opitmization question in case you knew it off the top of your head.

Member Avatar for Shanti C

i didn't get you clearly.

Member Avatar for chris.aaker

I call a my .js file and have all my code in there. If the DOM can be accessed from with in the javascript file via document.form_name.elements why have I seen some scripts that pass in a portion of the DOM using "this" or "this.form" or similar, i.e. first_method(this.form).

There are two ways to do this type of thing. Which one is better?

Thanks again.

Member Avatar for chris.aaker

I call a my .js file and have all my code in there. If the DOM can be accessed from with in the javascript file via document.form_name.elements why have I seen some scripts that pass in a portion of the DOM using "this" or "this.form" or similar, i.e. first_method(this.form).

There are two ways to do this type of thing. Which one is better?

Thanks again.

Here is my code to tranfer data to my ajax functions. Very efficient I think (as long as a parameter pass would not be more efficient)

function interface_signup()  
	{ 
	var path="interface_login.php"
	var list = document.myform1.elements
	var param1=""
	for(i=0;i<list.length;i++)	
		{		
		param1 += list[i].name+"="+list[i].value+"&"; 
		}
	param1 = param1.slice(0, -1)
	ajax_post_two(path, param1)
	}
Member Avatar for Taywin

OK, your way is called 'hard-coded'. In other words, it is not flexible and your function is expecting the form element with name 'myform1'. If you pass in an argument of the DOM form to the function, it is much more flexible to deal with because the function can be used with other form elements which have similar functionality or structure regarding their name.

function interface_signup(formElement) { 
  var path="interface_login.php"
  var list = formElement.elements
  var param1=""
  for(i=0;i<list.length;i++) {		
    param1 += list[i].name+"="+list[i].value+"&"; 
  }
  param1 = param1.slice(0, -1)
  ajax_post_two(path, param1)
}

Remember that you need to pass the form element to the function using 'this' or something like that depending on where the function is being called in the HTML.

Edited by Taywin because: n/a
Member Avatar for chris.aaker

Best practice according to "Headfirst AJAX by Oreilly" is to separate the javascript from the HTML as much as possible meaning -
1. interface_signup() should be registered in the javascript via an initialization function when the page loads. (no mention of it in the HTML)
2. correlatively, there is no need to use "this" ( I think )

Member Avatar for Taywin

1.You should separate javascript is correct. You could do it by putting them into onload, but that doesn't mean you could actually put it in an external file instead and then link it inside the header. The separation is actually more for readability.
2.In my post, you need "this" to make the code I gave work.

Member Avatar for chris.aaker

It seems the tradeoff is this -
1. When passing a value in you must call the function from the HTML and break the readability best practice. However you gain the ability to use the function for multiple scenarios.
2. When accessind directly from the DOM it is hard coded and though easier to read less "portable" to other uses.

Seems best case would be to register the function in an initialization and access the element that owns it using "this" with no parameter passing.

function interface_signup()
var list = this.elements

Here you get the best of both worlds.

Right now my code does not work. I have a link to my .js file and when I call

window.onload = init_page();

function init_page()
	{
	document.getElementById("signup").onclick = interface_signup;
	}

for some reason

document.getElementById("signup").

is errored as "null or not an object" by IE 8.

Currently stuck here.

Member Avatar for chris.aaker

Got my init function working. . . I was passing in a function instead of a function reference. Next I will try accessing this from an "inlined" function

Member Avatar for Taywin

1. When passing a value in you must call the function from the HTML and break the readability best practice. However you gain the ability to use the function for multiple scenarios.

Huh? You are arguing with non-sense reasoning. Did I pass in a function in my sample script? I passed in a DOM object which is the current element or the event caller element. What are you talking about? Also, regardless you put your function onload, in an external Java, or place functions inside the header, you WILL call it in the HTML. The only difference in use is that the function is being called via element's event listener or in script tags. If you are calling functions from an event listener, it gains exactly the same readability -- all function definitions are not inside HTML when you look at the source or DOM!

2. When accessind directly from the DOM it is hard coded and though easier to read less "portable" to other uses.

What are you smoking here? When accessing DOM directly the way I use 'this' is NOT hard-coded. It is actually better than passing an element ID because the function knows exactly what element it is dealing with. I didn't even use document.element which is a real hard-coded. Please read more before answer something not true. If you don't really understand what the concept is, ask. If you are going to come up and show your attitude by talking down on me who was trying to help you, then I would just let you be.

Look at the code below. The JavaScript can be anywhere in the page, but one could easily put them inside the 'head' tag. Also, you think the #1 and #2 are hard-coded? Think again. Hardcoded is actually the 3rd one. Or simply look at your own post in page 1 last post. That's real hard coded because you use document.myform1.elements which is what hard-coded is.

// script part
function passing1(divID) {
  var el = document.getElementById(divID)
  if (el) { alert(el.innerHTML) }
}
function passing2(divElem) {
  if (divElem) { alert(divElem.innerHTML) }
}
function passing3() {
  alert(document.whatever.hardcoded.innerHTML)
}

// html part
<form name="whatever">
 <div id="div1" onclick="passing1('div1')">Div number 1</div>
 <div onclick="passing2(this)">Div number 2</div>
 <div name="hardcoded" onclick="passing3()">Div number 3</div>
</form>
Edited by Taywin because: n/a
Member Avatar for chris.aaker

at Taywin : Your comments are unwelcome as they are breaking the community policy for Daniweb. Please don't post on this thread any more.

Member Avatar for peter_budo

at Taywin : Your comments are unwelcome as they are breaking the community policy for Daniweb.

There is no breaking of forum rules here. If you do not want to listen to his advice then ignore it, same goes for Taywin, if advice is ignored it is up to you if you want to continue.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.