Fernando Román Fernando Román - 3 months ago 9
jQuery Question

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.

Answer

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.

Comments