Form tags are closing automatically on their own

Currently experiencing an issue where a form tag is mysteriously closing on its own.

In the process of troubleshooting and pinpointing the root cause of this unexpected behavior. Inside the table structure due to Netsuite usage, which complicates the debugging task. Direct link to the website can be found here.

This snippet showcases part of what displays in the browser:

>   <div class="col-xs-8"> 
>      <div class="oos-button"></div> 
>         <form method="get" id="add-to-cart-form" role="form" action="/app/site/backend/additemtocart.nl"></form>


 <!-- MODAL -->   etc... 

Intending for the modal code to reside within the form element as per my coding instructions.

<form method="get" id="add-to-cart-form" role="form" action="/app/site/backend/additemtocart.nl">

 <!-- MODAL -->          
  <div id="<%=getCurrentAttribute('item','itemID')%>" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
  <div class="modal-dialog">
     <div class="modal-content" style="padding:15px 15px; " >
       <h2 class="page-title serif text-center "><@= meal.storedisplayname @></h2>
         <div id="product-image" class="img-rounded">
           <img src="<@=meal.storedisplaythumbnail  @>" class="img-responsive center" alt="">
            <br />
          <p><strong> <@= meal.storedisplayname @></strong>:  added to cart</p>
 <label style="color:#7b9738"> Price: $<@= meal.onlineprice @></label>
    <hr / > 
       <hr / > 
           <div class="text-center">
             <button type="button" class="btn btn-info center" data-dismiss="modal">Continue Shopping</button>
           <a  href="<%=getCartUrl()%>">
             <button type="button" class="btn btn-info center">Checkout ></button>
           </a>
          </div>
        </div>
    </div>
  </div>
 </div>
              <!-- END MODAL-->
                  <%= getCurrentAttribute('item','addtocartitemid')%>
                    <input type="text" class="qty form-control" name="qty" placeholder="Qty" value="1" />
                    <input type="hidden" name="showcart" value="T" />
                    <button type="submit" class="btn btn-info btn-block">Add to Cart</button>
              </form>  

Answer №1

For some browsers, it is necessary for the <form> object to open and close within the same parent element. In this scenario, you have opened a form within a <tr> tag and closed it in an adjacent <tr> tag. To resolve this issue, you should adjust the form placement.

The section of your source files that needs attention can be found between lines #242-257 of the generated output from the URL provided.

<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr class='portletHandle' id='handle_itemMainPortlet' >
<td width='100%' height=0 align='left' valign='top'>
<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr>
<td width=0 height=0 align='left' valign='top' style='display:none'>
<form method='post' name='form0' id='form0' action='/s.nl'>
<input type='hidden' name='c' value='3374347'>
<input type='hidden' name='n' value='1'>
<input type='hidden' name='sc' value='39'>
<input type='hidden' name='category' value='13945'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='it' value='A'>
<input type='hidden' name='vid' value='RHCpZYbgAWoCAF5X'>
<input type='hidden' name='ck' value='RHCpZYbgAVkCAEOd'>
<input type='hidden' name='cktime' value='123014'>
<input type='hidden' name='cart' value='-1'>

</td>
</tr>
<tr>
</form>

A better structure would be:

<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr class='portletHandle' id='handle_itemMainPortlet' >
<td width='100%' height=0 align='left' valign='top'>
<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr>
<td width=0 height=0 align='left' valign='top' style='display:none'>
<form method='post' name='form0' id='form0' action='/s.nl'>
<input type='hidden' name='c' value='3374347'>
<input type='hidden' name='n' value='1'>
<input type='hidden' name='sc' value='39'>
<input type='hidden' name='category' value='13945'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='it' value='A'>
<input type='hidden' name='vid' value='RHCpZYbgAWoCAF5X'>
<input type='hidden' name='ck' value='RHCpZYbgAVkCAEOd'>
<input type='hidden' name='cktime' value='123014'>
<input type='hidden' name='cart' value='-1'>
<!-- Move here: --></form>
</td>
</tr>
<tr>

Answer №2

Upon examining the source code of the page link you shared, I observed that there is no closing tag for the form on line 293, contrary to what was mentioned in your initial snippet. If a closing tag were present on the same line, it would imply an empty form, which seems unlikely. It appears that the issue might lie on the server side.

An additional point worth mentioning is that the form id (add-to-cart-form) is used multiple times throughout the page, violating the rule that ids must be unique in HTML. To avoid potential issues with javascript functionality, it is advisable to consider using a class or a data- attribute instead.

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

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

Maximizing efficiency in JavaScript by utilizing jQuery function chaining with deferred, the .done() function

I am working on retrieving data from multiple functions and want to chain them together so that the final function is only executed when all the data has been successfully loaded. My issue arises when trying to use the .done() method, as it calls the func ...

Align your content in the center of any browser

My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ font-family: "HelveticaNeue-Light" ...

Guide to generating a PDF file and utilizing a Node.js program for the download process

Seeking assistance in creating a button using my Node.js application to generate a downloadable PDF file filled with information from a PostgreSQL database. Any help is greatly appreciated! ...

JavaScript: A guide on sending an uploaded email to a web service in byte array format

Scenario: My website is built using EXTJS6. I have a web service that requires the uploaded email to be sent in byte array format. Inquiry: What is the process for converting a .msg file to a byte array using JS (or EXTJS)? Can we treat it as a simple bin ...

Retrieve JSON data by making a POST request to a website's API

Can you help me retrieve Json data from a website API using JavaScript? I'm trying to fetch quotes from the following website: for my quotes generator page. While I have some understanding of making GET requests, it seems that this API requires POST ...

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

Troubleshooting the issue of AJAX failing to upload a picture file to both the

I'm facing an issue where my script is not uploading the picture to the server and inserting it into the database when I use ajax submit for some reason. However, if I submit the form with php action="file.php" it works fine. Here are my ajax script a ...

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

Is there a way to transform the SmartyStreets' jQuery.LiveAddress plugin into its JavaScript SDK?

My website currently utilizes the jQuery.LiveAddress plugin, however, it was deprecated and subsequently removed by SmartyStreets back in 2014. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <s ...

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

I am facing a CSS issue that I am unable to resolve. I have 20 results that should be displayed on my website, but only 14 of them are appearing. The other ones are visible in the source code when inspected. When I move the position of the menu up or down, ...

Utilizing the datepicker options function within a different function

I'm working on a function that utilizes a promise to retrieve data from an asynchronous ajax call: $("#mySelect").on('change', function() { var mySelectValue = $('#mySelect').val(); var promise = getAvailableDates(mySe ...

Displaying country-specific API details (such as capital and currency) in a card container when selecting a country from a dropdown menu

My objective is to display the card information for South Africa as the default value, even before entering any country's name into the search bar input field or selecting a specific country from the provided list. I am utilizing the restcountries API ...

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

Having issues with Jquery and duplicating tables functionality not functioning as expected

I am facing an issue with two external jQuery files. One file allows me to clone the last row of a table, while the other is supposed to retrieve the id of a select tag based on a class assigned to it. However, the second script only works for the original ...

Ways to eliminate all characters preceding a certain character within an array dataset

I am currently working on parsing a comma-separated string retrieved from a web service in my application, which contains a list of user roles. My goal is to convert this string into an array using jQuery, and I have successfully achieved that. However, I ...

Utilizing JQuery for retrieving a filename

I have a unique file upload button on my website. To provide the user with visual feedback about their chosen file, I modify the html of a div to display the file name. My jquery code is as follows: $("input[type=file]").change(function() { var filen ...

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...