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.
Related
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>
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'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();
});
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.