I am experiencing issues with the functionality of the submit and clear buttons on my form

Hello, I am a beginner in the world of coding and recently encountered an issue while working on a project. I attempted to create a form with both submit and reset buttons, but unfortunately, the form does not seem to be functioning properly on either desktop or mobile devices. Thank you for taking the time to read this message. enter code here

<form id="form" action="contactform.php" method="post">
            <label for="topic">Message Topic: </label>
            <select name="topic">
  <option value="Memberships">Memberships</option>
  <option value="Careers">Careers</option>
  <option value="Other">Other</option>
</select>
<br><br>
        <label for="Name">Name: </label>
        <br>
    <input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
    <br><br>
    <label for="email">Email: </label><br>
    <input name="Email" id="email" type="email" size="25" required><br>
    <label for="phone">Phone Number: </label><br>
    <input name="Phone" id="phone" type="tel" size="12" required>
    <br><br>
    <label for="message">Enter a Message Here:</label>
    <br>
    <br><textarea name="messagebox" id="message"></textarea>
    <br><br>
   <input type="submit" id="submit" value="Submit"></button>
    <input type="reset" id="clear" value="Clear"></button> 
    <br>      
        </form>
</div>
</body>
    <script>
            $(document).ready(function(){
              $(#submit).on('click touch', function () {
                alert("You are about to SUBMIT this form. Is that ok?");
              });
            });
            </script>

Answer №1

The issue lies within the syntax you are using. I recommend making the following changes:

<button type="submit" id="submit">Submit</button>
<button type="reset" id="clear">Clear</button>

Alternatively, you can use:

<input type="submit" id="submit" value="submit">
<input type="reset" id="clear"  value="clear">

Answer №2

Just gave it a try and everything seems to be working smoothly
Check it out here:
  https://codepen.io/kap1l/pen/gOYjjRZ?editors=1000

Many thanks,

By the way, I noticed that in your submit and reset buttons you are using <input> but closing them with </button> You might want to change both to <input></input> or <button></button>

Answer №3

The issue arises from not using single or double quotes in the $(#submit) statement. Replace '#submit' with the form's id and switch 'click touch' to 'submit'.

<script>
    $(document).ready(function(){
       $('#form').on('submit', function () {
          alert("You are about to SUBMIT this form. Is that ok?");
          return true;
       });
    });
</script>

Answer №4

Your code has a few issues that need to be addressed

  1. Make sure to remove the unnecessary closing tags </button>. You don't have corresponding opening tags for them, and you can achieve the same result using <input> elements.

  2. There is a JQuery issue in your code. Be sure to enclose IDs within double quotes or single quotes.

    $(#submit) should be $("#submit")

Check out the updated code on JSFiddle

Answer №5

Follow these instructions:

<button type="button" id="submit">Submit</button>
 <button type="button" id="clear">Clear</button> 

 $("#submit").on('click', function () {

Rather than using

<input type="submit" id="submit" value="Submit"></button>
<input type="reset" id="clear" value="Clear"></button>

$(#submit).on('click touch', function () {

Answer №6

There were some errors in your HTML coding, such as using <input> for submit buttons and closing them with <button> tags. Here is the correct way to do it:

<input type="submit" id="submit" value="Submit"/>
 <input type="reset" id="clear" value="Clear"/> 

When selecting elements in your script, remember to enclose the selector in quotes like $('#submit') instead of $(#submit)

$(document).ready(function(){
  $('#submit').on('click', function () {
       alert("You are about to SUBMIT this form. Is that ok?");
    });
 });
label{
font-size:20px;
margin-right:20px;
}

textarea
{
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form" action="contactform.php" method="post">

<table>
<tr>
<td> <label for="topic">Message Topic: </label></td>
<td>
 <select name="topic">
     <option value="Memberships">Memberships</option>
    <option value="Careers">Careers</option>
    <option value="Other">Other</option>
   </select>

</td>
</tr>

<tr>
<td>  <label for="Name">Name: </label></td>
<td>
  <input name="FName" id="firstname" type="text" placeholder="First" size="20" required>
    <input name="LName" id="lastname" type="text" placeholder="Last" size="20" required>
</td>
</tr>

<tr>
<td>   <label for="email">Email: </label></td>
<td>
  <input name="Email" id="email" type="email" required>
</td>
</tr>


<tr>
<td>   <label for="phone">Phone Number: </label></td>
<td>
   <input name="Phone" id="phone" type="number" required>
</td>
</tr>

<tr>
<td>  <label for="message">Enter a Message Here:</label></td>
<td>
 <textarea name="messagebox" rows=5 id="message"></textarea>
</td>
</tr>

<tr>
<td> <input type="submit" id="submit" value="Submit"/>
 <input type="reset" id="clear" value="Clear"/>   
 </td>

</tr>

</table>

   
   

</form>

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

Achieve hover overflow effect in HTML and CSS without altering element positions

Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below: Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (. ...

Display a popover when the button is clicked using jQuery

Is there a way to show a notification message using popover? I've managed to make it work, but I'm facing an issue where the popover doesn't appear on the first click of a button after the page loads. Here is the code snippet: <button ty ...

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

Troubleshooting the ineffective OutputCache directive in Asp.Net application

I recently implemented an outputcache directive on my asp.net page (asp.net 4.0) like this: <%@ OutputCache Duration="3600" Location="Client" VaryByParam="None" %> Unfortunately, it seems like the directive is not working properly. When I i ...

Ensure you have the right zoom in and out percentages to properly test how your website responds on various browsers across different

Currently, I am using Google Chrome to test the responsiveness of a web application that I am developing. As of today, my browser versions are as follows: Google Chrome - Version 88.0.4324.96 (Official Build) (64-bit) Mozilla Firefox - Version 84.0.2 (64- ...

Transmitting JSP form data through email via POST method

I have a question that I'm struggling to find the answer to online. I created a basic HTML form within a JSP that includes a 'Enter name' text box and a submit button. I want to know if there's a way to automatically send the POST infor ...

What is the best way to create transparency within an icon's background without affecting the surrounding box?

Is there a way to set the background color of the icon inside the circle without affecting the transparent box around it? Currently, when I use background:white, it changes both the circle and the surrounding box. https://i.sstatic.net/mlV1I.png ...

Enable jQuery Readonly for a temporary unlock

I have a form with two input fields, a checkbox for completion, and a save button. When the checkbox is ticked and the save button is clicked, the input boxes are locked from further editing. Everything is functioning correctly. I would like to add a co ...

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Looking for a way to add vertical borders that span the entire webpage to some text? Check out this HTML snippet: <div id="vLine"> <h1>text</h1> </div> Here's the accompanying CSS: #vLine { height: 100%; width: 5 ...

Tips for achieving seamless expansion and eliminating grid row gaps by utilizing hidden elements in CSS

I'm currently developing a web design that includes a section with both visible and hidden content. I've added a button to smoothly reveal the hidden content using a transition effect. However, I'm encountering a couple of challenges: Even ...

Modify the navbar background color in bootstrap-vuejs

As per the information provided in the documentation, the instructions for setting styles for the navigation bar are as follows: <b-navbar toggleable="lg" type="dark" variant="info"> <!-- Or --> <b-navbar toggleable="lg" type="dark" variant ...

How can we ensure that the form inputs in React retain the data of the clicked element when being updated?

I'm currently facing a challenge in updating data within my React component. While the update functionality is working, I want to enhance the user experience by pre-filling the form inputs with the current state of the data before making any updates. ...

Occasional issue with the drop down menu not appearing correctly

I'm experiencing some difficulties with displaying a dropdown menu. Check out the fiddler link for reference: http://jsfiddle.net/GxrSk/ Below is the simplified HTML code: <nav> <ul id="top-menu"> <li class="parent"> ...

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

CSS - turn off inheritance for font styling

I am trying to figure out how to turn off the font:inherit property in Ionic's global CSS. This property is causing issues when I try to style text using ng-bind-html, as it adds unnecessary classes to elements like i and bold. I attempted to override ...

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...