Develop Reference

How to display div with same ID and OnClick function - Javascript, HTML and CSS

I'm fairly new to Javascript, and i've reached an issue I can't figure out yet, so I'll explain it as best as I can.
I've got 2 divs containing a reply link with the same ID, OnClick. Only difference is the data-attribute which I thought could be used to differentiate the two. There are 2 reply divs that are styled to be hidden. The aim is once the reply link is clicked, the correct div will display below it.
The issue is, when you click any of the two Reply links, it only opens the first reply div below the first parent div. I'll created a little example to give a better understanding:
// Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database
function replyLink(element) {
document.getElementById('reply').style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink() {
document.getElementById('reply').style.display = "none";
}
#comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
#comment #content{
border: none;
padding: 15px;
font-size: 12px;
}
#comment #link{
border: none;
padding: 5px;
margin-top: 5px;
}
#comment #link a{
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
#comment #link a:hover{
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
#reply{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div id="comment">
<div id="content">
Content #1
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<div id="comment">
<div id="content">
Content #2
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
Would a java genius be able to help me out.

You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example
function replyLink(index) {
document.getElementById('reply_' + index).style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink(index) {
document.getElementById('reply_' + index).style.display = "none";
}
.comment {
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .content {
border: none;
padding: 15px;
font-size: 12px;
}
.comment .link {
border: none;
padding: 5px;
margin-top: 5px;
}
.comment .link a {
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
.comment .link a:hover {
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
.reply {
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">
Content #1
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
</div>
</div>
<div class="reply" id="reply_0" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
</div>
<div class="comment">
<div class="content">
Content #2
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
</div>
</div>
<div class="reply" id="reply_1" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
</div>

While the use of an id is straightforward when first working with JavaScript and HTML, it's use is discouraged as an anti-pattern. IDs make for brittle code (as you are seeing here) and don't scale well. Instead, don't use ids at all and instead use classes or a relative reference to the elements, such as this, .closest(), nextElementSibling, parentNode, etc.
Also, using hyperlinks as a "hook" to initiate some code upon a click event is semantically incorrect. Hyperlinks are for navigation and people who use screen readers will have difficulty navigating your page. Just about every visible HTML element supports a click event, so just attach a click handler directly to the element instead of wrapping the element with a hyperlink.
Lastly, there is no need for separate show and hide functions. Just add or remove a "hidden" class based on what was clicked.
You can see in my answer how much cleaner the HTML and JavaScript are without ids.
See comments inline below.
// Set up a single event handler for any clicks to any reply or Close
document.addEventListener("click", function(event){
// Check to see if the click originated at a Reply element
if(event.target.classList.contains("reply")){
// Find the closest ".comment" ancestor of the clicked reply
// element and then get the next element sibling to that and
// unhide it.
event.target.closest(".comment")
.nextElementSibling.classList.remove("hidden");
} else if(event.target.classList.contains("replyContainer")){
event.target.classList.add("hidden");
}
});
.hidden { display:none; }
.comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .reply{
padding: 5px;
margin-top: 5px;
}
.replyContainer{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">Content #1</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 1[Close]</div>
<div class="comment">
<div class="content">Content #2</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 2[Close]</div>
<div class="comment">
<div class="content">Content #3</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 3[Close]</div>

Form Element Resizing After Submission

I am working on a system that makes use of a form to enter some data into a database. The system works as expected except for an issue with the display of the form after it has been submitted. When the form is submitted the page reloads and will show the info submitted as placeholder text inside of the form fields, and the "Save Changes" button will display as "Changes Saved!" for a few seconds. However, some of the input fields width property gets altered as well. Specifically my half-width form elements.
The width for these elements is defined as width: calc(50% - 24px), which is 265px. Additionally, there is a 5px padding and 2px border for these elements. This comes out to a total width of 279px, as expected. However, when the form is submitted and the page is reloaded the total width of the element comes out as 265px, retaining the 5px padding and 2px border, but dropping the internal width to 251px. Nowhere in my code is there anything that changes the width ever, and checking with dev tools shows that the width, padding, and border I defined are still there. This has the rather annoying effect of shifting both elements over after the form is submitted. Navigating to another page and back resolves the issue.
I have tried using !important and have checked over all of the code (JavaScript) echoed out from PHP when the submission is successful that interacts with the form in a capacity for changing things, and nothing should have this impact. I only change the color and text of the submit button.
Any help would be greatly appreciated!
Edit 1:
The code below is a snippet of the entire form, excluding the PHP. I have modified the code so that clicking save changes does not submit the form but will show the change for the submit button, as otherwise submitting makes the form vanish. The error does not occur in the snippet of code however as a result of not "reloading" the page.
function success() {
var button = document.getElementById('clientInfoBtn');
var normalColor = button.style.backgroundColor;
var normalValue = button.value;
button.style.backgroundColor = '#33cc33';
button.value = 'Changes Saved!';
setTimeout(function() {
button.style.backgroundColor = normalColor;
button.value = normalValue;
}, 3000);
return false;
}
.standardFormBox {
margin-bottom: 20px;
width: 600px;
}
.standardFormBoxInner {
border: 1px solid silver;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.standardFormHeading {
font-family: "Helvetica";
font-size: 16pt;
color: white;
background-color: #1975FF;
margin: 0;
padding: 10px;
}
.standardFormBtn {
color: white;
font-size: 14pt;
background-color: #1975FF;
border: none;
padding: 10px 10px;
margin-bottom: 15px;
}
.standardFormBtn:hover {
cursor: pointer;
background-color: #0052cc;
}
.standardFormInput {
font-size: 14pt;
font-family: "Trebuchet MS";
margin-bottom: 10px;
padding: 5px;
}
.sfiMultiLabel {
font-size: 14pt;
font-family: "Trebuchet MS";
}
.sfiHalf {
width: calc(50% - 24px);
}
.sfiText {
font-size: 14pt;
margin: 0;
}
.sfiTextHalf {
width: calc(50% - 10px);
}
.sfiTextFull {
width: 100%;
}
.sfiFull {
width: 100%;
}
.sfiLeft {
margin-right: 20px;
}
<form name="accountInfoForm" method="POST">
<div class="standardFormBox">
<p class="standardFormHeading">Business Billing Information</p>
<div class="standardFormBoxInner">
<p class="sfiText sfiTextHalf">Business Name</p>
<input type="text" name="cBusiness" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Name On Bank Account</p>
<input type="text" name="cName" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Billing Email</p>
<input type="email" name="cEmail" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Street Address</p>
<input type="text" name="cStreet" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">City</p>
<input type="text" name="cCity" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiLeft sfiTextHalf">State</p>
<p class="sfiText sfiTextHalf">ZIP</p>
<input type="text" name="cState" placeholder="" class="standardFormInput sfiLeft sfiHalf">
<input type="text" name="cZip" placeholder="" class="standardFormInput sfiHalf">
<p class="sfiText sfiTextHalf">Phone Number</p>
<input type="text" name="cPhone" placeholder="" class="standardFormInput sfiFull">
</div>
</div>
<input type="submit" name="clientChangeInfo" value="Save Changes" class="standardFormBtn" id="clientInfoBtn" onclick="return success()">
</form>

How can I change the email form (mailchimp) on this Delayed Modal Popup to this (getresponse) code?

This has been a nightmare for me. I can not figure out how to simply change the form code that pops up after 5 seconds. When I do change it, the colors, the fonts everything changes on me. I've tried changing 1 thing at time and at one point I got close but I couldn't change the color of the button and in the explore browser the format was all out of wack... If any one can help me, that would be amazing!
original code
$(document).ready(function ()
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
.instructions {
text-align:center;
font-size:20px;
margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////
// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #40c348;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #40c348;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #5D9E62;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #40c348;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
<div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
<p>Sign up for our Deal Alerts and save
$25 Off of your first order of $50 or more!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>
THIS IS THE CODE I WOULD LIKE TO CHANGE THE FORM TO -
<button type="button" button-data-id="1" id="lead_button_form" div class="form_box" >
Enter A Valid Name and Email
<form class="form-horizontal validate formdetails show" name="optin" id="optin" form action="" accept-charset="utf-8" method="post">
<!-- Name -->
<input type="text" name="name" placeholder="Name" /><br/>
<!-- Email field (required) -->
<input type="text" name="email" placeholder="Email" /><br/>
<!-- Campaign token -->
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="G" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://reviewtheinside.com/Easy-eCash-Review-and-Bonuses.htm"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="" />
<!-- Subscriber button -->
<input type="submit" button type="button" button-data-id="1" id="lead_button" value="SUBMIT"/>
<div class="clearfix"></div>
<div class="mbr-row">
<div class="inner-addon right-addon"><p id="smtp-error"></p></div>
</div>
</form>

are you sure you are calling the function properly
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
})(); //call the function
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}

How to use FontAwesome icon as submit button in HTML form

I'm trying to get this FontAwesome search icon to act as a submit button:
Search form submit IMG
Link to search form (not evergreen):
https://themirrorman.co
I've looked through various other questions, including use of JS and using a button tag, and still couldn't get this to work.
Here is my code:
CSS:
#header-search-submit {
position: absolute;
z-index: 1;
right: 36px;
top: 6px;
font-size: 24px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
input[type="text"] {
border: 1px solid #881d98;
border-radius: 24px;
border-color: white;
}
/* header search desktop */
#media screen and (min-width: 800px) {
#header-search-desktop-div {
position: absolute;
left: 150px;
width: 450px;
margin-top: 0;
margin-bottom: 0;
}
}
HTML:
<div id="header-search-desktop-div">
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get">
<fieldset>
<span class="text">
<input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i>
</span>
</fieldset>
<input type="hidden" name="post_type" value="product" />
</form>
</div>
The idea of using JS to create the submit function in the 'Space before /head' ? :
<script>$('#header-search-desktop-span').click(function() {
alert('Searching for '+$('#header-search-submit').val());
});
</script>
I'm clearly doing something very wrong, please help =D

You'll need to make the submit button have FontAwesome as the font-family, and use  as the value.
<input style="font-family: FontAwesome" value="" type="submit">
You can use additional CSS to change the styling of the button.

put it inside button tag
<button class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>

How to change button colour after clicking another button

I want to make my buttons change colour after clicking on another button. At the moment, I have an idea in mind... but that would be creating more html pages which is not what I want. The code below features 3 buttons where button1 is set as dark grey, and button2 and button3 are light grey. Clicking button2 or button3 should change to dark grey, and button1 should be light grey. I have tried researching on the internet and haven't found any solution to this.
Note: I have created my buttons using divs.
Here's a snippet of my code:
.select:hover {
background-color: #2a2a2a;
}
.select:visited {
background-color: pink;
}
.bcardunlaminated {
display: table-cell;
height: 37px;
width: 210px;
float: left;
background-color: #2a2a2a;
text-align: left;
margin-top: 10px;
line-height: 36px;
}
.bcardmatt {
display: table-cell;
height: 37px;
width: 225px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 36px;
}
.bcardspotuv {
display: table-cell;
height: 37px;
width: 230px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 17px;
}
.mat-font {
color: white;
font-size: 9pt;
text-align: center;
}
<div class="materialtable">
<div class="materialrow">
<a href="javascript:;" id=" hideaway1" onclick="document.getElementById('hideaway1').style.display='block';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='none';toggleTable();return false">
<div class="bcardunlaminated select">
<div class="mat-font">1</div>
</div>
</a>
<a href="javascript:;" id=" hideaway2" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='block';
document.getElementById('hideaway3').style.display='none';toggleTable2();return false">
<div class="bcardmatt select">
<div class="mat-font">2</div>
</div>
</a>
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';toggleTable3();return false">
<div class="bcardspotuv select">
<div class="mat-font">3</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" style="display:block;">1</div>
<div id="hideaway2" style="display:none;">2</div>
<div id="hideaway3" style="display:none;">3</div>
Any suggestions?

Just add a change to the backgroundColor. I'm using orange here, use the one you want.
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false">
You HAVE to use unique IDs, you are using the same with an space in front, what makes it very confusing and buggy

My suggestion - using jQuery since it seems you do not mind that based on your accepted answer:
You will need to change toggleTable to take an idx to toggle. You also likely want to make the container div of the links clickable instead of having the link. You will need to add a cursor:ponter to the CSS
$(function() {
$(".select").on("click",function(e){
e.preventDefault(); // only needed if .select are links
var idx = $.trim($(this).text());
$(".hideaway").hide();
$("#hideaway"+idx).show();
toggleTable(idx);
});
});
HTML:
<div class="materialtable">
<div class="materialrow">
<div class="bcardunlaminated select">
<div class="mat-font">
1
</div>
</div>
<div class="bcardmatt select">
<div class="mat-font">
2
</div>
</div>
<div class="bcardspotuv select">
<div class="mat-font">
3
</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" class="hideaway">1</div>
<div id="hideaway2" class="hideaway">2</div>
<div id="hideaway3" class="hideaway">3</div>

Here is a sample of what I think you are looking for: http://jsfiddle.net/f60z1nj3/2/
using jquery:
$(function () {
$('.test').click(function(){
if ($(this).hasClass('darkGrey') ){
$(this.children).removeClass('darkGrey')
}
else
{
$(this.children).addClass('darkGrey');
$(this).siblings().children().removeClass('darkGrey');
}
})
});
So I've just given your selectable items a class instead of an id, which is a bit less specific than using an id. Then its a simple onlclick event to add and remove a highlight class I've called darkGrey. I've not included toggling the divs at the bottom, as it looks like you have a function to handle that.