When the form is submitted, the value is not refreshed if the button is exited

I need to have a form where the save button is positioned outside of the form elements. However, when I move it elsewhere, the form does not refresh.

<form  ng-submit="save()"  action="" name="addInv" novalidate>
            <div class="col-md-10">
                <label>Name:</label>
                <input type="text" ng-model="newlocation.name" class="form-control">
            </div>
            <div class="col-md-10">
                <label>Storage administrator:</label>
                    <select  ng-model="newlocation.administrator" class="form-control" ng-options="user.resource_uri as user.first_name for user in users"></select>
            </div>
            <div class="col-md-6">
                <label>Street:</label>
                <input type="text" ng-model="newlocation.street" class="input-medium form-control">
            </div>
            <div class="col-md-6">
                <label>City:</label>
                <input type="text" ng-model="newlocation.city" class="input-medium form-control">
            </div>
            <div class="col-md-6">
                <label>Country:</label>
                <input type="text" ng-model="newlocation.country" class="input-medium form-control">
            </div>
            <div class="col-md-6">
                <label>Postal code:</label>
                <input type="text" ng-model="newlocation.postalCode" class="input-medium form-control">
            </div>
</form>

<button class="btn tbn-lg btn-primary">Save</button>

When I place the button outside the <form> tags, the form fails to update values.

Answer №1

To accomplish this task, consider using JavaScript.

<input type="submit" onclick="document.forms[0].submit();" />

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

What is the best way to assign a unique color to two overlapping cells in an HTML table using HTML and jQuery?

I have a task to highlight a row or column when a checkbox is selected, similar to the example shown in the image below. How can I adjust the code so that the overlapping cell gets a different color instead of green or yellow? For instance, in the image b ...

Extract value from child div using JQuery and update text in another section of the page

Here is a fiddle showcasing the concept I am working on: https://jsfiddle.net/wvz9p3e7/1/ The code is written in PHP and involves a loop for cycling through 7 or 8 different garments. My goal is to have the window on the right side of the fiddle display t ...

Converting CSS into jQuery

I am exploring ways to create a collapsible section with arrow icons (right and down arrows) in jQuery or JavaScript. Can anyone provide guidance on how to convert my CSS styling into jQuery code? Below is the jQuery approach I have attempted: $(document ...

Constructing a comprehensive inventory is a skill that requires strategy

Can someone advise on the best way to create a list structure with one parent category and two subcategories, each containing three items? Would it be ideal to use a combination of span and two uls, or perhaps a mix of span, anchor tags, and ul elements? ...

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

Alter the color of H3 when clicked and then gently fade it back

Is it possible to create a button on the top of my webpage that scrolls to a specific DIV when clicked, and also have it change the color of an h3 element once it has scrolled to it? This effect is similar to how Facebook highlights notifications. This is ...

Displaying or concealing HTML elements using AngularJS while a modal is open

Looking for a way to display a loading spinner icon on my page when a user triggers a button that opens a modal, and then have the spinner disappear once the modal is open and its content has loaded. Currently, I've managed to make the spinner show up ...

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

Incorporating HTML content in email messages using a PHP mailer script

I have been exploring a way to incorporate HTML code into the email body using an AJAX PHP Form Mailer I discovered on this website: However, whenever I try to add my own HTML coding into the email body, it just displays the tags instead of rendering them ...

I encountered a data discrepancy while attempting to link up with a weather API

This is my debut app venture utilizing node.js and express for the first time. The concept behind this basic application involves connecting to an external API to retrieve temperature data, while also allowing users to input their zip code and feelings whi ...

Struggling to make align-content function properly in a CSS flexbox layout grid

Utilizing CSS flexbox for designing a grid of items that wrap on resizing the page. Wanting to achieve a horizontally centered grid, successfully done with justify-content: center;. However, facing an issue where the last box in some cases is centered inst ...

Implementing a universal (click) attribute for Angular 2 in CSS

When using Angular 1, it was as easy as following this syntax: [ngClick], [data-ng-click], [x-ng-click] { cursor: pointer; } This snippet ensured that any tags with the ng-click attribute displayed a pointer cursor. How can we achieve the same effect ...

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

Drag near the bottom of a droppable DIV to scroll inside

Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...

Only one active class is allowed in the Bootstrap Accordion at any given time

I have implemented Bootstrap's accordion on my webpage, consisting of two different sections with unique content. Upon loading the page, the active class defaults to the first element of the first section. However, if I navigate to the "Second" sectio ...

Classic design of the shadow element

I have main.js and index.html below class CustomTagA extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); const wrapper = document.createElement('h1'); ...

Is it possible to have the background blurred, but only specifically behind the overlay?

How can I make the div appear as if it is blurring the background image of the page, even when the position of the div is changed? Also need to ensure it works seamlessly during window resizing. ...