DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Javascript "onsubmit" for Multiple Forms

  1. #1
    Join Date
    Mar 2009

    Cool Javascript "onsubmit" for Multiple Forms

    I am using php to retrieve elements from a database. Each element has a form that allows users to add comments using AJAX.

    This much is simple enough, but my end goal is to allow users to simply hit enter rather than having to click a submit button.

    As far as I know, to do this using AJAX, "onsubmit" must be used to call a function that performs the AJAX and then returns false, so the browser will not load another page.

    My problem is caused by every onsubmit function reading the same id variable rather than retaining its own unique id number.

    Here is some code of what each form looks like:
    <form id='comment_form_<?=$thing_id?>' method='post' iscomment='1' thingid='<?=$thing_id?>'>
    		<input type='text' id='comment_box_<?=$thing_id?>'/>
    		<input type='submit' value='Add Comment'/>
    As you can see each form is given its own unique id based on a PHP variable ("$thing_id"). Notice that the form has the attributes iscomment and thingid.

    iscomment is simply so only comment forms are updated.
    thingid is the ID number of the element in the database.

    Here is the javascript function that is called once the all the forms have been loaded:
    function updateCommentSubmit(){
    	var commentFormArray = document.getElementsByTagName("form");
    	for(var i=0;i<commentFormArray.length;i++){
    		isComment = commentFormArray[i].getAttribute("iscomment");
    			var theThingId = commentFormArray[i].getAttribute("thingid");
    			commentFormArray[i].onsubmit = function(){
    				addComment(theThingId);//This is the ajax function that updates a database
    				return false;
    The problem with this function is that every form seems to end up reading the final value of "theThingId". In other words the only form that will work is the last one.

    Basically, assume the last form ID number is 27. When any of the forms are submitted the function called is:
    Even if the form's ID is something entirely different.

    I wasn't sure if this question should be posted here or under AJAX, but I think this is more of a basic javascript question than AJAX.

    I appreciate any help you can offer. Thanks.

  2. #2
    Join Date
    Mar 2009

    Cool JQuery solved it

    Well it turns out this is really easy with JQuery.

    I just gave all comment forms the class of "comment_form" and then did this:

    	var element = $(this);
    	var theThingId = element.attr("thingid");
    	return false;

Similar Threads

  1. Javascript Forms
    By in forum Careers
    Replies: 0
    Last Post: 11-16-2009, 07:10 PM
  2. Replies: 2
    Last Post: 03-06-2005, 10:14 AM
  3. Help with Javascript in forms
    By Keith Sarver in forum Web
    Replies: 0
    Last Post: 12-14-2002, 03:18 PM
  4. ***HELP*** JavaScript and HTML Forms
    By Chris in forum Web
    Replies: 0
    Last Post: 08-30-2001, 12:47 PM
  5. Sample Sites.
    By Murray Foxcroft in forum Web
    Replies: 5
    Last Post: 11-02-2000, 03:42 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center
Latest Articles
Questions? Contact us.
Web Development
Latest Tips
Open Source

   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center