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>
Related
So the code worked for the guy on the tutorial.
I then checked my code from his git repos but couldn't find any mistakes.
It's a very simple website where it just saves the values which you input in the field as a list item. It showed an error.
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value)
console.log(myLeads)
})
for (let i = 0; i < myLeads.length; i++) {
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
body{
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
input{
height: 50px;
width: 100%;
border: 1px solid green;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
button{
background-color: green;
color: antiquewhite;
height: 50px;
width: 150px;
border: 0ch;
border-radius: 10px;
}
<!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="ChromeEx.css">
</head>
<body>
<input type="text" id="input-el">
<button class="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>
<script src="ChromeEx.js" defer></script>
</body>
</html>
Since you are using const inputBtn = document.getElementById("input-btn") to get the button, but it does not have an id, you need to add an id for the button
So change
<button class="input-btn">SAVE INPUT</button>
to
<button id="input-btn" class="input-btn">SAVE INPUT</button>
To help you resolve issues like this in the future, you need to know how to interpret the error shown in the developer console. What it's saying is that you're trying to interact with or access something that doesn't exist (null). This means the variable you're using (inputBtn) holds the value null.
It's pretty clear then that what you thought you were assigning to this variable didn't work out the way you expected. The assignment code looks good, so we can be sure that the getElementById() method is not "returning" the intended value. Indeed, that method will return null when the id given to it is not found in the html.
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';
}
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 = "";
When I run this JavaScript code, button2 doesn't get displayed again. I'm not sure why this is happening. I am trying to use this in a game I am creating. I searched this up on Google multiple times and couldn't find an answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.btn1 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
}
.btn2 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
display: none;
}
</style>
</head>
<body>
<button class="btn1" onclick="showBtn2()">
Show Button 2
</button>
<button class="btn2" id="btn2"></button>
</body>
<script type="text/javascript">
const btn2 = document.getElementById("btn2");
function showBtn2() {
btn2.style.display = "auto";
}
</script>
</html>
A good way to handle this and provide more reusable code is to use <element>.classList.remove() and <element>.classList.add() to set or unset a hidden class. This can also be useful for toggling with <element>.classList.toggle().
This has the added advantage of being able to set your default display style in the CSS rather than burying it in the javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.btn1 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
}
.btn2 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
/* allows setting preferred display in CSS */
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<button class="btn1" onclick="showBtn2()">
Show Button 2
</button>
<button class="btn1" onclick="toggleBtn2()">
Toggle Button 2
</button>
<button class="btn2 hidden" id="btn2">Button 2</button>
</body>
<script type="text/javascript">
const btn2 = document.getElementById("btn2");
function showBtn2() {
btn2.classList.remove("hidden");
}
function toggleBtn2() {
btn2.classList.toggle("hidden");
}
</script>
</html>
There is no auto display is CSS. As tarkh mentioned in his answer, display block would insert the new button below the initial button, and other display options would have other behaviors. But the display property does not have a value auto.
This may be my opinion, but I think modern websites shouldn't use the onclick function for events. We should separate our HTML, JS and CSS. This helps with reusability. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
So I would create a solution that uses an event handler in the Javascript. Something like:
window.onload = function(){
const btn2 = document.getElementById("btn2");
const btn1 = document.getElementsByClassName("btn1");
for(let i = 0; i < btn1.length; i++) {
btn1[i].addEventListener('click', function(){
btn2.style.display = "block";
})
}
}
Maybe btn2.style.display = "block";?
Or, as #charlietfl added, btn2.style.display = "inline"; since that is what browser default is for a button
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
display: inline means that the element is displayed inline, inside the
current block on the same line. Only when it's between two blocks does
the element form an 'anonymous block', that however has the smallest
possible width.
.btn1 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
}
.btn2 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button class="btn1" onclick="showBtn2()">
Show Button 2
</button>
<button class="btn2" id="btn2">new button here</button>
</body>
<script type="text/javascript">
const btn2 = document.getElementById("btn2");
function showBtn2() {
btn2.style.display = "block";
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.btn1 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
}
.btn2 {
background-color: white;
border: 2px solid black;
border-radius: 12px;
display: none;
}
</style>
</head>
<body>
<button class="btn1" onclick="showBtn2()">
Show Button 2
</button>
<button class="btn2" id="btn2">Button 2</button>
<script type="text/javascript">
const btn2 = document.getElementById("btn2");
function showBtn2() {
btn2.style.display = "inline";
}
</script>
</body>
</html>
Use display = inline or block instead of auto.
Add some text content to button 2 like this:
<button class="btn2" id="btn2">Button 2</button>
CSS: "display: auto;"?
display does not have an auto attribute.
you can try "inline" or "block".
'''
function showBtn2() {
btn2.style.display = "inline";
}
'''
Try using
btn2.style.display = "block";
for your script because css display doesn't have that kind of attribute you
you can read it more here : more
you'll see there's no such thing as display:auto
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();')