Working on learning JavaScript. I am working on creating a dynamic form and displaying the output. Below is a simple example. If I step through the script using the debugger tools: a)the form loads, b) the form takes an input c) the message displays d) the message disappears. I can't figure out how to get the message to persist. Thanks in advance for any help.
JavaScript
function displayQuestions() {
var down = document.getElementById("displayQuestionsDown");
// Create a break line element
var br = document.createElement("br");
// Create a form Dynamically
var form = document.createElement("form");
form.setAttribute("id", "myForm");
// Create an input element for Your Name
var yourName = document.createElement("input");
yourName.setAttribute("type", "text");
yourName.setAttribute("name", "yourName");
yourName.setAttribute("id", "yourName");
yourName.setAttribute("placeholder", "Your Name");
// create a submit button
var s = document.createElement("input");
s.setAttribute("type", "submit");
s.setAttribute("value", "Submit");
s.setAttribute("onclick", "showStory()");
// Append the Your Name to the form
form.appendChild(yourName);
form.appendChild(br.cloneNode());
// Append the submit button to the form
form.appendChild(s);
document.getElementsByTagName("p")[1]
.appendChild(form);
}
function showStory() {
let yourName = document.getElementById("yourName").value;
document.getElementById("display2").innerHTML = `Hello ${yourName}`;
// empty the form's values
document.getElementById("myForm").reset();
// hide the questions
document.getElementById("myForm").style.display = 'none';
}
function newForm() {
location.reload();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Replace this with your own information -->
<meta name="author" content="" />
<title>Dynamic Form</title>
<script src="Dynamic_form.js" defer></script>
<link rel="stylesheet" href="Dynamic_style.css" type="text/css">
</head>
<body>
<div class="container">
<h1>Dynamic Form</h1>
<div>
<p>
Click on the button to create
a Dynamic Form
</p>
<button onClick="displayQuestions()">
Generate
</button>
<p id="DisplayQuestionsDown"></p>
</div>
<div class="displayMessage">
<h3 id="display1"></h3>
<p id="display2"></p>
</div>
<div>
<button type="submit" class="new-btn" id="new-btn" onclick="newForm()" >Generate Again?</button>
</div>
</div>
</body>
</html>
CSS
.container {
padding-top: 50px;
max-width: 300px;
}
input {
font-size: 120%; margin-left; 20px; width: 290px; margin-bottom: 10px;
}
input[type=submit] {
border: 3px outset #444; float: center; background-color: #FFC;
}
button[type=submit] {
border: 3px outset #444; float: center; background-color: #F00;
}
button {
font-size: 120%; margin-left; 20px; width: 290px; margin-bottom: 10px;
}
div {margin: 20px 0px 100px 10px; }
try prevent form from being submitted
var form = document.createElement("form");
form.setAttribute("id", "myForm");
form.setAttribute("onsubmit", 'event.preventDefault();')
Related
I made a button to display a form to enter a class name in the input.
After that 1 button will exist (it is hidden after I click a button it will appear ) then after I press a Hidden button it will go to another page, but the problem is I don't know how to make the hidden button ( with data in it ) visible.
Here's my code:
const btn = document.getElementById("btn");
const btnn = document.getElementById("name").value;
btn.addEventListener('click', () => {
const form = document.getElementById("Add");
if (form.style.visibility === 'hidden') {
form.style.visibility = 'visible';
} else {
form.style.visibility = 'hidden';
}
});
btnn.addEventListener('click', () => {
const but = document.getElementById("infor");
if (but.style.visibility === 'hidden') {
but.style.visibility = 'visible';
} else {
but.style.visibility = 'hidden';
}
})
form {
visibility: hidden;
background-color: beige;
width: 60%;
height: 150px;
margin-left: 20%;
border-radius: 10px;
text-align: center;
display: inline-block;
}
.tablinks {
width: 20%;
height: 50px;
margin-top: 10%;
margin-left: 40%;
}
.btnn {
background-color: white;
}
.information {
margin-top: 5%;
}
#infor {
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="information.css">
</head>
<body>
<div class="tab">
<button class="tablinks" id="btn">Add here</button>
</div>
<form id="Add" class="information">
<p>Class:</p>
<input type="text" placeholder="enter your class here" id="name">
<button>Add</button>
<button id="infor"></button>
</form>
</body>
</html>
Try adding this attribute to button tags inside the form, as they behave like a submit button.
<button type="button"></button>
The problem is when I click the Option (button) that appears on every div after I fetch the data using the While loop it only appears the top div but not the current div that I am viewing. This is the picture when I click the Option it only appears the one place:
<?php
$connect = mysqli_connect('localhost','root','','users_data_allocation');
$feeder = "SELECT * FROM `trade_feed_post`";
$runfeed = mysqli_query($connect,$feeder);
while ($showfeed = mysqli_fetch_assoc($runfeed)) {
# code...
$feedAcc = $showfeed['OwnerACC'];
$feedDate = $showfeed['Date and time'];
$feedQuote = $showfeed['quote'];
$feedBuys = $showfeed['No.of buys'];
echo "
<div class=\"border\">
<p>".$feedAcc."</p>
<button onclick=\"showOpt()\">Option</button>
<div class=\"menu\">
This is menu.
</div>
</div>
";
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShowData</title>
<style>
.border{
background-color: black;
color: white;
border: 2px solid red;
height: 220px;
width: 400px;
font-family: ebrima;
font-size: 25px;
padding-left: 10px;
}
.menu{
display: none;
}
</style>
<script>
function showOpt() {
document.querySelector('.menu').style.display = 'block';
}
</script>
</head>
<body>
</body>
</html>
I would add this element parameter to <button onclick=\"showOpt(this)\">Option</button>.
Then change function so that will find correct .menu for button (using common parent .border)
function showOpt(elem) {
elem.closest(".border").querySelector(".menu").style.display = 'block';
}
Good day folks,
I am creating a to-do app, and so far when I enter the task in via the input the console shows my object firing but does not display it on the screen. Please look at my code and help me point out the issue, I have been debugging this for some time today.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/to-doStylesheet.css">
<title>To-Do App</title>
</head>
<body>
<div class=container>
<div class= base>
<div class = screen>
<img src="images/WarGreymon_Render.png" alt="Wargreymon">
<div id ="speach-bubble"> What is on your
agenda for today?
</div>
<div class = "dateTime">
</div>
</div>
<div class = "nameInput" id = "inputContainer">
<form class ="form">
<input type="text" class ="userInput" placeholder="Add Agenda and press enter">
<input type="submit" value ="Add">
</form>
</div>
</div>
<ul class="list"></ul>
<script src="js/add-task.js"></script>
</body>
</html>
CSS
.form
{
margin-left: 400px;
}
.userInput
{
width: 394px;
height: 30px;
background-color: #B62626;
font-family: Digimon Basic;
color: #33D61A;
margin-left: -359px;
}
.userInput ::placeholder
{
color: #33D61A;
font-family: Digimon Basic;
}
.list:empty
{
display: none;
}
.list
{
list-style: none;
margin-bottom: 20px;
}
.input[type="checkbox"] {
display: none;
}
.tick {
width: 30px;
height: 30px;
border: 3px solid #333;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.todo-item {
margin-bottom: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.todo-item span {
flex-grow: 1;
margin-left: 10px;
margin-right: 10px;
font-size: 22px;
}
JS
let tasks = [];
const currentdt = new Date()
function todo(text) {
const todo = {
text,
checked: false,
id: Date.now(),
timestamp: currentdt
};
tasks.push(todo);
console.log(tasks);
}
// Select the form element
const form = document.querySelector('.form');
// Add a submit event listener
form.addEventListener('submit', event => {
// prevent page refresh on form submission
event.preventDefault();
// select the text input
const input = document.querySelector('.userInput');
// Get the value of the input and remove whitespace
const text = input.value.trim();
if (text !== '') {
todo(text);
input.value = '';
input.focus();
}
});
//This function is to display new to do on the screen
function displaytasks(todo)
{
const list = document.querySelector('list');
const isChecked = todo.checked ? 'done': '';
const addedList = document.createElement("li");
addedList.setAttribute('class', `todo-item ${isChecked}`);
addedList.setAttribute('data-key', todo.timestamp);
addedList.innerHTML = `<input id="${todo.timestamp}" type="checkbox"/>
<label for="${todo.timestamp}" class="tick js-tick"></label>
<span>${todo.text}</span>
<button class="delete-todo js-delete-todo">
<img class = "delete" src="images/delete.png" alt="delete icon">
</button>`;
list.append(addedList);
}
So I am busy with the js file at the moment, I think it has to do something with the innerHTML, but I am not sure what exactly is wrong there, because when I look in the console on the HTML side I do not see the <ul class="list"></ul> firing at all to bring the new HTML elements.
Your help will be much appreciated
It looks like the code to display the todos is not being called, so I would recommend you add in a function call after reading in a new todo.
...
const text = input.value.trim();
if (text !== '') {
todo(text);
input.value = '';
input.focus();
displaytasks(tasks); // Show tasks after submission
}
});
//This function is to display new to do on the screen
function displaytasks(todo)
{
const list = document.querySelector('.list');
...
I wanted my textbox's text to disappear after I click submit button
This is how my website looks like
This is my HTML script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ask CodeBlox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label>Enter your question:</label><br>
<textarea type="text" id="myquestion" placeholder="Your question here"></textarea><br>
<input type="text" id="discord" placeholder="Your discord here"></input><br>
<button type="button" id="mybutton">Submit</button>
<script src="script.js"></script>
</body>
</html>
This is my css script:
body {
background-color: grey;
}
#myquestion {
background-color: white;
border-radius: 1.3mm;
border-top: grey;
border-left: grey;
height: 70mm;
width: 100mm;
padding: 8px;
}
#mybutton {
background-color: lightblue;
border-radius: 1.3mm;
border-right: grey;
border-bottom: grey;
}
#discord {
background-color: white;
border-radius: 1.3mm;
border-top: grey;
border-left: grey;
height: 20px;
width: 50mm;
}
This is my javascript script:
document.getElementById("mybutton").onclick = function(){
var ok = document.getElementById("myquestion").value;
var no = document.getElementById("discord").value;
const whurl = "I won't reveal my discord webhook token here"
const msg = {
"content": ok + "\n" + no
}
fetch(whurl, {"method": "POST", "headers": {"content-type": "application/json"}, "body": JSON.stringify(msg)})
}
It'll be really helpful if you can help me. I want the to textboxs' text to be gone after submit button is clicked and only show the placeholder text. If possible I wanted to know how to make a script like textbox on focus script maybe like when the textbox is focused, there's a blue border
After clicking on submit you should check if form is valid and then clear your textbox with :
document.getElementById("myquestion").value = "";
I have been asked to change text and style of a specific button within a form after a submit.
JavaScript
openWarningBox(
"/URL",
[{
'classNames':'button sec',
'text':'Continue',
'clickEvent': function() {
$(document.forms.button).trigger('submit');
}
}]
);
HTML
<form name="button" onsubmit="location.href='/URL'; return false;"></form>
I am aware this is done in a weird/wrong way and if it was written properly it would not have been an issue, but is there some way for me to change that button's classNames and text after it is being submitted?
I am not sure if this is what you are looking for but I used the DOM to change the button text and style you can also change the font that way. The DOM seems like a good option to accomplish this task.
var btn = document.getElementById('btn')
btn.addEventListener('click', change)
function change(e){
e.preventDefault()
btn.style.backgroundColor = 'blue';
btn.style.border = 'blue';
btn.style.colr = 'black';
btn.style.borderRadius = '26px';
btn.innerHTML = 'Submitted'
}
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button type="submit" id='btn'>Submit</button>
</body>
</html>