How to get form name and input with javascript?

Question

How I can get the value of input of form ONLY on submit? I have this..

<form id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">
  <input type="hidden" value="<?PHP echo $PostID;?>" name="comentonpost" id="comentonpost"/>
  <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
  <input type="submit" id="submit" value="Submit" />
</form>

$PostID is number which in every form printed in the page is different and so all form names on the page are different. In HTML, it's looking like this:

First form printed:

<form id="addCommentForm3" method="post" action="">
  <input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
  <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
  <input type="submit" id="submit" value="Submit" />
</form>

Second printed:

<form id="addCommentForm2" method="post" action="">
  <input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
  <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
  <input type="submit" id="submit" value="Submit" />
</form>

I am getting the comentonpost id value in javascript like this:

$(document).ready(function(){
  var name_element = document.getElementById('comentonpost');
  var x = name_element.value;
});

I need this value so the following script will put the new comment over #addCommentContainer'+x

Here is the whole javascript:

$(document).ready(function(){

var name_element = document.getElementById('comentonpost');
var x = name_element.value;

/* 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'+x).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('comment.submit.php',$(this).serialize(),function(msg){

        working = false;
        $('#submit').val('Submit');


            /* 
            /   If the insert was successful, add the comment
            /   below the last one on the page with a slideDown effect
            /*/

            $(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();


    },'json');

});

   });

But in this way it's taking the value of the first form printed. How can I get the value of comentonpost only on the submitted form?

zzzzBov · Accepted Answer · 2013-06-02 20:03:05Z

1

As you're using jQuery, you can use the "attribute starts with" selector to select the form, and the .serialize() or .serializeArray() methods to get the entire form's data:

$('[id^="addCommentForm"]').on('submit', function (e) {
    var formData;
    //as string i.e. foo=bar&fizz=buzz
    formData = $(this).serialize();

    //as array i.e. [{name: 'foo', value: 'bar'}, {name: 'fizz', value: 'buzz'}]
    formData = $(this).serializeArray();
    e.preventDefault();
});

For the data of a single field within the form, you can simply select the field and call .val():

fieldVal = $('#comentonpost').val();

That said, it'd be better to simply add a common class to all of the forms and select on that:

_PHP:

<form class="add-comment-form" id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">

_JS:

$('.add-comment-form').on('submit'...

Be careful with spelling, you've used addCommentform for the form, but comentonpost for the field.

edited Jun 2, 2013 at 20:03

answered Jun 2, 2013 at 19:58

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Violina Milanova Over a year ago

Here is the whole javascript code - jsfiddle.net/UVkuE I need the <code>comentonpost</code> value because this script need the form name so the script can print the new comment. Tell me how i can get this input value in this script please. I dont get it...

zsawyer · Accepted Answer · 2013-06-02 20:51:40Z

0

First off let me point out that you have invalid XML there. The id attribute needs to be unique. However your comentonpost inputs all have the same id. Since you seem to intend to have a multiple of these forms on your page the ids are ambiguous. Instead of id you should use class. (The same goes for your ids body and submit.)

Based on this fix here is a jQuery function doing what you want:

$(document).ready(function(){
    $("form").submit(function(eventObject){        
        var commentOnPost = $(this).find(".comentonpost");
        var x = $(commentOnPost[0]).val();
        alert(x); // for debuggin prompts the found value
        return false; // this will prevent form submit - you might have to remove it
    });
});

DEMO HERE

edited Jun 2, 2013 at 20:51

answered Jun 2, 2013 at 20:17

zsawyer

1,86417 silver badges24 bronze badges

5 Comments

Violina Milanova Over a year ago

I don't know where but there is some mistake in this DEMO, when i press submit it's doing nothing but printing error. Here is the whole JAVASCRIPT - jsfiddle.net/UVkuE . I need this input so this scirpt will print the new comment over "#addCommentContainer'+x"

zsawyer Over a year ago

Might be an old link reload this page and try again. Else it is an alert prompt meant for illustration. alert(x) shows a pop-up window telling you the value of the currently submitted form's comentonpost-element.

zsawyer Over a year ago

Weird must be a browser compatibility issue. Works for me in FF21.

Violina Milanova Over a year ago

Can you please check this jsfiddle.net/UVkuE and tell me what i have to change in this script to make it working like it should? Thanks in advance!

zsawyer Over a year ago

@ViolinaMilanova try this Note that if you are using IE these jsFiddles will probably not function for you because of running in the jsFiddle sandbox, not because the scripts are broken (known bug). Give this jsbin one a try instead.

razz · Accepted Answer · 2013-06-02 23:22:20Z

0

Add onsubmit property to the form like this:

<form id="addCommentForm<?php echo $PostID;?>" method="post" action="" onsubmit="doSomething(this, event)">
    <input type="hidden" value="<?php echo $PostID;?>" name="comentonpost" id="comentonpost"/>
    <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
    <input type="submit" id="submit" name="submit" value="Submit" />
</form>

javascript:

var working = false;

function doSomething(elm, e) {
    var form    = elm,
        x       = form.comentonpost.value,
        submit  = form.submit;

    e.preventDefault();
    if (working) return false;
    working = true;
    submit.value = 'working..';
    $('span.error').remove();

    $.post('comment.submit.php', $(form).serialize(), function (msg) {
        working = false;
        submit.value = 'submit';
        $(msg.html).hide().insertBefore('#addCommentContainer' + x).slideDown();
    }, 'json');

}

jsfiddle

edited Jun 2, 2013 at 23:22

answered Jun 2, 2013 at 19:45

razz

10.1k7 gold badges55 silver badges74 bronze badges

3 Comments

Violina Milanova Over a year ago

Thanks and how i can get this value in javascript? I want to make var x to be equal to commentpost input.

razz Over a year ago

this.commentonpost.value will get the value of the commentonpost input of the submitted form only, you can then do whatever you want with it.

zsawyer Over a year ago

onsubmit="doSomething(<?PHP echo $PostID;?>)" if you inline code you could as well just expand that php variable to give the JS-Function a constant.

Collectives™ on Stack Overflow

How to get form name and input with javascript?

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related