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>
Related
I have a button in the main page which on clicking opens a modal. I have a form in the modal with a button which, on submitting closes the modal and returns to the main page. I want to change the html button which is on the main page after closing the modal to plain text. How would I replace the main button in main page after the modal is closed ?
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
}
<body>
<button id="mainButton"> Click here </button>
<div class="modal">
<form onsubmit="submitForm()">
<input type="text">
<button> Done </button>
</form>
</div>
</body>
I tried the following in submitForm function:
removing the button like this:
document.getElementById('mainButton').innerHTML = '';
Also tried:
document.getElementById('mainButton').style.display = 'none'
You are working with a submit button (that's the default type of button you get with <button>). So, when you click it, the onsubmit event handler fires and the form submits, which results in the current page being unloaded, so trying to display anything else isn't going to work.
In this scenario, you'd need the form to redirect to another page that has the content you want on it (that is done by configuring the form element's action attribute.
If you don't really need to submit data to a server, then you can change the type of button you have to a regular button and change the event handler to handle just a click event and then just take what you are already doing to the next level.
In addition to hiding what you no longer want to see with display:none, you can show something that is set up ahead of time and defaulted to display:none and then change it to display:block when it's time to show it.
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
// Remove the class that hides the element that you want to now see
document.querySelector(".afterClick").classList.remove("afterClick");
}
.afterClick { display:none; } /* Defaults to hidden */
<body>
<button id="mainButton"> Click here </button>
<div class="afterClick">Thanks!</div>
<div class="modal">
<form onclick="submitForm()">
<input type="text">
<button type="button"> Done </button>
</form>
</div>
</body>
You could do something like this to replace your button with a div containing its text.
var mainButton = document.getElementById('mainButton');
var buttonText = mainButton.textContent;
var newDiv = document.createElement('div');
newDiv.textContent = buttonText;
document.body.removeChild(mainButton);
document.body.appendChild(newDiv);
I have hidden a div tag and I am using JavaScript to make that div tag appear on the screen upon form submission, the problem is that the div tag appears but then it quickly disappears, I have no idea what is going on, I need it to stop disappearing, once the form is submit the div tag should remain visible on the page, the div tag only contains a p tag with some text, I have tried onClick on the button but I get the same result.
<html>
<body>
<form onSubmit="validateRadio()">
<div style="display: none" id="validationText" >
<p style="border: 1px solid black;">
"This field is mandatory".
</p>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
<script type="text/javascript">
function validateRadio(){
validationText.style.display="block";
}
</script>
</html>
Your page is likely refreshing (the action parameter defaults to the current URL if it isn't provided) which causes the DIV to "reappear". If you would like to block the form submission, use onSubmit but make sure to return false in your method.
function validateRadio(){
validationText.style.display="block";
// returning false will prevent the form submission
return false;
}
You're not doing anything to prevent the form from actually being submitted. Change your function to return false:
function validateRadio() {
validationText.style.display = "block";
return false;
}
and your handler to <form onSubmit="return validateRadio()">
jsFiddle example
Yes..
when you submit form, a new page is loaded (or same page is reloaded)
If you will see your validationText, you did'nt submit page, for example transform your
<form onSubmit="return validateRadio()">
and
function validateRadio(){
validationText.style.display="block";
return false
}
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.
First I have created a <div>....</div> which is hidden on pageload using javascript function. Then I have created an empty textbox using forms. Now when anyone clicks a button then the whole content of the hidden <div>....</div> should be loaded in the textbox in the form. What should be code for this?
maybe this way
<div id="hiddendiv"><strong>some</strong> content</div>
<button onclick="copyfunction();">click me</button>
<textarea id="textarea"></textarea>
<script>
function copyfunction() {
var textarea = document.getElementById('textarea');
var hiddendiv = document.getElementById('hiddendiv');
textarea.value = hiddendiv.innerText;
}
</script>
tested, it works
$("#textbox_id").val($("#div_id").html());
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 .