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.
Related
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;
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
<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 am having problem printing a particular variable from my cgi file. I receive this variable, called totalCost from my webpage and then try to print it, but nothing happens. All the other variables can be received successfully from the webpage and printed out on another webpage via my cgi file, except for this one..i've checked for case sensitivity but that didnt help
The code in html...
<tr> <td colspan=3 padding=2><b> Total = $ </b> <input type= "text" id="totalCost" disabled= true name= "totalCost" size ="5" maxlength="5" value= 0.00 /> <td> <tr>
the computeCost function
<script type= "text/javascript">
function computeCost(){
var apples= document.getElementById("appleQty").value;
var oranges=document.getElementById("orangeQty").value;
var bananas=document.getElementById("bananaQty").value;
var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;
document.getElementById("totalCost").value= totCostTemp;
}
</script>
In cgi file, which I write using Perl, I receive my variable in this manner:
my ($appleQty, $orangeQty, $bananaQty, $user, $cardType, $c) = (param("appleQty"), param("orangeQty"), param("bananaQty"), param("user"), param("cardType"), param("totalCost"));
then try to print out in this manner..
print header;
print start_html("Receipt"),
print h3("Fruit Store: Order Summary"),
table({-border => 2} ,caption("Your Receipt"),
Tr([th("Name:").td($user),th("Payment Method:").td($cardType),th("Fruit Type").td("Quantity"), th("Apple").td($appleQty), th("Oranges").td($orangeQty), th("Bananas").td($bananaQty), th("Total Cost:").td($c)]));
print end_html;
Please note...all variables except totalCost get printed correctly. totalCost is not printed at all in my resultant webpage...I think this has to do with the fact that I did some computation and perhaps did not store it properly in the id. But I dont know how to resolve that..
thank you for advising!
Disabled fields don't get posted. So you simply need to modify the field to make it readonly. Like :
<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" />
If you don't like the color of the readonly field, you can use a CSS to modify it like :
<style>
input[readonly=true] {
color:silver;
}
</style>
Or for better CSS compatibility :
<style>
.disabled {
color:silver;
}
</style>
<input type="text" id="totalCost" readonly="true" name="totalCost" size ="5" value="0.00" class="disabled" />
You may also use hidden fields, but you don't have to change your current code.
If the <input> element is never enabled, then it will not be sent to the server when the form is posted.
If you don't want the user to be able to update the field, then don't use an ordinary "text" <input>. Put a <span> there to hold the value, and update an enabled "hidden" <input> instead.
function computeCost(){
var apples= document.getElementById("appleQty").value;
var oranges=document.getElementById("orangeQty").value;
var bananas=document.getElementById("bananaQty").value;
var totCostTemp=0.69*apples + 0.59*oranges + 0.39*bananas;
document.getElementById("totalCost").value= totCostTemp;
document.getElementById('totalCostView').innerHTML = '$' + totCostTemp;
}
and the page would look like:
<td>
<span id='totalCostView'>$0.00</span>
<input type='hidden' id='totalCost' name='totalCost' value='0.00'>
</td>