trouble with onclick for making display none and block - javascript

I'm trying to use onclick code and style.display in js to hide a something and make a dive which it's display is none by default to get block and appear.
The first one won't hide and the other one won't appear!
The script file works fine, I have other things in js which work perfectly.
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<a href="" id="chatbutton" >
<div class="mychat text-center" onclick="showDiv()">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
.mychat_open{
width: 15vw;
height: 20vh;
background-color: black;
position: fixed;
bottom: 20px;
right: 20px;
color: white;
opacity: 0.8;
min-height: 28px;
}

Your JS works fine, but you have the onclick function inside an empy <a href=""> tag. You can either add a # to it like this <a href="#"> or change it to some other kind of element such as a <button> to keep the page from reloading when it is clicked.
You should toggle the "d-none" class for the element you want to show instead.
document.getElementById('chatbox').classList.remove('d-none')

If the goal is to make the chat box hidden initially, then you can set its display style property to display:none.
<div id="chatbox" class="mychat_open text-center d-none" style="display:none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
This will hide the chatbox until the user clicks the button. This works because the js changes the style.display property of the element with id 'chatbox' to block.

I've added a return false to the link to prevent a page reload
added a style rule to actually hide the box initially, so we can show it :)
(added the p to visually show it's the other box showing, not some hiccup.)
function showDiv() {
document.getElementById('chatbutton').style.display = "none";
document.getElementById('chatbox').style.display = "block";
}
<html>
<body>
<a href="" id="chatbutton">
<div class="mychat text-center" onclick="showDiv(); return false;">
<p class="chattext">Chat Support</p>
</div>
</a>
<div id="chatbox" class="mychat_open text-center d-none" style="display: none;">
<p class="chattext">Chat Support Box</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
</div>
</body>
</html>

Dear May be this will help you in your case
cancel the a string and add button like
<button onclick="myFunction()">Chat Support</button>
Add in your div with ID chatbox style display none,
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
then add java
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
your complete forma like this
<button onclick="myFunction()">Chat Support</button>
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
<p class="chattext">Chat Support</p>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
<input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>
<script>
function myFunction() {
var x = document.getElementById("chatbox");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
More details may you can find
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

Related

I want to add an button onclick function, to add several toasts in javascript

I have a form. And I want to write an onClick function which whenever is clicked, a toast including inputs value appears at the end of the page.
here I wrote a function that produce a toast just on the first click.
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
But I want when user fill the form and click on "add vehicle" button to add another vehicle again and again, each time a toast including information of the previous vehicle user added, produce.
To understand why you aren't getting the results you're looking for, you have to understand the DOM. Currently, whenever the button is clicked, you are always changing the same DOM element.
var x = document.getElementById("toast1");
x.innerHTML = y + " has a " + z + "<span >×</span>";
x.className = "show";
See how you're selecting the element with the ID of toast1 and manipulating that element every time by setting its innerHTML and className?
What you want to do is create a new element, and place that new element underneath the element with the ID of toast1.
To create an new element, you would use createElement:
var newEl = document.createElement("p");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
And then to insert it use appendChild:
x.appendChild(newEl);
Here's the complete code:
function Function1() {
var y = document.getElementsByTagName("select")[0].value;
var z = document.getElementsByTagName("input")[0].value;
var x = document.getElementById("toast1");
var newEl = document.createElement("div");
newEl.innerHTML = y + " has a " + z + "<span >×</span>";
newEl.className = "show";
x.appendChild(newEl);
}
<form class="needs-validation" novalidate>
<h5>Select the owner?</h5>
<div class="form-group col mx-auto" style="width: 80%;">
<label for="validationDefault01" class="sr-only">households</label>
<select
class="custom-select place-holder form-control form-control-lg OwnerName"
style="font-size: 15px;"
id="validationDefault01"
style="border-radius: 2px;"
required
>
<option value="" selected hidden>Choose...</option>
<option value="Jack London"> Jack London</option>
<option value="Sarah London"> Sarah London</option>
<option value="Mike"> Mike</option>
</select>
</div>
<br />
<h5>What is the brand?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">Brand</label>
<input
class="form-control brand"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
placeholder="Brand"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5>What is the model year?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<label for="validationCustom01" class="sr-only">yyyy</label>
<input
class="form-control"
type="text"
required
id="validationCustom01"
style="font-size: 15px; height: 40px;"
onkeypress="return CheckNumeric()"
placeholder="yyyy"
/>
<div class="valid-feedback">correct</div>
</div>
<br />
<h5 class="mx-2">How much is worth?</h5>
<div class="input-group mx-auto" style="border-radius: 8px; width: 75%;">
<div class="input-group-prepend">
<div
class="input-group-text font-weight-bold"
style="
font-size: 15px;
background-color: rgba(50, 157, 105, 1);
color: white;
"
>
$
</div>
</div>
<label for="validationDefault01" class="sr-only">deposite</label>
<input
type="text"
class="form-control floatNumber"
id="validationDefault01"
style="font-size: 15px;"
onkeypress="return CheckNumeric()"
onkeyup="FormatCurrency(this)"
placeholder="example: 10000"
required
/>
</div>
<p id="demo"></p>
<br />
<div class="row">
<div class="col">
<button
class="quebtn1 mx-auto"
style="width: 130px;"
type="button"
onclick="Function1()"
>
Add Vehicle
</button>
</div>
</div>
<div class="row">
<div class="col-6">
<button class="quebtn1 float-right" type="button">Back</button>
</div>
<div class="col-6">
<button class="quebtn1" type="submit">Next</button>
<br />
</div>
<div class="row pt-0 mx-auto text-center">
<div
class="toast-body toast no-gutters"
data-autohide="false"
role="alert"
aria-live="assertive"
aria-atomic="true"
id="toast1"
></div>
</div>
</div>
</form>
Also, here are some tips that aren't directly related to your question:
There's also querySelector instead of stuff like getElementsByTagName. It lets you basically use CSS selectors to select elements, which a lot of people find easy to use.
For this sort of DOM manipulation, you also might want to try using the jQuery library
It's good to learn how DOM manipulation works for educational purposes, but on real projects the field has moved towards UI libraries like React and Vue.
You named your function Function1. This works, but it's better if you could name it something more descriptive, like addVehicle. That way it's more clear what it's doing. With one function Function1 is probably fine, but imagine if you had 12 functions and had to think to yourself, "Wait, what is Function3 doing again? Did I want to use Function7?"
It's good to learn by doing, but it's also good to mix that with a more "bottom up" approach of reading books and stuff to give you the foundation you'll need for fun projects like this.

How to create an auto incrementing *include another input* button?

I was looking all over for a snippet to include another input bootstrap input group and I couldn't find one so wouldn't you know it I coded one myself.
<style>
.CENTERFORM {
display: table;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- Player And Score -->
<div id="PLAYERCONTAINER">
<div class="col-9 col-md-8 CENTERFORM my-3 text-center">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">Player 1</span>
</div>
<input type="text" class="form-control" id="PLAYER_NAME">
<div class="col-3">
<input type="number" class="form-control" id="PLAYER_SCORE">
</div>
</div>
<button class="btn btn-outline-success" onclick="cloneThis(this,this.parentNode)">Another?</button>
</div>
</div>
<script>
// Autoincrement button for player names and scores
let count = 1;
function cloneThis(button, playerform) {
const clone = playerform.cloneNode(playerform);
const playerNameInput = clone.childNodes[1].childNodes[3].id = `PLAYER_NAME${count}`;
const playerScoreInput = clone.childNodes[1].childNodes[5].childNodes[1].id = `PLAYER_SCORE${count++}`;
console.log(playerScoreInput);
button.remove();
console.log("clicked");
document.getElementById('PLAYERCONTAINER').append(clone);
}
</script>

Bootstrap : Button appearance changes upon hover

I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)

Make a form responsive into a div

I am trying to make a form responsive and load it into a div, so that the form takes the shape of the div without over floating. I have applied row-fluid to the form element and the div and it still not responsive as shown
var div_container = document.getElementById('active-container');
var users = '';
var formy = '';
for (var i = 0; i < json.length; i++) {
users += '<span style="font-size:27px;"><strong>' + json[i].email + '</strong></span><br/>' + '<form class="row-fluid" style="margin-top:0px;" method="post" action="search"><input class="row-fluid" type="text" value="'+json[i].access+'" name="searchName" id="searchName" readonly/><button class="btn btn-success" type="submit"><i class="icon-circle-arrow-right icon-large"></i>FETCH</button></form>' + '<hr>';
}
EDITTED:
This is the div for the containing form tag
<div style="overflow: auto; overflow-x: auto; height:420px; color:#4b4f54; font-size:13px;" id="active-container">
</div>
Please how do I make the responsive into the div and attach the button to the right of the input type
Why not use something as simple as this. No JS needed.
Updated: inline style added. Also you can adjust by % within the inline styling, which I have found useful.
The markup
<div class="container">
<h2>Form name</h2>
<form>
<div class="form-group">
<input style="display:inline; width:75%" type="email" class="form-control" id="email" placeholder="Enter email">
<button style="width:24%"type="submit" class="btn btn-success pull-right">Fetch</button>
</div>
</form>
</div>
The CSS: adjust max-width as needed or remove altogether.
.container {
margin: 20px;
padding: 10px 10px;
max-width: 500px;
background: #FDFDFD;
box-shadow: 2px 2px #D8D8D8;
}
JsFiddle Demo
Float left Demo
use .form-inline to make form responsive , to make button on right use .pull-right class.
If you want to have input and button just aside each other just use this :-
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-sm-4 control-label">DOB - Age:</label>
<div class="col-md-7 col-xs-4 input-group">
<input type="text" id="" class="form-control" name="" style="margin-left:15px;" value="" tabindex="-1" />
<span class="input-group-btn" style="">
<button class="btn btn-success" type="submit"><i class="fa fa-angle-right" style="margin-left:15px"></i>Button</button>
</span>
</div>
</div>
</div>
Add class .form-inline to the element

Use javascript only in this form

I have a form that will only display the next question once you have entered an input in the field. My trouble right now is, how will I display the next question using javascript only. What I am thinking about right now is to make a div in each of the question hide it then if the user have entered a value and clicked next the next question will not be hidden. My question is there another way to do that using Javascript only.
HTML codes below...there will be 20 <div>s in this form just posted 2 because the code is just the same only the labels are different
<div id="q1">
<label for="nanme">Full Name</label>
<input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">
<div class="control-group">
<div class="controls">
<button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
</div>
</div>
</div>
<div id="q2" style="display:none;">
<label for="Age">Age</label>
<input class="input" id="age" name="age" type="text" placeholder="Age" value="">
<div class="control-group">
<div class="controls">
<button id="btnbck" >Back</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="button" >Next</button>
</div>
</div>
</div>
JS
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q2').style.display = 'block';
document.getElementById('q1').style.display = 'none';
}
This site will help you to see what I would like to do with my form
Hide all questions except for the first one:
// CSS
.question + .question {
display: none;
}
When users click next, hide the first question, show the next question:
// JS
var step = 1;
$('button').click(function() {
$('#q' + step++).hide();
$('#q' + step).show();
});
codepen
You can add a count variable to know next question's number, then show it and hide the previous question:
Example:
var count = 2;
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q'+ count).style.display = 'block';
document.getElementById('q' + (count -1)).style.display = 'none';
count ++;
}
This is a good way for several questions.
You can change style by CSS classes
.hide{
display: none;
}
.show{
display: block;
}
And apply this class in your tags depending on the case:
Final Javascript:
var count = 2;
function disable(){
document.getElementById('nxtbtn').removeAttribute("disabled");
}
function next(){
document.getElementById('q'+ count).className = "show";
document.getElementById('q' + (count -1)).className = "hide";
count ++;
}
Final HTML:
<div id="q1" class="show">
<label for="nanme">Full Name</label>
<input class="input" id="name" name="name" type="text" placeholder="Full Name" value="" onkeyup="disable()">
<div class="control-group">
<div class="controls">
<button id="nxtbtn" name="nxtbtn" disabled onclick="next()">Next</button>
</div>
</div>
</div>
<div id="q2" class="hide">
<label for="Age">Age</label>
<input class="input" id="age" name="age" type="text" placeholder="Age" value="">
<div class="control-group">
<div class="controls">
<button id="btnbck" >Back</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<button id="button" >Next</button>
</div>
</div>
</div>

Categories