I have the base page which has a button for "Add Link", upon click you get a popup window. The popup window has a form field to enter the link. Once the link is entered, I would like to refresh the base page - the base page should no more be "Add Link" but changed to the hyperlink entered in the popup window.
I am new to Javascript and html. I have by far managed to create a button on the base page and on click displays a popup window with form field for the link. However I am unable to refresh the base page with the new link.
Below is my code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
prompt("Please Enter the Link");
}
</script>
</body>
</html>
What the following will do is every time the button is hit, the prompt is shown, and once that prompt closes the script will add a new <a href=value>New Link</a> tag to the demo div.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
// This needs to be a 'div' so it can have elements inside it.
<div id="demo"></div>
<script>
var demo = document.getElementById('demo');
function myFunction()
{
// Stores the value from the prompt() in the variable 'value'
var value = prompt("Please Enter the Link");
var link = document.createElement('a'); // Create an <a> tag
link.setAttribute('href', value); // Set the link's URL to the value.
link.innerHTML = "New Link"; // Set the link's display text.
demo.appendChild(link); // Add the link to the demo div.
}
</script>
</body>
</html>
Hopefully the comments explain how it works, if not just ask here :)
Try this:
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
var url = prompt("Please Enter the Link");
window.location = url;
}
</script>
http://jsfiddle.net/douglasloyo/rtghQ/
the only value that is acceptable in js fiddle is going to be http://jsfiddle.net/
Cheers
You'll need some way to store the link on the server; refreshing the page will cause everything to be re-executed, and you can't really dynamically alter the html file from itself. Something like django with a postgresql database is pretty easy to set up, but that's beyond the scope of your question.
That said, if you're okay with having the link not survive when the page is refreshed, you can use a text area instead of a prompt. Here's an example if you have jQuery:
<head>
<script>
$(function() {
$("#addLink").click(function() {
var linkStr = document.getElementById("linkInput").value;
$("#linkArea").html("Your link");
});
})
</script>
</head>
<span id="linkArea">
<input id="addLink" type="submit" value="Add Link: ">
<input id="linkInput" type="text" value="(enter link)">
</span>
Here's a jsfiddle to try it out:
http://jsfiddle.net/tRcUp/
Oh, and generally you should put scripts in the head tag.
Related
i need to append a child control to html element using javascript, the problem is that the child is appear when call the function and disappear directely the child must be in a form tag
this is the code when i append child to the html elemet
<html>
<body>
<form >
<button onclick="create()">Create Heading</button>
</form>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
the element h1 is added to the layout appear and disappear immediately but when i remove the <form> it works perfectly
It looks like the form element is submitting when you press the button, refreshing the page and making the header disappear.
You should probably ask yourself: should I really need a form? Are there some inputs that should be handled by the server?
If you really need it, then you can try to prevent the form from submitting
Also, as pointed out in this SO Question you can prevent the button to submit the form by specifying its type as 'button'.
Agreeing with #Drago96 Form submits and page refreshes.
What is the point of the form. if you are only appending an element
<body>
<button onclick="create()">Create Heading</button>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
I've searched around both stackoverflow and the web for answers to my question, but can't find the right solution.
I am trying to create a text field and button, so that a user can enter a number in the text field and when they click the button it takes them to a URL with that number added to the end of the URL.
For example http://www.website.com/trackingid/NUMBERHERE
If the user typed 000000 in the text field and then hit the button the URL navigated would be http://www.website.com/trackingid/000000
Any help much appreciated.
Thanks
There are two ways of addressing this:
You could use JavaScript's window.location
You could make the button a link and change it's href
Using window.location
Let's assume your html structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" id="number" placeholder="Enter number here" />
<!-- The button -->
<button onclick="forward();">Send</button>
</form>
When you click the button, the forward() javascript method gets called. This method looks like this:
function forward() {
// select the input field
number = document.getElementById("number");
// forward to the new page
window.location = "http://www.website.com/trackingid/" + number.value;
}
Changing the link's href
Now the structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" oninput="changeLink(this.value);" placeholder="Enter number here" />
<!-- The button -->
<a id="buttonLink"><button>Send</button></a>
</form>
Notice that the <a>-tag is still completely empty except it's id.
The oninput= calls the JavaScript function changeLink(); with it's current value as a parameter whenever something is written or deleted in it.
This function should look like this;
function changeLink(value) {
// select the link
link = document.getElementById("buttonLink");
// change it's href
link.href = "http://www.website.com/trackingid/" + value
}
I hope this helps. If you have any questions, feel free to ask.
You need JavaScript to do this.
HTML:
<input type="text" id="inputId">
<button type="button" id="buttonId">Click me</button>
JavaScript:
document.getElementById('buttonId').addEventListener('click', function() {
window.location.href = "http://www.website.com/trackingid/" + document.getElementById('inputId').value;
});
Solved your issue please check my solution
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>nirajpatel.mdl#gmail.com</title>
</head>
<body>
<input type="text" id="num" name="num">
<button id="button">Go Url</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.website.com/trackingid/";
$("#button").click(function(){
var num = $("#num").val();
window.location.replace(url+num);
});
});
</script>
</html>
I am trying to create a button where when clicked, will change text previously displayed to something different. I have created a testing code but am unable to figure it out. I was wondering if someone could help? I'm required to use Javascript. Although this code displays the time when clicked, I need it to display text when clicked. I do not know how to modify this code to suit my needs
I have added internal commentary where i need help.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Test</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =;
}
</script>
#need to change the code below to display text and not time
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
If you want it to display some text, add a string to your function. Something like this would work:
function myFunction() {
document.getElementById("demo").innerHTML ="Some text";
}
See it working in this JS Fiddle: https://jsfiddle.net/r22jaffb/
Hope that helps.
You will need to wrap your new content with quotation marks "". Check the snippet below. Your code should work fine now if you click on the button.
In your original code, you had assigned an onclick attribute pointing at your function to the <p id="demo"></p> itself. As a result, your function was called only if you clicked on the text itself, not on the button.
function myFunction() {
document.getElementById("demo").innerHTML = "Your new content";
}
<p id="demo">Test</p>
<button type="button" onclick="myFunction()">Click me to display my custom text</button>
I have a pop up window function where when a button is clicked the window does pop up. Now the pop up window does not display anything, for a test I want the pop up window to display the word "Session". But I don't know how to do this.
Am I supposed to write the word "Session" in another page and link to that page or is it possible to write the word "Session" on the same page and link it to that section of the page?
I want the latter to happen but I don't know how to do it.
Below is my code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function openSessionPopup (session) {
window.open(session,
'window',
'width=500,height=500,scrollbars=yes,status=no');
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="openSessionPopup(this.href); return false" /></p>
</form>
</body>
Try something like this:
var win = window.open("about:blank", null, "width=400,height=300");
var doc = win.document;
doc.open("text/html");
doc.write("Session");
doc.close();
Try it on JSFiddle.
Alternatively, you can create a new page with the content you want and open that:
window.open("my-new-page.html", null, "width=400,height=300");
If you want to write the word session into the popup.. be sure to use " before and after since it's string... like this window.open("session", 'window', ...
" or ' will do the job either way.
Your popup typically displays another page when it appears. It is this other page that will have the content you want displayed.
This code would never work. When you pass in this.href, the this refers to the input element on which you've clicked. Input elements do not have an 'href' attribute, so you're passing in an undefined value.
You can pass the href as the argument for the "session" parameter. You see this works by putting this code into a file called "question.html" and testing out the button.
Replace the href with the page you want to display.
onClick="openSessionPopup('question.html'); return false"
First parameter in windows.open function is URL. So when you passed an empty value it opened the window with url about:blank (empty page).
If you want open url http://example.com/ in popup window you must use your function as:
openSessionPopup('http://example.com/');
i wrote a web page that included some stuff. There, i need to create a input text box after clicking on a button, but it will be at the bottom due to existing stuff and i can't see the input box as it is in the out of visible area.there i'v to scroll down to find that.I tried with focus method , it focuses to the input box, it is unable to take the input box to visible area.in the top , i'v some javascript stuff .so i need to do this without refreshing.Here is the code snippet i'v tried.
<script>
function create(){
var inputBox=document.createElement('input');
inputBox.setAttribute('id','myInput');
var body=document.getElementsByTagName('body')[0];
body.appendChild(inputBox);
document.getElementById('myInput').focus();
}
</script>
<body>
<button onclick="create()">Click me</button>
</body>
Can anyone help me !
Yes, you are inserting the text input as the last element in body. If you want it to appear at a specific place, create a placeholder for it. For instance:
<script>
function create(){
var inputBox=document.createElement('input');
inputBox.setAttribute('id','myInput');
var wrapper=document.getElementById('wrapper');
wrapper.appendChild(inputBox);
inputBox.focus();
}
</script>
<body>
<button onclick="create()">Click me</button>
<div id="wrapper"></div>
</body>
You need a anker:
<a name="button"></a>
<button onclick="create()">Click me</button>
Then you can jump to it
location.href = 'http://yourpage#button'
The page will not reload if you jump to an anker on the same page.
Well you can always have the input in the HTML markup , and make it visible when clicking the button .
Also replacing the
body.appendChild
with
body.insertBefore(inputBox,body.firstChild);
should do what you want .