I'm writing a javascript library and I need to make a javascript function which you can call to create a form (scheduler) on your webpage.
this is the html code of the form:
<form>
<table border="1" cellpadding="5">
<tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
<tr>
<td width="50">hours</td>
<td></td>
<td width="50">minutes</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
<td>Sun</td>
</tr>
<tr>
<td width="50"><input type="text" id="hours" maxlength="2" size="1"></td>
<td width="2"> : </td>
<td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
<td> <input type="checkbox" id="mon"></td>
<td> <input type="checkbox" id="tue"></td>
<td> <input type="checkbox" id="wed"></td>
<td> <input type="checkbox" id="thu"></td>
<td> <input type="checkbox" id="fri"></td>
<td> <input type="checkbox" id="sat"></td>
<td> <input type="checkbox" id="sun"></td>
</tr>
<tr>
<td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
</table>
</form>
my idea of the result is that a user only needs to create a div in his webpage, then in the javascript, call my function with the right parameters which in turn shows my predefined form. But I also need to add some functionality to the 'setbutton' it needs to write the data to an adres in my PLC (programmable logic controller)
what I want the function call to look like: showScheduler(id, adres);
id is the id of the division and adres is the adres in my programmable logic controller I need to write to.
What is the best way to write the form to my webpage from within a javascript function?
I hope u guys can understand but i'll gladly give you more explanation if needed.
You can do something like:
<div id="placeholder">
</div>
<script type="text/javascript">
function createForm(divId) {
var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
document.getElementById(divId).innerHTML = formHtml;
}
</script>
And call for example createForm("placeholder") when you want.
It sounds like you are specifically wanting the user to ONLY have their html and a <script> tag that loads in your js file. You will need to require a specific id or custom css class to use as a selector. Then the html part for the user would simply look like:
<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>
Then in your javascript file, you need to create your function to write in the content, and tie that function to an execution on window.load(). Something like:
$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
function(){ showScheduler("customID"); }
);
function showScheduler(id)
{
var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
I'm not sure exactly what you're looking for regarding the adress part, but you could easily extend the showScheduler() function to include a second parameter for the adress value, and then stick that into the middle of the rest of the contents value. Something like:
function showScheduler(id, adress)
{
var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
$("#"+id).html(contents);
}
And further, if you prefer to have the user call the function from their page, you can skip the part about tying this to this to the dom's execution (i.e. remove the $( function(){ showScheduler("customID"); } ); part completely
Related
In my page I have some styling, then a form, then some java-script code.
I have two issues:
First: when I click button 'submit', all my styling goes away, also the expected action (div to appear) does not happen.
Second: I have an output-text for displaying a small phrase saying subscription was successful or not, which reads a bean property called result. The problem is that this property never gets refreshed. The inputFields after I refresh the page they come up clean, this outputText no. How can I make it get without any text when user comes to the page for the second time?
Thank you so much!
Style:
#mainTableRightDiv1 {
display: none;
background-color:rgba(0, 0, 0, 0.5);
}
Body:
<button class="button" id="subscribe">Subscribe</button>
<div id="mainTableRightDiv1">
<table class="hidden" id="formTable">
<tr>
<td id="formTd">First Name:</td>
<td><h:inputText class="form" id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td id="formTd">Last Name:</td>
<td><h:inputText class="form" id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td id="formTd">Email:</td>
<td><h:inputText class="form" id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
</div>
<p><h:commandButton class="button" id="submit" value="Submit" action="#{visitor.registerVisitor()}"/></p>
<p><h:outputText class="output" id="result" value="#{visitor.result}"/></p>
Javascript:
$("#subscribe").click(function (e) {
$("#mainTableRightDiv1").css('display', 'block');
});
Replace your jquery statement with the .on() event instead of .click(),also make sure that you have included jQuery.
As for your second question, you can set the result to no text when the document has been compiled with jQuery
$(document).ready(function(){
result = "";
$(document).on("click","#subscribe",function(){
$("#mainTableRightDiv1").css("display","block");
})
});
It is recommended to put all of your jquery code in the $(document).ready() function to ensure that everything executes.
I have explored so many topics here but couldn't get answer yet. please help me to resolve my issue
I have created an html generator with different functions which giving me result in a textarea box. I want to export the textarea value into html file
<html>
<head>
<script type='text/javascript'>
function output() {
var lkpp = document['getElementsByName']('linkurl')[0]['value'];
var tpwa = document['getElementsByName']('imgrlink')[0]['value'];
var ttiwidget = document['getElementsByName']('widget.content')[0];
ttiwidget['value'] = ''+lkpp+''+tpwa+''
};
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td width='40%'>
<label for='linkurl' >value1</label>
</td>
<td width='60%'>
<input type='text' name='linkurl' value='' size='40'>
</td>
</tr>
<tr>
<td width='40%'>
<label for='imgrlink' >Value2</label>
</td>
<td width='60%'>
<input type='text' name='imgrlink' value='' size='40'>
</td>
</tr>
</table>
<br>
<input value='Generate' type='button' onclick='javascript:output();' />
<br>
<textarea name="widget.content" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()" readonly='readonly'></textarea>
</body>
</html>
I want to export/save the generated value into an HTML file.
Check this is my file
We need more info to give valid feedback. Precisely what is the roadblock?
Assuming the issue is getting the textarea content into a js variable: see this fiddle
You can get the value inside the Textarea with
document.getElementById('taGenerate').value;
After that, you can do whatever you want with it after that.
If you've made it that far, and your trouble is writing local fs: you will want to read this SO thread. Browser compatibility is going to be your biggest hurdle here.
I am trying to write a html form to submit a few variables to an external asp file that creates a chat window.
The example that has been provided for me to use you can see by this link, but this involves a two step process.
In the example provided, the customer fills out the fields, clicks on "Submit" and is then taken to a separate page to click on a dynamically generated javascript link to launch the chat window.
I want do to this on a single page instead, but am having trouble finding a way to pass variables from my HTML form correctly to the external script
<script language='JavaScript' src='https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;email%40address.com;Description;Customers+Name;Company+Name&ref=Customers+Name&clientid=Company+Name'> </script>
In the code above I've entered generic text into the fields like "Company Name" and "email#address.com" to get that example link.
I've tried doing this a number of ways but none have resulted the desired result, such as using javascript direct to url with variables from the form, and url in the action part of the html form.
I don't have any control over how the script at na.ntrsupport.com works or receives the request so I have to get this working from my end.
Any help is going to be appreciated, and let me know if I've missed anything of importance.
My code so far
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script>
function launchChat()
{
var name = document.getElementById('name').value;
var company = document.getElementById('company').value;
var email = document.getElementById('email').value;
var description = document.getElementById('description').value;
var url = "https://na.ntrsupport.com/nv/inquiero/web/an/ann4.asp?login=41403&lang=us&button=connect&cat=&cob=&oper=&skin=&urloffline=&urlbusy=&sur=&surpre=&bgcolor=&txtcolor=&ref2=/o1https://na.ntrsupport.com/nv/Webintegration/Connectwise/entrypoint.asp?p=1;" + email + ";" + description + ";" + name + ";" + company + "&ref=" + name + "&clientid=" + company;
window.location(url);
return false;
}
</script>
<style>
div{
width:400px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px; /* Negative half the width*/
margin-top:-100px; /* Negative half the height */
}
</style>
</head>
<body>
<div>
<form onsubmit="return launchChat();">
<table>
<tr>
<td colspan=2>
Put Banner here
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" id=="name" name="name" required>
</td>
</tr>
<tr>
<td>
Company:
</td>
<td>
<input type="text" id="company" name="company" required>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="email" id=name="email" name="email" required>
</td>
</tr>
<tr>
<td>
Description:
</td>
<td>
<input type="text" id="description" name="description" required>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Start Chatting"/>
</td>
</tr>
</table>
</form>
</div>
</html>
Alright, so you made it a bit too complicated there.
First thing: you need to use encodeURIComponent (this is the key!) on those variables you're concatting to the string because chances are some of them will have characters not allowed in the url.
Second: using GET method on the form will automatically build urls like that. For example:
<form action="a.html" method="GET">
<input name="var1" value="value1" />
<input name="var1" value="value1" />
</form>
will automatically build the link that looks like: a.html?var1=value1&var2=value2, which is a part of what you need and can make your life easier. I know you basically need to build two of those (the main url, which I'm not sure will remain hardcoded; and the ref2 part).
Another thing:
window.location(url);
should be:
window.location = url;
<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
document.getElementByID("plank").innerHTML = xp/30;
}
</Script>
So here is my code, and my problem is that I seem to be unable to write over data in a table with the id's planl, oakPlank, teakPlank, and mahoganyPlank. I am thinking that I may be making an obvious mistake to someone who has done this sort of thing before, but I can't seem to catch it. Any help is much appreciated, and here is a snippet of my table, if it helps:
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
EDIT: I didn't realize that this may be pertinent, my bad. This is the form I used to get input, which after putting an alert in to see if it could retrieve the XP, it functioned correctly:
<form name="experience" id="experience_frm" action="#">
Experience: <input type="text" name="XP" id="txt_XP"/>
<input type="submit" value="Go" onclick="getExperience();"/>
</form>
You have used the wrong document method. Javascript is case sensitive. You used:
document.getElementByID
for getting the id="plank" element. But you need to use:
document.getElementById
Notice the d (last character) change.
With this change, a simple example works for me:
http://jsfiddle.net/wqZAq/
Try This
<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
var newxp = parseInt(xp);
var div = newxp/30;
document.getElementById("plank").innerHTML = div;
}
</Script>
<table>
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
</table>
<input type="text" id="txt_XP" name="txt_XP" />
<input type="button" onclick="getExperience();" />
I'm looking for a way to send some hidden form-data to a Django-server, which works out fine as long is a keep the javascript and the html(template) in the same file, but now i'm trying to separate them.
Probably really simple, but i guess all i have to do is get(set?) the 'name' of the window/html-and access it from the javascript module?
HTML:
<html>
<head>
<script src="/media/postIt.js"></script>
</head>
<body>
<form action="" method="post" id="postForm">{% csrf_token %}
<input type="hidden" id="scoreField1" name="score1"></input>
<input type="hidden" id="scoreFieldSet1" name="score1Set"></input>
<input type="hidden" id="scoreField2" name="score2"></input>
<input type="hidden" id="scoreFieldSet2" name="score2Set"></input>
<input type="hidden" id="scoreField3" name="score3"></input>
<input type="hidden" id="scoreFieldSet3" name="score3Set"></input>
</form>
<table>
<tr>
<td id="bg1" onclick="postIt('score1')">
Ones
</td>
<td id="bg1_1">
</td>
</tr>
<tr>
<td id="bg2" onclick="postIt('score2')">
Twos
</td>
<td id="bg2_1">
</td>
</tr>
</table>
Javascript:
function postIt(x){
var pointArray = [d1,d2,d3,d4,d5];
var totVal = d1+d2+d3+d4+d5;
pointArray.sort(function(a,b){return a-b});
alert(pointArray);
alert("total value: " + totVal);
if(x == "score2"){
if("{{ res.score2Set }}" == 0){
var form = document.getElementById('postForm');
document.getElementById('scoreField1').value = score1;
document.getElementById('scoreFieldSet1').value = score1Set;
document.getElementById('scoreField2').value = score;
document.getElementById('scoreFieldSet2').value = 1;
document.getElementById('scoreField3').value = score3;
document.getElementById('scoreFieldSet3').value = score3Set;
form.submit();
}
}
Edit:
Clarifying:
I can't reach the elements in the html 'document' by just calling document.getElement... since they now are in different documents (physically..). I guess i'll have to assign a name/variable to the document, somehow.
And the call it like:
nameOfDocument.getElement..
and so on..
I would guess that the line
if("{{ res.score2Set }}" == 0)
is the problem - an included Javascript file will not go through the Django template loader, so you cannot place variables inside it. This conditional will always evaluate to false.
You need to set the variable in the template file in some manner and then retrieve it in the Javascript. The best way to do this would be probably be to add res.score2Set as an additional argument to the postIt() function, and then do:
<td id="bg1" onclick="postIt('score2', '{{ res.score2Set }}')">
Although obviously I don't really know what your application does so this might not be applicable. If res.score2Set is used elsewhere in the HTML it might be better to load it in from the DOM in the Javascript.
Your assumption about javascript is wrong.Wherever you write JS codes (inline,within file,external file) all JS codes will have access to the DOM.So, the problem is you have not loaded your JS file properly.