Form control attribute label error message from WC3 - javascript

I'm getting a WC3 error that has me completely confused.
The for attribute of the label element must refer to a form control. …you are human: Write code in box »
<label for="txtCaptcha"> Write code in box » <span id="txtCaptchaDiv" style="color:#29372F; font-weight:bold;"></span><!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" name="txtCaptcha"/></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->
<input type="text" name="txtInput" id="txtInput" size="30" />
I have for="txtCaptcha" referring to the hidden input control id, so I am not sure what WC3 is saying. Any help will be appreciated.
Additional information was requested. I attempted to put the entire form here, but for some reason the code block does not accept all the code. It breaks it up and then when I try to submit, it won't let me because the code is not in a code block.
The page is here http://skeeterz71.com/gothic/quote-page.html line 641
Line 641, Column 55: The for attribute of the label element must refer to a form control. …you are human: Write code in box »
Thank you

The error you mention is as follows:
The problem is that the hidden field is not labelable, as you can read directly from the specifications:
4.10.2 Categories
Some elements, not all of them form-associated, are categorized as
labelable elements. These are elements that can be associated with a
label element.
button input (if the type attribute is not in the hidden state) keygen
meter output progress select textarea
HTML/Elements/input/hidden
<input type="hidden">
The hidden state represents a value that is not intended to be
examined or manipulated by the user.

Related

Form using Javascript exclusively

I have an assigment, I don't understand it as i'm beginner.
Create a javascript script which will modify the DOM of a web-page.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?".
Thank you in advance.
I need to use only Javascript for this and I can only find answers
that use HTML
Web applications use HTML to contain, render and display elements in the viewport (browser window).
Where do you intend to render the form and capture user input?
You can build the DOM structure using JavaScript alone, however, there will still be a HTML file, which will contain the HTML elements created using javascript.
Please provide clarity as to your desired goal and what type of application this is being used for.
My gut feeling, for simplicity, is that you will require to use HTML as your template file, and JavaScript for interactivity and manipulation of the HTML file.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?". That's it.
This is a start, just to try to help you to understand the concepts.
I do, however, implore you to go and explore with confidence - you won't break anything, just give it a try!
I recommend you try taking a look at some of these articles, have a look at my (very rudimentary) code below, and feel free to ask any questions you have!
JS:-
W3 Schools JS and HTML reference
HTML:-
W3 Schools: HTML Forms
W3 Schools: Label Tag
W3 Schools: Text Area Tag (This has been left out of the solution on purpose - give it a try!!)
(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class??
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="Mickey Mouse">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="mickey#mouse.co.uk">
<br><br>
<input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
</head>
<body>
</body>
</html>

How do I change the value of text field in wordpress contact form 7 using javascript

I'm trying to change/input the value of in wordpress contact form 7 using javascript. I found that the form id can be identified in 3 ways
<label> [text your-name id:poo] </label>
<label id="poo"> [text your-name] </label>
<label> [text your-name html_id:poo] </label>
In all three ways, i tried the javascript method
document.getElementById("poo").value = "Jonny"
but the javascript code doesn't seem to have any effect on the form when displayed on the webpage. Any idea on how i can go about this?
I also did place the code in the form editor field, if that is a wrong section to write the code which may be the cause of it not being executed, please specify. Thank you
I've been able to figure out a way to resolve it and i guessed posting it here might help.
I checked the source code (ctrl + u) of the page where the contact form tag is located and I noticed that each tag is converted to an HTML language.
E.g
<label> <[text your_name id:poo ""] </label>
this will be converted in the page and display in the source code as
<input type="text" name="your_name" value="" id="poo" />
So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code
[contact-form-7 id="289" title="Your contact form"]
So in the page where the short code is located, you can now use;
document.getElementById("poo").value = "jonny"
This will alter the value of the text field within the label tag.
Try this:
document.getElementById("poo").innerHTML = "Jonny"

Grails and Jasper - Send input fields values from create view as parameters to a report

I'm having problems trying to send input fields values to a Jasper report. I know how to send parameters to a report but I always did this using the show.gsp view because it was quite simple to do something like this:
<g:jasperReport controller="liquidacionDeEstano" action="crearReporte" jasper="liquidacion_estano" format="PDF" name="ReporteLiquidacion${liquidacionDeEstanoInstance.lote}">
<input type="hidden" name="LIQ_SN_ID" value="${liquidacionDeEstanoInstance.id}" />
</g:jasperReport>
Where LIQ_SN_ID is a "static" parameter used by the report.
But now I want to fill some input fields and use this values as parameters. So, what I'm doing is to use some input fields out of the jasperReport tags and hidden fields inside the jasperReport tags. Then I copy the values from the input fields to the hidden fields using JavaScript.
To generate the report I'm just using SQL and the parameters passed are used for filtering.
This is my controller closure to create the report (I think I don't need anything else but the parameters):
def crearReporte = {
chain(controller:'jasper',action:'index',params:params)
}
This is the code in the GSP form to invoke the report:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
I checked that all the parameters are correct (hidden fields values) using Firebug and a Web Developer extension for Firefox but when I click the link to the report this error is produced:
Timestamp: 23/12/2013 07:20:00 p.m.
Error: TypeError: link.parentNode._format is undefined
Source File: http://localhost:8080/Liquidaciones/reporteLotesRecepcionados/create
Line: 660
Following the link to the error this automatic generated code is shown:
<script type="text/javascript">
function submit_reporterecepcionfechas(link) {
link.parentNode._format.value = link.title;
link.parentNode.submit();
return false;
}
</script>
I don't know what I'm doing wrong. In fact this is the first time I try to generate a report using values as parameters from input fields.
Please help me with this.
Thank you in advance.
I know this have been here for 11 months withuoth an answer so...
Jasper tags uses their own form and since html forbids to have nested forms:
Content model: Flow content, but with no form element descendants.
(HTML)
Jasper documentation says : "Note that the jasperReport tag should not be nested with a form element, as it uses a form element in its implementation, and nesting of forms is not allowed."
Finally I solved it but I'm not sure how I did it. Ok, here is what I did:
As you know, since Grails 2 (I think) there is a form.gsp used by the create.gsp and edit.gsp views. I was using just the create.gsp (and, in consequence, the form.gsp) view to have the input fields to obtain parameters to generate reports. Initially I located the code:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
INSIDE the <g:form></g:form> tags. So, I tried, as an experiment, to copy the code to declare the input fields and the code to generate the report from form.gsp file to create.gsp, OUTSIDE the <g:form></g:form> tags (I'm not using the form.gsp file anymore). And that was all. It's working perfectly now.
As I told you I don't know how this problem has been solved. Maybe it is mandatory to have the tags outside any <g:form></g:form> tags...
...but why?
PD.: I created a domain class to have the form to enter the values that were going to be parameters. All of you must be thinking this was completely unnecessary and that having an ordinary HTML form was enough , well, I'm a Grails newbie, sorry.

Apply javascript with the script tag

I have a page where users can creates their own script to modify texts on the server (don't worry the access is restricted to a few users). So the users only have three fields they can fill, one with the name of the rule, another with the expression to replace and a last one with what to replace it with:
<label id="name">Name: </label> <input type="text" name="ruleName" size="50" id="ruleName"></input> </br>
<label id="input">Replace: </label> <input type="text" size="50" name="inputStep1" id="inputStep1"></input> </br>
<label id="output">By:</label> <input type="text" size="50" id="outputStep1"></input></br>
After that the rules are stored in a file on the server via a php post (I'll spare you the unecessary details of this command...). and then the rules are listed in a form with checkboxes, and I want that when the checkboxes are clicked the rule is applied.
The only thing I could come up with was to import the script file via a script tag but only by importing it it doesn't run the inside script.
How do I do that?
Thanks
If i understund you correct, you would have to create a script file with contentlike this
generate Script on the server:
// i would approch this totally differt, because i would not let user generate script on the server, but to answer the question ...
function executeRule(){ // name of the function is probably the Rulename and must be unique
document.getElementyId("withRules").innHTML = document.getElementyId("withRules").innHTML.replace('[userenteredvalue1]','[userenteredvalue2]');
}
//this code should just be executed when the radiobutton is selected
and than i would add the script per html - script - tag
<script src="/generated_user_script.js"></script> <!-- a line per generated script -->
and than on select(the onchange/onclick Event, when the checked attribute is set) i would call the function, quick an dirty. :)
if you have many rules you need uniqe names, so that they dont override themselfes and so on.
this said an other approche were javascript code is not create would be better.
If it is only the replace function, may be you could store the input and output values or so.

Javascript HTML Registration

I am creating a html document for class and there is an example in my notes that is very similar to what I have to do it has First Name, Last Name, and Phone Number, my question is what does this line of code mean? There is a .addphone in style but the code on the bottom only applies to phone why not first name or last name?
<!-- <div class="addphone" onclick="addPhone();">Add Phone</div> -->
<input id="adduser" type="submit" value="Add User" style="margin-top: 25px;">
</div>
The first line of code is an example of a clickable element. In this case has been commented out, meaning it will not be rendered in the browser.
For example:
<!-- Anything written here won't affect the page -->
Is it possible this line, plus the line in your stylesheet, are examples on how to write your other fields for your assignement?
Why not first name or last name?
I guess it's because your 'user' can have more than one phone, but not more than one first name or last name. This isn't really a programming question then though, is it?!
It's never good to put an onclick() event handler on a div element. It also looks like the div has been given a class for styling to make it look like a button or link. Well, if you need a button, or link, then use a button, or link. That way, keyboard support is automatically included.

Categories

Resources