XCalibre3 Posted April 19, 2023 Share Posted April 19, 2023 Essentially I'm looking for a way to make a button say "verify your information".... when it is clicked, I would like it to go away and then open another button that says finalize your reservation".... I've tried many ways and I can't figure it out. Is this possible? Thank you! Quote Link to comment Share on other sites More sharing options...
XCalibre3 Posted April 19, 2023 Author Share Posted April 19, 2023 I'm not looking for a toggle... I can use this for a toggle.... echo" <br><br><button name='submit' class = 'btn' id='mydiv'>Click to Verify Information</button>"; echo" </form>"; ?> <meta charset="utf-8"> <script type='text/javascript'> function showDiv() { let thediv = document.getElementById("mydiv") if (thediv.style.display == "block") { thediv.style.display = "none" } else { thediv.style.display = "block" } } </script> <style type='text/css'> #mydiv { display: none; } </style> </head> <body> <button onclick='showDiv()'>Show Div</button> I need the button to go away and the next button to submit info or do whatever I need it to do. Not sure if this is possible Quote Link to comment Share on other sites More sharing options...
XCalibre3 Posted April 19, 2023 Author Share Posted April 19, 2023 (edited) with the above code is there a way to make the "Show Div" text disappear instead of toggle? When it shows the new div that is, and then I can have that button do something else. Edited April 19, 2023 by XCalibre3 Quote Link to comment Share on other sites More sharing options...
Solution requinix Posted April 19, 2023 Solution Share Posted April 19, 2023 "Make the button go away and open another button" isn't exactly the most descriptive thing ever... As long as something isn't visible, it doesn't really matter much whether it exists or not. The simplest thing here is going to be a sort of toggle: start with the first button visible and the second not, then "toggle" the two so the first is not visible and the second is. 1. Start with the HTML that includes both buttons. 2. Figure out how you want to hide the unwanted button and apply it now so that the second one is hidden. 3. When the first button is clicked, do whatever it takes to hide the first button and show the second. Okay, so reading that now it doesn't seem helpful, but I'm trying to word it in a way that makes it flexible. Because when it comes to HTML and CSS and Javascript, there's always 100 ways to accomplish a task... however 95 of them are terrible. Here's what I would do. 1. Create a CSS class for these types of button. It doesn't have to do anything (unless you want it to) and only really exists to mark these buttons as being particular types of buttons. So in that sense there's nothing to "create" per se. 2. Create a CSS class for "the active button". Apply it to the first button now, and use CSS to make "these types of buttons" which are not "the active button" be hidden. This means you control visible vs. hidden using a CSS class and not the direct style.* attributes. 3. Add Javascript for the first button that will remove its own "the active button" class and add it to the second button. 4. Add Javascript for the second button that will remove its own "the active button" (assuming you want it to be removed when clicked as well) and make the DIV you want visible; the latter should be through CSS too but it's not really that important. Personally, if I'm dealing with behaviors that are tied to Javascript, I prefer to deal with data attributes instead of class names, but that's not very important either. All together you get something like this: <style> #step-container .step-button:not(.active-step) { display: none; } </style> <!-- This is a nice thing that "scopes" the buttons - using step-button or active-step outside this won't get the CSS applied --> <div id="step-container"> <button id="step1" name="button" class="btn step-button active-step">Click to Verify Information</button> <button id="step2" name="button" class="btn step-button">Show Div</button> </div> <div id="thediv" style="display: none;">...</div> <script> // Creating and running this anonymous function immediately means you can use variables without making them global (function() { // Grab these three ahead of time to make the function code nicer const btn1 = document.getElementById("step1"); const btn2 = document.getElementById("step2"); const thediv = document.getElementById("thediv"); // Add event listeners through code instead of putting them inline with onclick attributes btn1.addEventListener("click", () => { // Use .classList to add and remove classes instead of going through the .className string btn1.classList.remove("active-step"); btn2.classList.add("active-step"); }); btn2.addEventListener("click", () => { btn2.classList.remove("active-step"); // Literally removing the "display" override is better than forcing it to be block/inline/whatever it's naturally supposed to be thediv.style.removeProperty("display"); }); })(); </script> This is closer to the sort of modern stuff that we can do nowadays; the above isn't actually quite ideal, but it's a good step-up from the sorts of stuff we had to do 10 and 20 years ago with inline event handlers and quick-and-dirty Javascript. Quote Link to comment Share on other sites More sharing options...
XCalibre3 Posted April 19, 2023 Author Share Posted April 19, 2023 9 hours ago, requinix said: <style> #step-container .step-button:not(.active-step) { display: none; } </style> <!-- This is a nice thing that "scopes" the buttons - using step-button or active-step outside this won't get the CSS applied --> <div id="step-container"> <button id="step1" name="button" class="btn step-button active-step">Click to Verify Information</button> <button id="step2" name="button" class="btn step-button">Show Div</button> </div> <div id="thediv" style="display: none;">...</div> <script> // Creating and running this anonymous function immediately means you can use variables without making them global (function() { // Grab these three ahead of time to make the function code nicer const btn1 = document.getElementById("step1"); const btn2 = document.getElementById("step2"); const thediv = document.getElementById("thediv"); // Add event listeners through code instead of putting them inline with onclick attributes btn1.addEventListener("click", () => { // Use .classList to add and remove classes instead of going through the .className string btn1.classList.remove("active-step"); btn2.classList.add("active-step"); }); btn2.addEventListener("click", () => { btn2.classList.remove("active-step"); // Literally removing the "display" override is better than forcing it to be block/inline/whatever it's naturally supposed to be thediv.style.removeProperty("display"); }); })(); </script> This is closer to the sort of modern stuff that we can do nowadays; the above isn't actually quite ideal, but it's a good step-up from the sorts of stuff we had to do 10 and 20 years ago with inline event handlers and quick-and-dirty Javascript. This wasn't quite working, but I did use it and then set the opacity to zero and the button at least doesn't show the way I wanted it. But your code helped tremendously, thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.