I wrote a little "webpage" to start streams on my xbmc with jsonrpc. Now the problem I am facing is that i always have to send the form request twice to make it work. could it be that I am using the window.open function wrong? or am I missing something?
<html>
<body>
<head>
<script type="text/javascript">
function postFunction() { // inside script tags
var vForm = document.getElementById("frmGui");
var vStrServer = "";
var vStrFile = "";
var vStrPost = "http://";
vStrServer = vForm.idServer.value;
vStrFile = vForm.idFile.value;
vStrPost += vStrServer+"/jsonrpc?request={\"jsonrpc\":\"2.0\", ";
vStrPost += "\"id\":0, \"method\": \"Player.Open\", \"params\":{\"item\""
vStrPost += ":{\"file\":\""+vStrFile+"\"}}}";
window.open(vStrPost,"_self");
}
</script>
</head>
<table>
<tr>
<form id="frmGui" name="gui" action="#" onSubmit="postFunction(this)" methode="POST">
<td><input id="idServer" name="server" type="text" value="IP_ADRESS"/></td>
</tr>
<tr>
<td><input id="idFile" name="file" type="text"/></td>
</tr>
<tr>
<td><input type="submit"/></td>
</tr>
</form>
</table>
</body>
</html>
Try to put it into window.onload(cb).
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload
Why you passed argument whene you call postFunction() ? it has not argument upon decliration right way is
<form id="frmGui" name="gui" action="#" onSubmit="postFunction()" methode="POST">
remove this inside postFunction brace
Related
page name 3.html
<html>
<body>
<form action="4.html" onSubmit="cal()">
<table>
<tr>
<td><input type="text" id="sen"/></td>
<td><input type="submit" value="tap me"/></td>
</tr>
</table>
</form>
</body>
<script>
function call(){
var a = document.getElementById("sen").value;
localStorage.setItem("a",a);
}
</script>
</html>
page name 4.html
<html>
<body>
<table>
<tr>
<td><p id="r"></p></td>
</tr>
</table>
</body>
<script>
var get = localStorage.getItem('sen');
alert(get);
document.getElementById("r").innerHTML=get;
</script>
</html>
i am trying to pass value from 3.html to 4.html but it is passing null value.
why is it passing the null value?
how to resolve this error?
Looks like you have an error when calling the function
onSubmit="cal()"
The defined function name is call()
Apart that you are trying to set the session with key a and retrieve it with key seen.
I have an HTML page that displays some information. In javascript, I have a var submitted, that as you can see below, will add a line of text to my HTML if it meets a certain condition.
<script type="text/javascript">
if (submitted == "yes") {
document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>
Thing is, I want to add several lines of HTML code to my page and I've come to understand that document.write is not the appropriate method to do this. However, every alternative I've found doesn't seem to work for me.
Here's a snippet of the HTML I want to add:
<form>
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value=""/></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>
</form>
The full code is much longer.
My page:
<script type="text/javascript">
if (submitted == "yes") {
document.write("<div>SHOW ONLY IF SUBMIITED</div>");
}
</script>
<body>
<div class="Title" style="display:block; width=100%;">
<h1>FORM TITLE</h1>
</div>
<div id="injecthere"></div>
..... the rest of my html code
</body>
The code needs to be injected on page load, not by any input from the user (no buttons, etc)
How can I add my code to my HTML page WITHOUT jQuery (basic java only pls)?
You can use .innerHTML property of the element
var submitted="yes"
var code=`<form>
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value=""/></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>
</form>`;
if (submitted == "yes") {
document.querySelector("body").innerHTML+=code
}
<body></body>
Here' a way to do it that employs javascript's "template literal" syntax -- using backticks (`) -- to enclose your markup.
function addStuff(){
const formHTML = `
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value=""/></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>`;
const newForm = document.createElement("form");
newForm.innerHTML = formHTML;
document.querySelector("body").appendChild(newForm);
}
#existing-content {
height: 50px;
width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid gray;
}
<button onclick="addStuff()">Append HTML to Page</button>
<div id="existing-content">Existing content</div>
If you want to support browsers that don't support template literals, you might end up using tedious iterations of createElement (and/or createTextNode) with appendChild to add each node to the DOM one at a time, starting with the most deeply nested element and working your way out.
If for some reason your page doesn't have a body element, this would work to find what element to append the new markup to:
document.querySelector("#existingContent").parentNode.appendChild(newForm);
Basically what you want to do is designate a DOM element that you can inject the dynamically built HTML into - you do that by setting or appending to it's innerHTML property:
const buttonEl = document.querySelector('#htmlBtn');
const targetEl = document.querySelector('#target');
let divId = 0;
buttonEl.addEventListener('click', (e) => {
//innerHTML is what you want to use instead of document.write
targetEl.innerHTML += `<div id=dynamic-html-${divId}>Added HTML ${divId}</div>`;
divId += 1;
});
<input id="htmlBtn" type="button" value="Add some HTML to the DOM" />
<div id="target"></div>
You have the js property innerHTML. So it will look like:
<script type="text/javascript">
if (submitted == "yes") {
document.getElementByID("myDivID").innerHTML = '<form><table><tr><td>Surname</td><td>Given name</td></tr><tr><td><input type="text" name="ln" value=""/></td><td><input type="text" name="gn" /></td></tr></table></form>';
}
</script>
<div id="myDivID"></div>
var submitted = "yes";
function showFormIfNeeded() {
if (submitted === "yes") {
var form = document.getElementById("myForm");
form.style.display = "block";
}
}
#myForm {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body onload="showFormIfNeeded()">
<form id="myForm">
<table>
<tr>
<td>Surname</td>
<td>Given name</td>
</tr>
<tr>
<td><input type="text" name="ln" value="" /></td>
<td><input type="text" name="gn" /></td>
</tr>
</table>
</form>
</body>
</html>
Try this
I have a function in an external java script file and I dont know how to call and return the value that my function returns in text properly. When I click place order, I want the values to be calculated by my function and then the final value to be displayed underneath the place order box. I can get my function to alert if I enter nothing but I can't get it to return my final value- what am I doing wrong?
function sum2()
{
var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;
if ((one == "")||(two == "")||(three == ""))
{
alert ('Error', 'values missing');
}
else
{
var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;
document.getElementById('output').value = sum;
document.write(sum);
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Work</title>
<script type="text/javascript" src="ex4.js"></script>
</head>
<body>
<div id="container">
<h2>Order Books Online</h2>
<form action="" method="post" id=”frm”>
<fieldset>
<table border="0">
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Basics of C++</td>
<td><input type="text" size="3" id="book_1" /></td>
<td>$19.99</td>
</tr>
<tr>
<td>Program Development in Perl</td>
<td><input type="text" size="3" id="book_2" /></td>
<td>$86.00</td>
</tr>
<tr>
<td>Advanced JavaScript</td>
<td><input type="text" size="3" id="book_3" /></td>
<td>$55.00</td>
</tr>
</table>
<br /><br />
<input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
</fieldset>
</form>
</div>
</body>
</html>
Try this, its working, output is displaying on last.
function sum2()
{
var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;
if ((one == "")||(two == "")||(three == ""))
{
alert ('Error', 'values missing');
}
else
{
var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;
document.getElementById('output').innerHTML = sum;
// document.write(sum);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Work</title>
<script type="text/javascript" src="ex4.js"></script>
</head>
<body>
<div id="container">
<h2>Order Books Online</h2>
<form action="" method="post" id=”frm”>
<fieldset>
<table border="0">
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Basics of C++</td>
<td><input type="text" size="3" id="book_1" /></td>
<td>$19.99</td>
</tr>
<tr>
<td>Program Development in Perl</td>
<td><input type="text" size="3" id="book_2" /></td>
<td>$86.00</td>
</tr>
<tr>
<td>Advanced JavaScript</td>
<td><input type="text" size="3" id="book_3" /></td>
<td>$55.00</td>
</tr>
</table>
<br /><br />
<input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
</fieldset>
</form>
</div>
<div id="output"></div>
</body>
</html>
The use of document.write() doesn't seem to be what you'd want here. (And, honestly, should be avoided in general anyway.)
However, this will do what you want:
document.getElementById('output').value = sum;
All you need is an HTML input element which has that id (which your HTML is currently missing):
<input type="text" id="output" />
(Additionally, your JavaScript is missing a closing }, which is a syntax error.)
Once you have that HTML element and remove the document.write() call, this should be outputting the value correctly.
If you want to output to something other than another input element, then you wouldn't use .value but something more like .innerHTML instead:
document.getElementById('output').innerHTML = sum;
with an element such as:
<span id="output"></span>
As an aside regarding terminology, this isn't "returning" the value from the function. "Return" has a very specific meaning when it comes to functions, it's when the function itself results in a value using the return keyword, passing that value back up the stack to the code which called the function.
This function is writing a value to the HTML, but it's not returning anything.
Because jQuery is not working I need to translate the following into straight javascript. jQuery does not work on this page, I have more than one jQuery installed and I can't find them.
<script>
$(function () {
$('#printFrame').hide();
$('#print').click(function () {
$('#printFrame').attr('src', 'print.php?max=' + $('#brSt').val());
});
});
</script>
<body>
<td>Number desk:</td>
<td><input type="number" id="brSt" value="10"><td>
<tr>
<td></td>
<td><input type="submit" id="print" value="Print"><td>
</tr>
<iframe id="printFrame"></iframe>
Beyond the fact that your HTML is a mess you could use:
<html>
<body>
<table>
<tr>
<td>Number desk:</td>
<td><input type="number" id="brSt" value="10"><td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="print" value="Print" onClick="srcChange();"><td>
</tr>
</table>
<iframe id="printFrame" style="display: none;"></iframe>
</body>
<script>
function srcChange() {
var max = document.getElementById('brSt').value;
document.getElementById('printFrame').src ="print.php?max=" + max;
}
</script>
</html>
var frame = document.getElementById("printFrame");
var brStValue = document.getElementById('brSt').value;
frame.style.display = 'none';
document.getElementById("print").addEventListener("click", function(){
frame.setAttribute("src",'print.php?max=' + brStValue);
});
Here is a complete cross browser solution
(function(d){
var frame = d.getElementById('printFrame'),
brst = d.getElementById('brSt');
function updateSource(e){
frame.src = 'print.php?max=' + brst.value;
}
frame.style.display = 'none';
if(d.addEventListener){
d.getElementById('print').addEventListener('click',updateSource,'false');
return;
}
if(d.attachEvent){
d.getElementById('print').attachEvent('click',updateSource);
return;
}
}(document));
I'm currently busy with a database project. The idea is that you can select an option and when some options are selected the HTML form changes. I've got that all going, the only problem I have got now is that the PHP file, to which the form redirects, doesn't recognize the textbox which is placed there by a JavaScript function.
JavaScript and HTML:
<head>
<script>
function myFunction(submittedValue) {
if(submittedValue == "URL"){
var x = "URL:";
var y = "<input type='text' name='URL'>";
} else {
var x = "Bestand:";
var y = "<input type='file' name='fileToUpload' id='fileToUpload'>";
}
document.getElementById("x").innerHTML = x;
document.getElementById("y").innerHTML = y;
}
</script>
</head>
<html>
<body onload="myFunction('URL')">
<table>
<form action='Brontoevoegen_verwerking1.php' method='POST' enctype='multipart/form-data'>
<tr><td><p id='x'></p></td><td><p id='y'>N/p></td></tr>
</table>
PHP:
<?php
$URL = $_POST["URL"];
echo "$URL";
?>
Whenever I execute the PHP file I get the following error:
Notice: Undefined index: URL in /home/******/http/Brontoevoegen_verwerking1.php on line 15
The input doesn't even end up in the form at all, you end up with
<table>
<form action="Brontoevoegen_verwerking1.php" method="POST" enctype="multipart/form-data">
</form>
<!-- form closed :O -->
<tbody>
<tr>
<td>
<p id="x">URL:</p>
</td>
<td>
<p id="y">
<input type="text" name="URL">
</p>
</td>
</tr>
</tbody>
</table>
because your HTML is invalid, you can't have a form element as a direct child in a table, or rows and cells directly in a form etc.