This is a sample of my form. when the page loads the focus must be on 'fbox' but it dosent work and i don understand why. the form contains a niceditor but i dont think that is the problem
<html>
<head></head>
<body onload="document.form.fbox.focus();">
<body>
<form method='post' action='' name='form' >
Headline <input name='fbox' type='text' class='form' id='box' autocomplete='off' size='80'><br>
Your text</font><br><script type="text/javascript" src="nicEdit.js"></script><script type="text/javascript">bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });</script>
<textarea name="description" style="width: 100%; height:200px;"></textarea></p>
<p><select name='catg' >
<option value='' selected >Select category</option>
</select>
<input type="submit" id='button' name="Submit" value="Submit" class="button"></form>
</body></html>
thanks
You've got two body tags. I suggest getting rid of one of them and seeing if that helps.
There's also a stray closing </font> tag in the middle of that code. Many people try to arrange their markup so that it's easy to read and to see the structure of the document. You might want to explore that practice.
Another possibility is that your "nicEdit" plugin is un-doing the ".focus()" call. Try taking that out and seeing if the focus works (as an experiment). If that's happening, then you can do your "focus()" call after the nicEdit code has finished:
bkLib.onDomLoaded(function() {
nicEditors.allTextAreas();
document.form.fbox.focus();
});
(That's an adaptation of the code in your existing <script> block.)
You have two body elements. That won't work.
Scripts run top-to-bottom, so you're firing the "onload" before the rest of the page has rendered. It's likely the element you are trying to focus is not there when the event fires.
There are a number of ways to fix this. jQuery has a handy method that waits until the DOM is ready.
A simple way is simply to run your script from the bottom of the page in a script block.
<script type="text/javascript">
document.form.fbox.focus()
</script>
Related
I've got a PHP file (called aboutMe.php) that contains some HTML as follows:
<script type="text/javascript" src="/aboutMe.js"></script>
<div id="aboutme-gender" class="aboutme-block">
<div class="aboutme-question">My gender is:</div>
<div class="aboutme-error">Please select your gender.</div>
<div class="aboutme-answer">
<input id="gender-male" name="the-gender" type="radio" value="1" />
<label for="gender-male">Male</label>
<input id="gender-female" name="the-gender" type="radio" value="2" />
<label for="gender-female">Female</label>
</div>
</div>
The aboutme.js file contains a function as follows:
jQuery(document).ready(function($) {.....does stuff to the tags in the HTML});
This all works fine if the page is loaded directly. However when another page wants to load this dynamically as follows:
$("#load-aboutme-here").load("aboutMe.php");
...the document.ready() event doesn't fire and things don't get tagged.
I've seen similar posts but can't quite get what I need from them. Have done things like substitute the document.ready() for window.load() but then it doesn't even work at all when the aboutMe.php page is loaded directly.
Any ideas much appreciated - this is driving me nuts although I suspect it's an easy fix!
Thanks
Iain
Note that the document is the main page...not subsequent files you retrieve
The document was ready long before the ajax is done so any $(document).ready() that is called after it is ready will fire immediately. In your case it will fire before the elements exist
Move the script tag below the html that the code is referencing
<div id="aboutme-gender" class="aboutme-block">
.......
</div>
<script type="text/javascript" src="/aboutMe.js"></script>
If I understood your problem correctly, I believe you could just create a callback for the .load() function like so:
$("#load-aboutme-here").load("aboutMe.php", null, function()
{
// Code to be executed when aboutMe.php is loaded.
// i.e. The code in aboutMe.js
});
I'm testing a page I made in PHP for HTML injections, but it's not working the way I expected.
I'm trying to insert
<div onmouseover="alert(1)" style="position:fixed;left:0;top:0;width:9999px;height:9999px;">
</div>
inside a textarea. Server-side, I just want to display $_GET with a var_dump for now but it doesn't even get to that: when I click the button it just brings me back to the homepage and #3377832596384266514 is added to the URL. I don't get any error in PHP so maybe it's a server issue (Apache 2.4).
I'm guessing some part of the stack is being defensive, like when you add javascript: to a URL and the browser gets rid of it, but I don't know where to look. I've also tried
<script>alert(foo);</script>
and other variations but then the < and some other characters are stripped.
test.php
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<form method="get" action="select.php">
<p>
<label for="select">Words
<textarea id="select"
name="select"
cols="50"
rows="1"
maxlength="100"
required
autofocus></textarea>
</label>
</p>
<p>
<button>Send</button>
</p>
</form>
</body>
</html>
select.php
<?php
var_dump($_GET);
Edit: textarea instead of input.
Edit: added all the code.
Change the form method from GET to POST.
GET is possibly causing an issue with how the server handles certain markup in the URL.
OP verified this resolved the issue.
Input tags can't have any content, that's why you can set it as an self-closing element <input />
maybe you need another approach
I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.
You can use just HTML + Javascript to achieve this.
Just create a form with method="get". So the values will be passed by querystring to the another page.
Example:
index.html
<html>
<form method="get" action="results.html">
<input type="text" name="age" />
<input type="submit" value="Send" />
</form>
</html>
results.html
<html>
<h1></h1>
<script>
document.querySelector("h1").innerHTML = window.location.search.substring(1);
</script>
</html>
Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual
Hope this helps
Here is an example. Write your html page (e.g. "index.html") like
<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>
and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this
<?php
echo json_encode($_REQUEST);
?>
(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.
In one of my webpage i need to add PayPal payment button, in which value has to be entered by input.
i got this script to add PayPal button:
<script
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=email#adress.com"
data-button="paynow"
data-amount="5"
data-currency="USD">
</script>
Now i have to change the value of "data-amount" every time by Input from User.
I tried to use onkeyup, setAttribute but both don't seem to work. Please suggest what should i do or where i'm making mistake.
<!DOCTYPE html>
<html>
<script>
function showMe(e) {
var x=e.value;
document.getElementsById("paypal").setAttribute("data-amount", "x");
}
</script>
<body>
Amount: <input type="number" name="amount" id="amount" onkeyup="showMe(this)" required>
<script id="paypal"
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=payPalmerchantId"
data-button="paynow"
data-currency="USD">
</script>
<br><br><br>
<p>You will be redirected to Payment Gateway..</p>
</body>
</html>
try this..
function showMe(e) {
var x=e.value;
$("#paypal").attr("data-amount", x);
}
or doing everything in jquery
$("#amount").on('input', function() {
$("#paypal").attr("data-amount", $("#amount").val());
});
I'm not familiar with PayPal scripts, but as I know, such types of embedding set attributes and any other features at step of initializing...
So you have to reload your script.
You could also search for the ability to change attributes with the help of API provided by PayPal
Update:
I've just tried to insert your code into my local page...
Your script searches for element with id "paypal", but if you look at your code after tha page loads, you won't see even "script" tag which refers to the paypal js file. You'll see a form instead. Try to search for "script" word here and you won't find that tag. At least this reason is why your script doesn't work.
Let's say you've got some HTML,
<input id="mytextbox" type="text" value="hello world" />
And you want to do some magic on that textbox as soon as it's loaded. Maybe add some kind of widget, or button beside it, whatever. There's 2 ways of doing this that I'm aware of. You can throw some jQuery like this in the <head>
$(function() {
$('#mytextbox').magic();
});
And that'll run once the entire DOM is ready, but what if we want it sooner? As soon the element has loaded?
We can put the JS immediately after the element:
<input id="mytextbox" type="text" value="hello world" />
<script>
$('#mytextbox').magic();
</script>
But that's a bit messier, and why should we have to search the entire DOM for an element ID when we know exactly where it is? onclick events have a this argument. Isn't there some way we can do something like this...
<input id="mytextbox" type="text" value="hello world" onload="$(this).magic()" />
? Would be nicest solution IMO, but only the body has an onload event apparently, and no other event seems suitable. Are we basically left to solution #2 if we want some piece of code to run immediately after an element is loaded?
Actually, your second snippet is the "best" (whatever that means, probably fastest) way to apply some Javascript to an element.
<input id="mytextbox" type="text" value="hello world" />
<script type="text/html">
$('#mytextbox').magic();
</script>
You are not searching the entire DOM here. A call like this directly goes down to
document.getElementById('mytextbox');
which is more or less, just insta-access to the node.
Anyway, a practice like this betrays the idea of unobtrusive Javascript. I wouldn't know a reason why you shouldn't apply some code when the DOMContentLoaded event fires (which is abstracted away by jQuerys .ready()).
Since javascript includes are generally blocking (unless you load it async ofcourse), it is always a good idea to put your javascript as low as possible on the page. That way the user won't have to wait for your javascript to load while browsing through the page.
So the question here is, do you really want it to load immediately after that element. Or simply at the bottom of the page.