jQuery question

384 Posts

eladnova Reply #1, 12 years, 7 months ago

Are non MODX Qs allowed here?

I'm trying to inject

role="form"

into a form using jQuery

<form method="post" action="POST" class="hintsBelow labelsAbove" id="tfa_0">

so that it reads

<form role="form" method="post" action="POST" class="hintsBelow labelsAbove" id="tfa_0">

My jQuery is very basic and I currently have the following which does not work.

<script type="text/javascript">
$(document).ready(function(){
    $("form").val("role="form"");
});
</script>

[ed. note: eladnova last edited this post 12 years, 7 months ago.]

...

5,888 Posts

Bruno17 Reply #2, 12 years, 7 months ago

does .attr work?

$("#tfa_0").attr("role","form");

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

165 Posts

pdincubus Reply #3, 12 years, 7 months ago

Quote from: Bruno17 at Mar 13, 2014, 03:40 PM

does .attr work?
$("#tfa_0").attr("role","form");

That is how I would do it too.

Also, my main question would be why can't you just add the role into the HTML source?

384 Posts

eladnova Reply #4, 12 years, 7 months ago

Thank you both. I'll try this later today.

Also, my main question would be why can't you just add the role into the HTML source?

Good question. I *could* apply these classes manually but some of the forms (generated by a 3rd party app) are quite big, change frequently and are added to the CMS by editors.

Asking editors to apply a series of Twitter Bootstrap responsive classes to the forms isn't practical.

And to be honest, I'm also enjoying learning a little jQuery too. I got some .addClass functions to work.

...

165 Posts

pdincubus Reply #5, 12 years, 7 months ago

Quote from: eladnova at Mar 14, 2014, 07:07 AM

Thank you both. I'll try this later today.

Also, my main question would be why can't you just add the role into the HTML source?

Good question. I *could* apply these classes manually but some of the forms (generated by a 3rd party app) are quite big, change frequently and are added to the CMS by editors.

Asking editors to apply a series of Twitter Bootstrap responsive classes to the forms isn't practical.

And to be honest, I'm also enjoying learning a little jQuery too. I got some .addClass functions to work.

If there are multiple forms, you might want to make the role attribute adding bit of code more generic. Will this need to be applied to all forms in a certain area of the page? You could just apply to all forms with

$("form").attr("role","form");

384 Posts

eladnova Reply #6, 12 years, 7 months ago

Worked great - thanks again.

If there are multiple forms ...

Thanks for the tip. Currently I don't have multiple forms per page which I intentionally want to target.

I do realise that some of my own jQuery which was targetting all inputs might need to be more specific. If I introduce asearch field or newsletter signup etc, those inputs will all unintentionally get CSS injected.

...