Stack Exchange
How can I get the same effect in jQuery?
I have this to identify "id" with an alert but is not work.
jQuery(document).ready(function($) {
    $('.rating-button').click(function(e){
        e.preventDefault();


        var form = $(this).find('form');
        var id = form.attr('id');

    alert(id);
    });
});

HTML
<form onsubmit="return validClear('crform34') && recargarCitasEnvi()" action="http://www.fastdate.es/controladores/grabarcita.php" name="crform34" name="crform34" target="done" method="post">
<div class="crintro">
<br>
<h6>
<input id="crsite" type="text" value="" maxlength="250" name="crsite">
<div id="addr">
<h6>
<input id="crcity" type="text" value="" maxlength="250" name="crcity">
<h6>
<input id="crcpostal" type="text" value="" maxlength="250" name="crcpostal">
<h6>
<input id="crfecha" class="datepicker" type="text" name="crfecha">
<h6>
<input id="crsecret" type="text" value="" maxlength="250" name="crsecret">
<h6>
<textarea id="crcomentario" rows="3" cols="20" name="crcomentario"></textarea>
<br>
<input type="hidden" value="34" name="idreceptor">
<input type="hidden" value="21" name="idcitador">
<input type="hidden" value="eleven" name="namereceptor">
<input type="hidden" value="Maiers" name="namecitador">
<input type="hidden" value="http://www.fastdate.es/profile/maiers/" name="urlcitador">
<input class="rating-button" type="submit" value="Enviar cita">
</form>

How can I get the same effect using jQuery please?
When "id" is a variable value.
I would want select a form between multiple forms with different ids in the same page.

What's the error message?

Hi, undefined, in alert box

You'd better post your html code. I think You want to get the id of the form by clicking the button, right? But when you call the find method on this button, it will look for the children of this button for the form, so it's not right doing it like this.

You can get the form by $("form[name='xxx']")

Yes Sky, that is the idea,  I added HTML CODE, thanks

@FernandoRomán I didn't see the id for your form. What do you want? If there's only one form, you can use $('form') to get the form, or try the way I provided before.

Sky, they are many forms but I only copied one..., and I added the id at HTML too, and i get the same error.

This is basic jQuery, and most of what you've done appears correct.. You just need to target the ID you've found... then add the class...
jQuery(document).ready(function($) {
    $('.rating-button').click(function(e){
        e.preventDefault();


        var form = $(this).find('form');
        var id = form.attr('id');
        $(id).addClass('showing');
    });
});

or...
adjust the HTML:
<form onsubmit="return validClear('crform34') && recargarCitasEnvi()" action="http://www.fastdate.es/controladores/grabarcita.php" name="crform34" name="crform34" target="done" method="post" id="[INSERT A UNIQUE ID HERE]">
and
<input class="rating-button" type="submit" data-id="[INSERT FORM ID HERE]" value="Enviar cita">
Then call that data...
If you correct the invalid markup in the question (close h6 anddiv` tags)... this appears to work fine... 


jQuery(document).ready(function($) {
    $('.rating-button').click(function(e){
        e.preventDefault();

        var form = $(this).attr('data-id');
        alert(form);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="" action="" name="crform34" name="crform34" target="done" method="post" id="form1">
<div class="crintro">
<br />
<h6>
<input id="crsite" type="text" value="" maxlength="250" name="crsite" />
</h6>
<div id="addr">
<h6>
<input id="crcity" type="text" value="" maxlength="250" name="crcity" />
</h6>
<h6>
<input id="crcpostal" type="text" value="" maxlength="250" name="crcpostal" />
</h6>
</div>
<h6>
<input id="crfecha" class="datepicker" type="text" name="crfecha" />
</h6>
<h6>
<input id="crsecret" type="text" value="" maxlength="250" name="crsecret" />
</h6>
<h6>
<textarea id="crcomentario" rows="3" cols="20" name="crcomentario"></textarea>
</h6>
<br />
<input type="hidden" value="34" name="idreceptor" />
<input type="hidden" value="21" name="idcitador" />
<input type="hidden" value="eleven" name="namereceptor" />
<input type="hidden" value="Maiers" name="namecitador" />
<input type="hidden" value="http://www.fastdate.es/profile/maiers/" name="urlcitador" />
<input class="rating-button" type="submit" data-id="form1" value="Enviar cita" />
</div>
</form>



The biggest issue you had is you are trying to select the form based upon it's ID.. but there is no id in your markup.

yeah I know It is basic query, but your code isnt work... Thanks anyway

nothing happen when I click the button, "not class added", and i deleted the javascript code, because I put it as example..., but I think I didnt explain correctly, and I left the code I want edit.
When I click in rating-button, I would like see an alert with the "id" I click.

It may be because none of your <h6> tags are closed, you have an unclosed div tag in the form...... correct the markup.

I copied HTML code from firebug output, but in the real code, H6 are closed.

@FernandoRomán see my answer update... seems to work fine... There are 2 unclosed div tags as well.

Then you have a click conflict somewhere.. the snippet above only requires a single click.
