yesod fill a specific form field in javascript - javascript

I have a simple yesod form:
aYesodForm :: Form Text
aYesodForm = renderDivs $ id
<$> areq hiddenField "" Nothing
It generates roughly:
<input type="hidden" id="h2" name="f2" value="">
I want to fill it from javascript like:
document.getElementById('h2').value="foo"
But it would be bad practice to hardcode 'h2' into the .julius file, as it is auto-generated and could change.
the return type of runFormPost does not return the field ids it has generated, to interpolate into the .julius file.
What is the best way to fill yesod generated form field in javascript?

You should be able to create your own ID when you generate your form using the FieldSettings parameter. FieldSettings data type can be found here: http://hackage.haskell.org/packages/archive/yesod-form/1.3.0/doc/html/Yesod-Form-Types.html
Something like this (untested):
<$> areq hiddenField (FieldSettings (SomeMessage "") Nothing (Just "myId") Nothing []) Nothing

Related

How to set value of form input field?

This is my form input field (without classes and such):
<input id="input_partnerID" type="value" name="partner_id" value=""/>
I want to set the input value to the contact id of the logged in user. I can get that value with this Qweb code:
<p id="value_parterID" t-esc="user_id.partner_id.id"/>
And to get that value in my input form I use this javascript. The method is called when the "accept terms and conditions" button is clicked.
function getID() {
document.getElementById("input_partnerID").value = document.getElementById("value_parterID").innerHTML;
}
This works but probably isn't the most efficient way to do this.
How can I use Qweb to fill in the input value in 1 or 2 lines preferably without javascript?
You can set the attribute value using t-att-value="".
So in my case I should use this input field:
<input type="value" name="partner_id" t-att-value="user_id.partner_id.id"/>
Which does the same as the given example with the <p> and javascript.

Spip - Passing data from Javascript to hidden input value

J'm trying to pass some data from javascript to #ENV in hidden input value, in CVT form.
In the form i have some radio inputs which are working fine and one hidden input to get the leaflet coordinates stored in js variable.
My input looks lick that:
<input value='#ENV{localisation, #GET{coord}} 'name="localisation" type="hidden"></input>
and my code:
[(#SET{coord, JSON.stringify(latlng_tab)})];
In the
console.log (#ENV{localisation, #GET{coord}})
I can see the coordinates but it doesn't work in input.
Can someone help me, please.
In case someone will be looking for an answer.
I had to remove #GET from input and #SET from the code and instead i'm using that:
<input id="localisation" value='' name="localisation" type="hidden">
</input>
var latlng_str = document.getElementById("localisation");
latlng_str.value = JSON.stringify(latlng_tab);

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.

prepend and append string to input value

I'm trying to prepend and append to an input value some string, like this.
<input type="text" name="protezione" value="" onSubmit="http://www.amministrazioni-zucchetti.it/protezione/CM_<?php echo (this.value) ?>.php">
if I put for example mountains into the input field, the final value send to a form should be:
http://www.amministrazioni-zucchetti.it/protezione/CM_mountains.php
thanks
this.value looks like a Javascript declaration. In PHP, all variables start with $. The next problem is that $this is only used inside a PHP class. Something tells me you aren't doing this inside a class. And then, you refer to object properties using $this->value
For example:
<input type="text" name="protezione" onclick="alert('http://yoururl.com/' + this.value);">
And in your case:
<input type="text" name="protezione" onSubmit="http://www.amministrazioni-zucchetti.it/protezione/CM_' + this.value + '.php">
You're tried something with <?php, but this is the start tag for server-sided php syntax, which can't be executed or interpreted from the client - only from the server. So in this case php doesn't help. You might want to use PHP in your .php file you're sending the request to progrocess the data.

Angular.js Dynamic Form input types

I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.
So firstly, I have a JSON object (called fields):
[
{"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
{"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]
The object key type is the input type for a form. See below:
<p ng-repeat="field in fields">
{{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>
Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.
If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.
If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.
Why won't it let me set an input type as a file dynamically?
Topic if changing type property if <input> element is hot topic.
Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).
Here you can read some discussion about possibility to change type:
change type of input field with jQuery
Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371
If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.

Categories

Resources