Adding elements to form dynamically with javascript - javascript

I'm trying to add elements when a button is clicked, my code looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<form action="" method="POST" id="form-one">
<button onclick="addChargingSchedule()">Add</button>
<div class="cs"></div>
</form>
</center>
<script>
var elem = document.getElementsByClassName("cs");
function addChargingSchedule() {
var form = document.getElementById("form-one")
var id = document.createElement("input");
id.setAttribute("type", "text");
id.setAttribute("name", "one");
id.setAttribute("id", "one");
id.setAttribute("placeholder", "1");
form.appendChild(id)
}
</script>
</body>
</html>
The code works, when I click on the button, an input text is created but after like 0.1 secondes, the page is refreshed and the input disapears again.
Someone knows what am I doing wrong?

You can add submit event listener and stop it like this:
form.addEventListener('submit', (event) => {
event.preventDefault();
});
Working example taken by your code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<form action="" method="POST" id="form-one">
<button onclick="addChargingSchedule()">Add</button>
<div class="cs"></div>
</form>
</center>
<script>
var elem = document.getElementsByClassName("cs");
var form = document.getElementById("form-one")
function addChargingSchedule() {
var id = document.createElement("input");
id.setAttribute("type", "text");
id.setAttribute("name", "one");
id.setAttribute("id", "one");
id.setAttribute("placeholder", "1");
form.appendChild(id);
}
form.addEventListener('submit', (event) => {
event.preventDefault();
});
</script>
</body>
</html>

Related

why is my script not printing text when i click the button

<!DOCTYPE html>
<html>
<head>
<title>WhiteList</title>
</head>
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button onclick="click()">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
function click(){
var name = document.getElementById('1').value;
if (name == "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else{
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
</html>
so this is the code, there are no errors. but the problem is that the text won't print when i insert my name and click the button.... i realy cant seem to find the problem.
Try add onclick to the JavaScript:
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button id="btn">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
var name = document.getElementById('1').value;
if (name === "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else {
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
Problem here is click is defined as a click action so the engine is thinking you are calling the click of the button. Simple test shows what the browser sees.
<button onclick="console.log(click)">Check</button>
What can you do? Change the name, or even better, use addEventListener to bind the event listener.

creating form by using javascript for specific div tag

I need to create form by using JavaScript. Then I have created code as follows. I need to add this form to
div id="form1"
by using getElementsById. But it does not working.
<html>
<head>
<title>
</title>
</head>
<body>
<div id="form1">
</div>
<script>
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
var i = document.createElement("input");
i.setAttribute('type',"text");
i.setAttribute('name',"username");
var s = document.createElement("input");
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");
f.appendChild(i);
f.appendChild(s);
document.getElementsById("form1")[0].appendChild(f);
</script>
</body>
</html>
It has to be like this:
document.getElementById("form1").appendChild(f);
This is wrong:
document.getElementsById("form1")[0].appendChild(f);
working code here
EDIT
Here is how you can append a table
Hope this helps!
Change document.getElementsById to document.getElementById and take out the [0].
<body>
<div id="form1">
</div>
<script>
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");
f.appendChild(i);
f.appendChild(s);
//and some more input elements here
//and dont forget to add a submit button
document.getElementById("form1").appendChild(f);
</script>
</body>
Have a look here: https://jsfiddle.net/L65fpfjj/
:)

Display page inside div from submitting form

I'm attempting to create a page with a simple input form, use that to create the URL required and display the resulting page in a div all in one go. When I sent the user directly to the created URL from clicking submit that worked perfectly, but I can't seem to get it to do anything with the following code:
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
show = "www.someurl.com/" + encodeURIComponent(theInput.value);
return show;
$('#display').load(show);
}
</script>
<div id="display"></div>
I've changed three things and got the code to work:
1. Changed the div to an iFrame
2. Added an "action" attribute to the form and set it to "#" so that the program doesn't exit the webpage upon clicking the form.
3. Removed the "encodeURIComponent" command from the code, because it didn't work with it..
This is my example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="theForm" action="#">
<input id='subj'/>
<input type='submit'/>
</form>
<iframe id="display"></iframe>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
var show = "http://someUrl.com/" + (theInput.value);
console.log(show);
document.getElementById("display").src= show;
}
</script>
</body>
</html>

Incorporating JS in Html page

I want to make a submit button that only activates when a radio button is checked, it works perfectly in JS fiddle http://jsfiddle.net/sYNj7/94/
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
but it doesn't work when I try to make it into a html page with notepad++. I get the radio button next to a disabled submit button but the submit button doesn't activate when the radio button is checked. this is the code I have at the moment.https://gist.github.com/anonymous/e5f19f5745396926ce02
Currently you attempt to access HTML elements before the page is fully loaded; they are not available at that point.
1. Put your code in a named function
function myFunc() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
....
2. Use the body onload event to ensure it runs when all the HTML elements are available for use:
<body onload="myFunc();">
(JSFiddle does this for you by default)
Just put your script just before closing body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Captive portal</title>
</head>
<body>
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
</body>
</html>
It happens because you're trying to get the elements before they are rendered in the page.
In jsFiddle, it works, because they wrap your code into a onload event, and then, all the elements are already rendered when you try to use them.
There are two simpler ways of achieving what you want:
You can put your script tag right before ending the body tag, e.g:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- all your content -->
<script>
</script>
</body>
</html>
Or you can wrap your code in a onload or DOMContentLoaded event:
<script>
document.addEventListener('DOMContentLoaded', function(e) {
// your code goes here
});
</script>

Disable the text boxes

I am beginner to html. I have two text boxes say t1 and t2 If t1 is filled with some data then then other text box t2 should be disable. Please let me know hot to do it. Thanks in advance
Based on your simple scenario description, here's an implementation that works cross-browser and without any third-party javascript library:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t1.onchange = function(){
t2.disabled = t1.value.length > 0;
}
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function verify(){
var t1 = document.getElementById ('first');
var t2 = document.getElementById ('second');
if (t1.value != '') {
t2.setAttribute('disabled','disabled');
return true;
}
if (t2.value != '') {
t1.setAttribute('disabled','disabled');
return true;
}
}
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>
You can't achieve this with plain HTML.
Following the guidelines of progressive enhancement, you should first implement a server side check in whatever form handler you are using to process the submitted data.
Then you can consider adding JavaScript for a client side check. Something along the lines of:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disabling form controls</title>
</head>
<body>
<form id="myForm" action="http://example.com/">
<div>
<input name="t1">
<input name="t2">
</div>
</form>
<script type="text/javascript">
(function () {
var t1 = document.forms.myForm.elements.t1;
var t2 = document.forms.myForm.elements.t2;
var handler = function handler() {
t2.disabled = (t1.value !== "");
};
t1.onchange = handler;
}());
</script>
</body>
</html>
(Although I would use a library such as YUI or jQuery to add event handlers in a fashion that is better protected from overwriting in a crossbrowser compatible way).
You might want some tutorials on JavaScript and the DOM so that this makes sense.

Categories