I'm creating a LOOONG form with thousands of different input values (~2900 inputs, to be more exact) being passed through (it's supposed to generate a marketing email based on the values entered in the form, but there are about a dozen possible sections for the email, each with hundreds of customizable attributes that could change the appearance of the email generated). The problem I'm running into (I think) is that I'm passing the max_variables_input limit of 1,000 for my server and ending up with a bunch of "Notice: Undefined index:" errors and broken code on the other end.
Outside of asking our host to raise the input limit, I'm wondering if anyone knows of a way to limit the inputs passed through to the action script to those that are being used?
The way I have the form set up, I have the email modules that are being used appearing in divs with IDs:
<div id="SectionDiv1"></div>
<div id="SectionDiv2"></div>
<div id="SectionDiv3"></div>
<div id="SectionDiv4"></div>
<div id="SectionDiv5"></div>
<div id="SectionDiv6"></div>
(Note: Not all of these divs are necessarily in use...the number of modules is determined by a number input:)
<label>Number of Sections</label> <input name="nosections" id="nosections"
class="2-digit-number" type="number" min="1" max="6" value="3">
All other modules that aren't being used are hidden from display in another div:
<div id="hiddenelements" style="display: none;"></div>
Is there a way I can send only the inputs that I'm using into the action script?
If you are talking about the max_input_vars setting of php, you can set that value in an .htaccess file as well:
php_value max_input_vars 3000
See the manual.
To answer your question, you can remove the blocks that are hidden using javascript and as you have also tagged the question with jQuery:
$('form').on('submit', function(e) {
$('#hiddenelements').remove();
});
Related
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"
I want to set access permissions page where setting the permissions to the user to only view selected divs only for example:
There are 5 checkboxes in admin page and 5 divs in user page if check 3 div user has to get 3 div only I am mapping userlocation & client location & username for setting access permissions and how to display / hide the div in user page based on the checkbox selection or database values?
There is a user login separately and admin login separately. The admin will disable certain features for certain users. Using wcf rest and sql server as backend.
Before we get into the answer I have to mention security. You probably know, but for future readers benefit...you must not rely on simply hiding or not generating HTML elements as a means of restricting user access. Why - because when your form submits data to the server this can be observed with simple tools like Fiddlr. If you simply hide important inputs on the web page but still submit them, then a mischievous user could use something like Postman to edit and submit dodgy values to your server INCLUDING for the fields that were not visible on the form. Even if you have some server-side code to restrict the generation of the HTML for the restricted inputs, if a user is able to see a full form submit, or more likely if your API is self-describing or well documented, then they can fire up Postman and start sending your server all manner of hooky data.
For this reason it is vital that you re-validate the user, their role and their right to modify at the server at each interaction. Sermon over.
Assuming the above protection is in place then the way forward is relatively simple. In your HTML you assign classes to the elements that need to show/hide and you send a variable from the server to dictate their hidden or visible state.
For example, say you have two groups of users called usrNormal and usrAdmin. You might have an input defined as:
<input type="text" class="usrNormal usrAdmin" name="somedata" style="display:hidden;"></input>
<input type="text" class="usrAdmin" name="admindata" style="display:hidden;"></input>
<div class="usrNormal usrAdmin" style="display:hidden;">Some important info here....</div>
<div class="usrAdmin" style="display:hidden;">Some admin-only info here.... </div>
The key to this technique is the css class setting class="usrNormal usrAdmin"
And the accompanying JS function is:
var usrType = "usrNormal";
function protect() {
$("." + usrType).show();
}
protect();
I have used JQuery here in the line inside the function, you could use plain JS to achieve the same. We start the page with the important inputs, divs and other html elements hidden. The usrType setting comes from the server, and when the protect() function is called it finds all elements with the given user type class and makes them visible.
EDIT: See working snippet below. Though contrived the idea is clear I hope. One point to consider is the use of a generic marker class to indicate that the appropriate elements should take part in the show/hide operation. Let me know if you have any queries.
$( document ).ready(function() { // Important: wait for the document dom to be ready
// get the value of the server access variable - simulated by the radio buttons in this case
// var access = <you would put your server value here !>
var access = ".usrNormal";
setAccess(access);
// next part is just to let you play.
$('.serverVal').on('change', function(e){
setAccess($(this).val());
})
// key function - this will show pr hide based on classes.
function setAccess(accessVal) {
// next line finds all elements with class including 'usrAccess' and shows if they have the request class or otherwise hides.
$(".usrAccess").each( function() {
var ele = $(this); // readability
showHide(ele, accessVal);
})
}
// show or hide the element based on class
function showHide(ele, cls){
if ( ele.is(cls) ){ // pay attention - this uses the jquery 'is' feature.
ele.show();
}
else {
ele.hide();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1">
<p>
<span>This selection simulates the value passed from the server. When changed the elements with the matching classes are shown or hidden.</span><br />
</p>
<p>
<span>
<input type="radio" class="serverVal" id="usrType1" name="usrType" value=".usrNormal" checked="1" />
<label for="usrType1"> Normal User only</label>
</span>
<span>
<input type="radio" class="serverVal" id="usrType2" name="usrType" value=".usrAdmin"/>
<label for="usrType2"> Admin User only </label>
</span>
<span>
<input type="radio" class="serverVal" id="usrType3" name="usrType" value=".usrAdmin, .usrNormal" name="usrType3"/>
<label for="usrType3"> Both </label><br />
</span>
</p>
<hr>
<p class="usrNormal usrAccess" style="display:none;">
<label for="somedata">Normal only</label>
<input type="text" name="somedata" />
</p>
<p class="usrAdmin usrAccess" style="display:none;">
<label for="admindata1">Admin only</label>
<input type="text" class="usrAdmin" name="admindata1" />
</p>
<p class="usrNormal usrAccess" style="display:none;">
<label for="someinfo">Info 1</label>
<textarea id="someinfo">This textare is visible to normal users...</textarea>
</p>
<p class="usrAdmin usrAccess" style="display:none;">
<label for="admininfo">Info 2</label>
<textarea id="admininfo">This textare is visible to only Admin users...</textarea>
</p>
</form>
I've been looking and trying to work on this for a while, but the way my company does things causes it to be unnecessarily difficult for me. At work I do a lot of work on an internal customer facing system that we edit entirely in HTML using AngularJS. We can run scripts locally in these HTML files but can not access the $scope in our functions.
I have an input field as shown below, and I need it to limit the phone number to 10 digits and automatically remove any non-numerical value. What I'm doing so far is this.
At the beginning of the HTML file, the scripting:
<script language = "javascript" type = "text/javascript">
fixPhoneNumber = function(interviewProperty) {
var cleaned = iData[interviewProperty]
cleaned = cleaned.replace(/\D/g,'');
iData[interviewProperty] = cleaned;
console.log(testing testing testing);
}
</script>
and in the data itself, this is how I'm attempting to call the data. I'll answer any questions if I'm not specific enough, but I think I've gotten everything shown here.
<button id="copyDP" class="copyButton" ng-click="copy_cust_data('phone', 'local_dir_ad_phone');" type="button">Copy Customer Phone</button><br/>
<input id="local_dir_ad_phone" type="text" class="k-textbox spellcheck" style="width:100%;" ng-change="fixPhoneNumber('local_dir_ad_phone')" ng-required="iData.site_addr_phone_same==='YES'" ng-model="iData.local_dir_ad_phone" /><br/>
<span class="error" ng-show="(iData.local_dir_ad_phone==undefined) || (iData.local_dir_ad_phone==='')">This information is required.</span>
<br/>
<ul>
<li>Is this also the best number for us to reach you at?
<ul>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="YES" /> <b>Yes</b><br/>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="NO" /> <b>No</b><br/>
<div ng-show="iData.contact_phone_good==='NO'">
<ul>
<li>What is the best number for us to reach you at? <span id="usernote">(Update Prospector Customer record with best contact number)</span></li>
</ul>
</div>
</ul>
</li>
</ul>
The value I'm looking to have changed is the 'local_dir_ad_phone' as it already has the ng-change applied in this example. Is there perhaps some reason that ng-change wouldn't actually execute its function every time a change was made? From reading the API, I'm under the impression that it should run it on every change made real time.
Any help is appreciated. Thanks!
If I understand what you're saying-
You are changing the value of the input outside of angular so it's not seeing the change. If you are changing input outside of angular you need to call $scope.$apply() to apply you changes. Since you don't have access to scope you can do it by calling $apply on $rootScope.
angular.element('body').injector().get('$rootScope').$apply();
But this sucks and you should talk to someone at work about getting a handle on the scope as this would cause a digest for the entire app.
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.
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.