Je crée un site EC avec Rails.
Lors de l'ajout d'un article au panier, je voulais afficher un pop-up comme celui ci-dessous s'il n'y avait pas de quantité sélectionnée. Cette fois, c'est le mémorandum.
La page de l'image ci-dessus est le fichier View suivant.
.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, "quantité", class: "showMain__Boxes__rightBox__orderQuantity__title"
= f.select :quantity, stock_array_maker(@stock), {include_blank: "Veuillez sélectionner"}, {class: "showMain__Boxes__rightBox__orderQuantity__form"}
.showMain__Boxes__rightBox__line
.showMain__Boxes__rightBox__line__price
= "Prix de base: ¥#{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 (Ajouter aux Favoris)
.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"}
J'obtiens deux nœuds, une balise d'envoi et une balise de sélection de quantité.
$(function(){
$("#addToCart").on('click', function(e){
if(document.getElementById('quantity').value === ""){
alert("Veuillez sélectionner une quantité.");
return false;
}else{
return true;
}
})
});
Mis à feu lorsque le bouton d'envoi du formulaire est enfoncé, et s'il n'y a pas de valeur id = f.select: quantité ~, il retourne false et avertit avec une alerte. Si la valeur de retour est vraie, elle sera soumise, et si elle est fausse, elle ne sera pas soumise. En passant, s'il n'y a pas de "return false", une fenêtre contextuelle apparaîtra, mais vous serez redirigé vers la page suivante.
$(function(){
$("#addToCart").on('click', function(e){
if(!(document.getElementById('quantity').value)){
alert("Veuillez sélectionner une quantité.");
return false;
}else{
return true;
}
})
});
Comment vérifier l'entrée de formulaire avec JavaScript [JavaScript] Comment vérifier les caractères vides [Étude]