[RUBY] [JavaScript] How to display an alert when there is an input form omission

Introduction

I am creating an EC site with Rails. When adding an item to the cart, I wanted to display a pop-up like the one below if there was no quantity selected. This time is the memorandum. スクリーンショット 2020-05-29 23.12.14.png

Supplementary information

Form contents

The page in the above picture is the following View file.

.showMain
  .showMain__Boxes
    .showMain__Boxes__leftBox
      = image_tag @product.image, width: 450, height: 450, class: "showMain__Boxes__leftBox__image"
    .showMain__Boxes__rightBox
      = form_with url: add_item_carts_path, local: true, name: "formForCart" do |f|
        .showMain__Boxes__rightBox__name
          = @product.name
        .showMain__Boxes__rightBox__namejap
          = @product.namejap
        .showMain__Boxes__rightBox__description
          = @product.description
        .showMain__Boxes__rightBox__orderQuantity
          = f.label :quantity, "quantity", class: "showMain__Boxes__rightBox__orderQuantity__title"
          = f.select :quantity, stock_array_maker(@stock), {include_blank: "Please select"}, {class: "showMain__Boxes__rightBox__orderQuantity__form"}
        .showMain__Boxes__rightBox__line
          .showMain__Boxes__rightBox__line__price
            = "Base price: ¥#{convertToJPY(@product.price)}"
          .showMain__Boxes__rightBox__line__fav
            - if user_signed_in? && current_user
              - if @product.bookmark_by?(current_user)
                = link_to product_bookmark_path(@product.id), class: "showMain__Boxes__rightBox__line__fav__btn.fav", method: :delete, remote: true do
                  %i.fas.fa-star.star
              - else
                = link_to product_bookmarks_path(@product.id), class: "showMain__Boxes__rightBox__line__fav__btn.fav", method: :post, remote: true do
                  %i.far.fa-star.star-o (Add to Favourites)
        .showMain__Boxes__rightBox__line
        .showMain__Boxes__rightBox__addCart
          = f.hidden_field :product_id, value: @product.id
          = f.hidden_field :cart_id, value: @cart.id
          = f.submit "Add to Cart", {class: "showMain__Boxes__rightBox__addCart__btn", id: "addToCart"}

How to write JS

I'm getting two nodes, a submit tag and a quantity select tag.

$(function(){
  $("#addToCart").on('click', function(e){
    if(document.getElementById('quantity').value === ""){
      alert("Please select a quantity.");
      return false;
    }else{
      return true;
    }
  })
});

Set to fire when the submit button of the form is pressed, and if there is no id value of = f.select: quantity ~, it returns false and warns with an alert. If the return value is true, it will be submitted, and if it is false, it will not be submitted. By the way, if there is no "return false", a pop-up will appear, but you will be taken to the next page.

The above JS can also be done by the following method

$(function(){
  $("#addToCart").on('click', function(e){
    if(!(document.getElementById('quantity').value)){
      alert("Please select a quantity.");
      return false;
    }else{
      return true;
    }
  })
});

Reference site

How to check form input with JavaScript [JavaScript] How to check empty strings [Study]

Recommended Posts

[JavaScript] How to display an alert when there is an input form omission
How to output the value when there is an array in the array
How to display the result of form input
I want to make the frame of the text box red when there is an input error
[Heroku] How to solve when an error is displayed on git push heroku master
How to add characters to display when using link_to method
[swift5] How to execute processing when tabBar is tapped
Null value is entered when assigning to an array
[Rails] How to display an image in the view
How to solve the problem when the value is not sent when the form is disabled in rails and sent
When there is no output to stdout in docker log
How to specify db when creating an app with rails
What is an immutable object? [Explanation of how to make]
Throw an exception and catch when there is no handler corresponding to the path in spring
How to create an application
[Java] How to display Wingdings
How to handle an instance
[Swift] How to display when the quiz app answers correctly [Beginner]
[Rails 6] How to create a dynamic form input screen using cocoon
How to display 0 on the left side of the standard input value
[Behavior confirmed in December 2020] How to implement the alert display function
[Rails 5] How to display the password change screen when using devise
How to write the view when Vue is introduced in Rails?
What to do if zip dies if there is a pom when making an executable jar with gradle