Is there a way to modify the form's style to show "none" without submitting the form?

Clicking the Close button will submit the form to Lcar.php.

The goal is to hide the CSS and remain on the current page after clicking the button.

The issue of the form being submitted to Lcar.php when the Close button is clicked arises despite the fact that the only function within the button includes "document.getElementById("myForm").style.display = "none";".

Is there a way to click the Close button without submitting the form?

<html>
    <head>
    <style>

    body {font-family: Arial, Helvetica, sans-serif;} 
    body {background-repeat: no-repeat; background-image:url(https://illustratedmaps.info/wp-content/uploads/2017/06/hong-kong-skyline-pen2.jpg)}

    * {box-sizing: border-box;}
    .open-button {
     background-color: #555; 
     color: white;
     padding: 16px 20px;
     border: none; 
     cursor: pointer; 
     opacity: 0.8;
     position: fixed;
     bottom: 23px; 
     left: 28px;
     width: 280px; 
    }

    .form-popup { 
    display: none;
    position: fixed;
     bottom: 0; 
     left: 15px;
    boder: 3px solid  #f1f1f1;
    z-index: 9; } 

     .form-container { 
     max-width: 300px;
     padding: 10px; 
     background-color: white; 
     }

     .form-container-input { 
     width: 100%; 
     padding: 15px; 
     margin: 5px 0 22px 0; 
     border: none;
     background: #f1f1f1; }

     .form-container-input-focus{
         background-color: #ddd;
         outline: none; 
    }

    .form-container-btn {
        background-color: #4CAF50; 
        color: white; 
        padding: 16px 20px;
        border: none; 
        cursor: pointer; 
        width: 100%; 
        margin-bottom:10px;
        opacity: 0.8;
    }

    .form-container-cancel {
        background-color: #FF0000; 
        color: white; 
        padding: 16px 20px;
        border: none; 
        cursor: pointer; 
        width: 100%; 
        margin-bottom:10px;
        opacity: 0.8;
    }

    .form-container .btn:hover, .open-button:hover {
        opacity: 1; 
        }

    </style>
    </head>
    <body>


    <div id="myForm" class="form-popup">
    <form action="Lcar.php" method="post" class="form-container">
    Your Name: <BR>
    <input type="text" value="Enter Your Name" name="aname" class="form-container-input" >
    <br>
    Your Contact Number
    <input type="text" value="Enter Your Contact Number" name="anum" class="form-container-input">
    <br>
    What is your preferred time for us to call you?
    <br>
    Anytime
    <INPUT TYPE="radio" NAME="atime" VALUE="at" CHECKED>
    <br>
    Mon-Fri 9am-9pm
    <INPUT TYPE="radio" NAME="atime" VALUE="wd">
    <br>
    Sat 9am-1pm
    <INPUT TYPE="radio" NAME="atime" VALUE="we">
    <br>
    (except public holidays)
    <br><br>
    Shuttle Services:
    <br>
    <SELECT NAME="services" SIZE=4>
    <OPTION VALUE="1">Limousine</OPTION>
    <OPTION VALUE="2" SELECTED>Luxury Minivans</OPTION>
    <OPTION VALUE="3">Sedans</OPTION>
    <OPTION VALUE="4">SUV</OPTION>
    </SELECT>
    <br><br>

    <INPUT TYPE="submit" class="form-container-btn" value="Send">
    <button class="form-container-cancel" onclick="closeForm()">Close</button>

    </form>
    </div>
    <button class="open-button" onclick="openForm()">Contact Us</button> 

    <script> 
    function openForm() {document.getElementById("myForm").style.display = "block";}
    function closeForm(){document.getElementById("myForm").style.display = "none"; }


    </script> 
    </body>

    </html>

Answer №1

To prevent the default behavior of the button, simply add 'return false' to the onclick of the close button as shown below:

    <button class="form-container-cancel" onclick="closeForm();return false;">Close</button>

This addition will ensure that the default action is halted.

Answer №2

To avoid the default behavior of the submit event, you can use the following JavaScript code:

// [Code to load the submit button]

button.addEventListener("submit", function(e){
  e.preventDefault()
});

Answer №3

Prevent submission of form using vanilla JavaScript:

return false;

Another option is to use JQuery:

e.preventDefault();

Here's an example using pure JavaScript:

<input type='submit' onsubmit='return false;'>

You can also include return false or e.preventDefault() at the end of the desired function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for correctly positioning CSS elements:

I am currently working on a slider using noUi Slider and aiming for an elegant solution. To accommodate the large size of the handle, I expanded the base UI with extra values which are not allowed, causing the handle to jump back to the permitted values. T ...

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

What is causing nested divs to generate a scrollbar?

I am struggling with a situation involving 3 layers of nested divs: <div class="outer"> <div class="inner"><div class="item"></div></div> </div> In this scenario, the .inner div is set to position absolute and each d ...

What is the best way to line up changing column values with changing row values in an HTML table?

In its current state, the data appears as follows without alignment: The data columns are housed within a single variable due to the presence of multiple excel tabs with varying columns. Within the tr tag, rows are checked to match specific columns. The ...

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

Unable to execute script tag on PHP page loading

When I make an AJAX request to fetch JavaScript wrapped in <script> tags that needs to be inserted on the current page, how can I ensure that the code executes upon insertion? Here's the snippet I'm using to add the code: function display ...

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

Relocate the HTML checkbox to the left side of its width

I need an answer that utilizes only CSS, without any JavaScript. In a form, I have a checkbox as follows: <label for="autologin">Remember Me</label> <input type="checkbox" class="checkbox" id="autologin" name="autologin" value="1"> <d ...

Generate HTML table with CSS dynamically applied through jQuery

After performing some calculations and applying CSS rules using the .css() function in jQuery to color the background of a table, I am facing an issue when trying to print the page. The printed page appears in black and white without retaining any styling ...

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

What steps should I take to ensure my navigation bar spans across the entire page?

I'm new to this and looking for help. I want my navigation bar to span the entire width of the page without any white spaces on the sides or top. Below is my CSS: nav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; backgr ...

Display a loading message using jQuery Dialog when the page is loading

I have a button that triggers a jQuery Dialog box to open. $( "#dialog" ).dialog({ autoOpen: false, title: 'Contract', height: 450, width:1100, modal:true, resizable: true }); $( ".btnSend" ).click(function() { var id=$(this).a ...

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

Develop a DIV element that remains constant throughout different web pages without having to reload

How can I create a non-reloading div at the top of my website that contains an MP3 player which plays continuously while users browse through the site? I am working with Joomla and would like to avoid using Iframes for search engine optimization purposes ...

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

I have an unordered list with icons styled using Twitter Bootstrap 3. The Carme font from Google Fonts is used for normal text, and works well in that context. However, when I add icons to the unordered list using BS3, the font-family of that particular ...

What is the optimal HTML tag for showcasing chat text conversations?

To create a text window with fixed width and length that automatically wraps long texts without a horizontal scroll bar but with a vertical one, you can use HTML and CSS. The preview window on SO's ask question page is a good example of this. It is si ...

Outlook 2010 failing to display background-color correctly

Recently, I've been facing a challenge in getting my email to display correctly in Outlook 2010 while maintaining compatibility with web rendering. I'm trying to steer clear of using table styling for obvious reasons but haven't had much suc ...

Setting the thumbnail image for an HTML5 video: A step-by-step guide

Is it possible to set a thumbnail image for an HTML5 video? I would like to display an image before the video starts playing. Here is my current code: <video width="470" height="255" controls> <source src="video.mp4" type="video/mp4"> ...