how can i increment the form id by 1 every time i click submit button?

[luke noob]

I would like to use jquery, but couldnt find a subject on that so posted this in javascript hope thats ok.

my HTML form is like this

 
<form id="10" method="post" action="">
 
<input type="text" name="name">
 
<input type="submit" name="submit" value="Submit">   
 
</form>
 
 

i am new to jQuery but my code is as follows....

$(function(){
 var form_id = $("form").attr("id"); // output 10 
 $("#submit").click(function(){      // onclick submit 
   form_id = +1                      // increment by 1
                                     // form_id = 2      
      });
    });
 

This doesn't work as i think i need to set the id, or am i doing something completely wrong?

[Dormilich]

there are several problems:
- an ID must only start with a letter or an underscore
- changing a string (the ID value) does not change anything in the HTML Document
- = +1 simply assigns 1
- + is also the string concatenation operator

[luke noob]

profile.php

 
<div id="main" align="center">
     <div id="addCommentContainer" align="left">
    <p>Add a Comment</p>
 
    <form id="addCommentForm-10" method="post" action="">
        <div>
            <input type="hidden" name="name" id="name" />
 
            <label for="body">Comment Body</label>
            <textarea name="body" id="body" cols="20" rows="1"></textarea>
 
            <input type="submit" id="submit" value="Submit" />
        </div>    
    </form>
</div>
 
    <?php
/*
/    Output the comments one by one:
*/
 
foreach($comments as $c){
    echo $c->markup();
 
}
?>
<div id="showCommentsHere">   
 
 
</div>
</div>  
 

submit.php....

<?php
 
// Error reporting:
error_reporting(E_ALL^E_NOTICE);
 
include "database.php";
include "comment.class.php";
 
/*
/    This array is going to be populated with either
/    the data that was sent to the script, or the
/    error messages.
/*/
 
$arr = array();
$validates = Comment::validate($arr);
 
if($validates)
{
    /* Everything is OK, insert to database: */
 
    mysqli_query($mysqli,"INSERT INTO comments(name,url,email,body)
                    VALUES (
                        '".$arr['name']."',
                        '".$arr['url']."',
                        '".$arr['email']."',
                        '".$arr['body']."'
                    )");
 
    $arr['dt'] = date('r',time());
    $arr['id'] = mysqli_insert_id($mysqli);
 
    /*
    /    The data in $arr is escaped for the mysql query,
    /    but we need the unescaped variables, so we apply,
    /    stripslashes to all the elements in the array:
    /*/
 
    $arr = array_map('stripslashes',$arr);
 
    $insertedComment = new Comment($arr);
 
    /* Outputting the markup of the just-inserted comment: */
 
    echo json_encode(array('status'=>1,'html'=>$insertedComment->markup()));
 
}
else
{
    /* Outputtng the error messages */
    echo '{"status":0,"errors":'.json_encode($arr).'}';
}
 
?>
 

script.js...

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */
 
    /* This flag will prevent multiple comment submits: */
    var working = false;
 
    /* Listening for the submit event of the form: */
    $('#addCommentForm').submit(function(e){
 
         e.preventDefault();
        if(working) return false;
 
        working = true;
        $('#submit').val('Working..');
        $('span.error').remove();
 
        /* Sending the form fileds to submit.php: */
        $.post('submit.php',$(this).serialize(),function(msg){
 
            working = false;
            $('#submit').val('Submit');
 
            if(msg.status){
 
                /    If the insert was successful, add the comment
                /    below the last one on the page with a slideDown effect
                /*/
 
$(msg.html).insertAfter('#addCommentContainer').hide().slideDown();
                $('#body').val('');
            }
            else {
 
                /*
                /    If there were errors, loop through the
                /    msg.errors object and display them on the page 
                /*/
 
                $.each(msg.errors,function(k,v){
                    $('label[for='+k+']').append('<span class="error">'+v+'</span>');
                });
            }
        },'json');
 
    });
 
});
 

comment.class.p hp....

<?php
require 'database.php';
 
class Comment
{
    private $data = array();
 
    public function __construct($row)
    {
        /*
        /    The constructor
        */
 
        $this->data = $row;
    }
 
    public function markup()
    {
        /*
        /    This method outputs the XHTML markup of the comment
        */
 
        // Setting up an alias, so we don't have to write $this->data every time:
        $d = &$this->data;
 
        $link_open = '';
        $link_close = '';
 
        if($d['url']){
 
            // If the person has entered a URL when adding a comment,
            // define opening and closing hyperlink tags
 
            $link_open = '<a href="'.$d['url'].'">';
            $link_close =  '</a>';
        }
 
        // Converting the time to a UNIX timestamp:
        $d['dt'] = strtotime($d['dt']);
 
        // Needed for the default gravatar image:
        $url = 'http://'.dirname($_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]).'/img/default_avatar.gif';
 
        return '
 
            <div class="comment-10" align="left">
                <div class="avatar">
                    '.$link_open.'
                    <img src="image.jpg" />
                    '.$link_close.'
                </div>
 
                <div class="name">'.$link_open.$d['name'].$link_close.'</div>
                <div class="date" title="Added at '.date('H:i \o\n d M Y',$d['dt']).'">'.date('d M Y',$d['dt']).'</div>
                <p>'.$d['body'].'</p> 
 
                 <a href="#">Reply</a>
 
           </div>'; 
}
 
    public static function validate(&$arr)
    {
        /*
        /    This method is used to validate the data sent via AJAX.
        /
        /    It return true/false depending on whether the data is valid, and populates
        /    the $arr array passed as a paremter (notice the ampersand above) with
        /    either the valid input data, or the error messages.
        */
        require 'database.php';
        $errors = array();
        $data    = array();
 
        if(!($data['url'] = filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)))
        {
            // If the URL field was not populated with a valid URL,
            // act as if no URL was entered at all:
 
            $url = '';
        }
 
        // Using the filter with a custom callback function:
 
        if(!($data['body'] = filter_input(INPUT_POST,'body',FILTER_CALLBACK,array('options'=>'Comment::validate_text'))))
        {
            $errors['body'] = 'Please enter a comment body.';
        }
 
        if(!empty($errors)){
 
            // If there are errors, copy the $errors array to $arr:
 
            $arr = $errors;
            return false;
        }
 
        // If the data is valid, sanitize all the data and copy it to $arr:
 
        foreach($data as $k=>$v){
            $arr[$k] = mysqli_real_escape_string($mysqli,$v);
        }
 
        // Ensure that the email is lower case:
 
        $arr['email'] = strtolower(trim($arr['email']));
 
        return true;
    }
 
    private static function validate_text($str)
    {
        /*
        /    This method is used internally as a FILTER_CALLBACK
        */
 
        if(mb_strlen($str,'utf8')<1)
            return false;
 
        // Encode all html special characters (<, >, ", & .. etc) and convert
        // the new line characters to <br> tags:
 
        $str = nl2br(htmlspecialchars($str));
 
        // Remove the new line characters that are left
        $str = str_replace(array(chr(10),chr(13)),'',$str);
 
        return $str;
    }
}
 
?>

i would like to add a unique div id for every outputted comment..

i was thinking of adding something like this...

$('#addCommentForm').submit(function(){ // when submitted
 
var comment_id = $("form").attr("id"); // comment-10 
var comment_id_split = str.split(-); // comment 10
var comment_id_number = comment_id_split[1]; // 10
var comment_update_number_for_next_comment = comment_id_number + 1; // 11

but not sure where to put the code, and how to out out it in every click, or even if its right, please could you help,

i need to add a unique div id

[Dormilich]

is there any reason, why you would change the form ID on the client side?

[luke noob]

say i have an upload form on the page where ppl can upload pictures, the first picture will have a comment box under it with a wrapped in div comment_id_1 and every other comment that goes to that picture will be div comment_id_1, then the next uploaded picture will be comment_id_2 and so on, the comments will be uploaded to the database and put back in the right order by selecting all comments WHERE picture id=$picture_id and comment_id = $comment_id order by time DESC, so that on 1 page they all line up with the right pictures. so each comment div will need a unique comment_id, hope that explains it a bit better, im really struggling to understand how to go about this,

[Dormilich]

so far that’s good, but you have to do that on the server side (i.e. in PHP). JavaScript doesn’t help you there.

besides, when you submit the form (make a comment) the form/div ID is not sent back.

you can for instance put the comment and picture ID as URL parameter in the form action

[luke noob]

sorry i understand what your saying i made a mistake, i would like to change the out putted div class="comment-10" on comment.class.p hp, the form id on index.php doesnt need to be changed, sorry ignore the form on index.php, that is just to show where the form is submited from and i have made changes and got rid of the form id now