Click to See Complete Forum and Search --> : How do I add events with parameters
Well, I finally figured out how to add an eventlistener to a dynamically created button the other day. Now a new issue has come up, and I'm curious if it has a solution.
What happens if I have a number of dynamically created buttons? Say that with each button is associated with a relevant textbox or something. When these are dynamically created (along with the textbox), they should have a click event added. However, the click event adds just the name of the handler.
Say I'd like the function to be: AddEvent(counter) and that the buttons had been named "button"+x where x is a steadily increasing counter.
So basically, is there either a way to send a parameter with an added event, and if not, is there any way to know which button sent the event once I'm in the actual AddEvent handler?
Thanks,
Mat
AdamBrill
08-09-2003, 05:29 PM
Hmm... I'm not quite sure what you want, but take a look at this:<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function button_clicked(element,text){
element.value+=text;
}
button_num=0;
function add_button(){
code="<textarea cols=10 rows=10 id="+button_num+"></textarea><input type=button value='Add Text' onclick=\"button_clicked(document.getElementById('"+button_num+"'),'"+button_num+"')\"><br>";
document.getElementById('added_buttons').innerHTML+=code;
button_num++;
}
</script>
</head>
<body>
<input type=button value="Add Button" onclick="add_button()">
<div id="added_buttons"></div>
</body>
</html>Let me know if that is even remotely what you where looking for. :D
Exuro
08-09-2003, 06:52 PM
Maybe you're looking for something like this:
<html>
<head>
<script type="text/javascript">
<!--
function something() {
alert("You clicked "+event.srcElement.name+"!");
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
for (i=0;i<10;i++) {
document.write('<input type="button" name="button'+i+'" value="button'+i+'" onclick="something()"><br>');
}
//-->
</script>
</body>
</html>
Seems to be working great so far, so I think it was exactly what I needed. I'm still trying to understand a couple parts of it (like why the variables are enclosed in plus signs), but I seem to be able to modify it to what i needed to do, and thats great.
Thanks again.
Exuro
08-09-2003, 07:07 PM
The variable is "enclosed" in plus signs because I'm sticking it in the middle of a string. So what I was doing was having the browser put the following in an alert window:
"You clicked "
plus (+)
the button's name
plus (+)
"!"
But, if you weren't using it in the middle of a string you'd just use it like any other variable:
var objName = event.srcElement.name;
I see that now.
And thats exactly what I was looking for. Much appreciated to the both of you.
And while we're answering questions, what's the command to put all the members of a form (in the receiving page) into a collection so that they can be iterated?
Exuro
08-09-2003, 09:52 PM
Sorry, but I really don't know what you mean by iterating the form elements... Maybe if you gave an example I'd know what you're talking about?
Alright, say I create 8 form buttons, and with those create 17 textareas. Technically, I could have a few hidden elements let me know how many textareas I'd created, or call them all text1, text2, text3 and then have a counter (while x<10, request('text'+x), but that isn't all that exact.
Is there any way to get to the page the form is being sent to and derive a list of the sent variables? Say I passed text1, text2, text3 amd text4, is there anything I can do where I can return:
request[0-3] where request[0] is text1, etc. (I use request in place of the name of such a collection because if I knew the name I wouldn't need to ask).
This maybe more of an ASP question about the server objects, but I hope thats a little clearer.
Basically I just want a list of passed form inputs.
Mat
Exuro
08-10-2003, 01:01 PM
Okay, I think I know what you're talking about now... Here is the source code for two pages. The first is a set of 10 text elements with a submit button, which when clicked, submits to the second page. The second page builds the array request[] which holds the data submitted from each of the text elements on the first page. Here's the code:
input.html:<html>
<body>
<form name="form1" action="disp.html" method="get">
<script type="text/javascript">
<!--
for (i=0;i<10;i++) {
document.write('<input type="text" name="text'+i+'"><br>');
}
//-->
</script>
<input type="Submit" value="Submit">
</form>
</body>
</html>
disp.html:<html>
<head>
<script type="text/javascript">
<!--
var request=parent.location.search.substr(1).split(/&?[\w]+=/);
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
for (i=0;i<request.length;i++) {
document.write(request[i]+'<br>')
}
//-->
</script>
</body>
</html>
Thats exactly what I'm looking for. Is there any way to do the same thing with a post form instead of one that uses querystrings (<form action=POST>)?
Thanks,
Mat
Exuro
08-10-2003, 05:06 PM
I don't know of any way to do it with Post using JavaScript. You can do it with server-side languages like PHP or ASP quite easily though... In fact, PHP already puts all the elements submitted into the $_POST[] and $_GET[] variables. But, I'm pretty sure you can't access the Post values using JavaScript.