No No, you just have to put this tag <input type="submit" value="Check Out"> after the /form tag and this will work and button will work when the form data is entered
On Wed, Sep 23, 2020 at 5:35 PM Maureen Moore <makam...@gmail.com> wrote: > When I put the submit button and the closing tag for the form outside of > the div tag, I get the error Unexpected closing tag "div." I need to put > the closing tag for the form outside of the div tag or it simply doesn't > submit the form. > > On Wednesday, September 23, 2020 at 1:59:08 AM UTC-4 ranaas...@gmail.com > wrote: > >> Hi Maureen, >> >> Checkout button will be shown for each item because you have added the >> checkout button in the loop. Please remove this line <input type="submit" >> value="Check Out"> from the form and add it after the closing tag of form. >> This will show the checkout button for once. >> >> *Thanks and Regards* >> >> *Asad Fiaz* >> *Senior Frontend Engineer* >> >> On Mon, Sep 21, 2020 at 11:35 PM Maureen Moore <maka...@gmail.com> wrote: >> >>> I have a shopping cart that displays the product name, price, and >>> quantity. I want to submit that information to the database and render the >>> shopping cart on the check out page when I click on the check out button. >>> Right now I don't know how to send the product information to the check out >>> page because I would have to loop through all of the products in order to >>> save them to the database and when I use ngFor to loop, the check out >>> button shows up for every product. >>> I know that the following code is terrible but it shows what I am trying >>> to do. >>> >>> shopping-cart.component.html >>> >>> <div *ngFor="let item of items"> >>> <input type="hidden" class="" name="" value="{{item.quantity}}"> >>> <input type="hidden" class="" name="" value="{{item.product_name }}"> >>> <input type="hidden" class="" name="" value="{{item.product_price }}"> >>> >>> <form [formGroup]="submitForm" (ngSubmit)="checkOut(item.quantity, >>> item.product_name, item.product_price)"> >>> <input type="submit" value="Check Out"> >>> </form> >>> </div> >>> shopping-cart.component.ts: >>> >>> public checkOut(quantity, product_name, product_price) { >>> >>> >>> let record = {}; >>> record['quantity'] = quantity; >>> record['product_name'] = product_name; >>> record['product_price'] = product_price; >>> >>> >>> >>> this.crudService.create_NewCheckOut(record).then(resp => { >>> this.quantity = undefined; >>> this.product_name = ""; >>> this.product_price = undefined; >>> console.log(resp); >>> }) >>> .catch(error => { >>> console.log(error); >>> }); >>> >>> this.router.navigate(['check-out']); >>> } >>> You can see the shopping cart as it looks now at >>> https://cart-64d3f.firebaseapp.com/ >>> >>> -- >>> You received this message because you are subscribed to the Google >>> Groups "Angular and AngularJS discussion" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to angular+u...@googlegroups.com. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/angular/f2b7888e-b50e-424b-bee2-9fa81ae655b9n%40googlegroups.com >>> <https://groups.google.com/d/msgid/angular/f2b7888e-b50e-424b-bee2-9fa81ae655b9n%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> >> -- > You received this message because you are subscribed to the Google Groups > "Angular and AngularJS discussion" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to angular+unsubscr...@googlegroups.com. > To view this discussion on the web visit > https://groups.google.com/d/msgid/angular/f8d0ebde-72cd-4d74-97a0-00c15f98dd8cn%40googlegroups.com > <https://groups.google.com/d/msgid/angular/f8d0ebde-72cd-4d74-97a0-00c15f98dd8cn%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAGnD0NsYaq__bbX3-8zJ54z603L4Eqe0ziC4do-y9HsFNXELfw%40mail.gmail.com.