Einführung

Dieses Mal verwenden wir jQuery, um die Senden-Schaltfläche so einzustellen, dass sie erst gedrückt werden kann, wenn das Formular ausgefüllt und ausgewählt ist.

Vollständiges Bild

Zweck des Schreibens des Artikels

Teilen Sie Informationen und schreiben Sie als eigenes Memorandum.

Zweck der Einführung

Um fehlerhafte Übertragung zu verhindern und die Benutzerfreundlichkeit zu verbessern.

Umgebung

MacOS 10.15.7 ruby 2.6.5 Ruby on Rails 6.0.0

Voraussetzungen

--JQuery wurde installiert.

Eine Funktion zum Posten mehrerer Bilder wurde implementiert.

Status des Artikelschreibers

Tabelle

Untitled Diagram-ページ2 (1).png

Die Benutzertabelle ist "Poster", die Post-Tabelle ist "Post", die Bildtabelle ist "Posted image", die Präfekturtabelle ist "Prefectural data" und die Kategorietabelle ist "Post category".

Die Präfekturtabelle und die Kategorietabelle verwenden Startdaten.

Regler

Posts_controller.rb ist verantwortlich für die neue Post-Funktion.

`posts_controller.rb`


class PostsController < ApplicationController
  def new
    @post = Post.new
    @post.build_spot
    @post.images.build()
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to root_path, notice: "Beitrag wurde abgeschlossen"
    else
      flash.now[:alert] = "Bitte fülle die notwendigen Felder aus"
      @post.images.build()
      render :new
    end
  end
  ...Einige der folgenden Beschreibungen werden weggelassen
  .
  .
  .
  private
  def post_params
    params.require(:post).permit(:title, :content, :prefecture_id, :category_id, images_attributes: [:id, :image, :_destroy]).merge(user_id: current_user.id)
  end

Lass uns jetzt arbeiten.

①-1 Erstellen Sie new.html.erb

Erstellen Sie zunächst das Formular in HTML.

`erb:new.html.erb`


<%= form_with(model: @post, local: true, multipart: true) do |form| %>
  <ul class='formSpace'>
    <li class="prefecture">
      <label class="labelName" for="Prefecture">Prefecture：</label>
      <%= form.collection_select :prefecture_id, Prefecture.all, :id, :name, {include_blank: 'Bitte auswählen'}, {class: "prefecture__input", id: 'input01'} %>
    </li>
    <li class="category">
      <label class="labelname" for="category">Category：</label>
      <%= form.collection_select :category_id, Category.all, :id, :name, {include_blank: 'Bitte auswählen'}, {class: "category__input", id: 'input02'} %>
    </li>
    <li class="title">
      <label class="labelName" for="titleSpace">Title：</label>
      <%= form.text_field :title, class: 'title__input', id: "input03", placeholder: "Bitte geben Sie einen Titel ein" %>
    </lil
    <li class='newImage'>
      <label class="labelName" for="imageSpace">Photo：</label>
      <div class="prevContent">
      </div>
      <div class="labelContent">
        <label class="labelBox" for="post_images_attributes_0_image">
          <div class="labelBox__text-visible">
Klicken Sie hier, um Dateien hochzuladen (bis zu 5)
          </div>
        </label>
      </div>
      <div class="hiddenContent">
        <%= form.fields_for :images do |i| %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_0_image", name: "post[images_attributes][0][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_1_image", name: "post[images_attributes][1][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_2_image", name: "post[images_attributes][2][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_3_image", name: "post[images_attributes][3][image]", type: "file" %>
          <%= i.file_field :image, class: "hiddenField", id: "post_images_attributes_4_image", name: "post[images_attributes][4][image]", type: "file" %>
        <% end %>
      </div>
    </li>
    <li class='content'>
      <label class="labelName" for="contentSpace">Content：</label>
      <%= form.text_area :content, class: 'content__input', id: "input05", placeholder: "Bitte geben Sie einen Kommentar ein" %>
    </li>
  </ul>
  <div class='send'>
    <%# <%= form.submit "Senden", class: 'send__btn', id: 'sending', value: "Post" %>
    <input type='submit' id='sending' class='send__btn' value='Post'>
  </div>
<% end %>

Dann schreibe scss.

`new.scss`



.formSpace {
  height: auto;
}

.labelName {
  color: #000000;
}
//Präfekturen================================================================

.prefecture {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    color: #000000;
  }
}

//Kategorie ==============================================
.category {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    color: #000000;
  }
}

//Title===================================================================
.title {
  height: auto;
  width: auto;
  margin-top: 1vh;
  font-size: 1.5vh;
  line-height: 1.5;
  color: #fff;
  &__input {
    width: 30vw;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000000;
    margin-left: 25px;
  }
}

//Image======================================================================

.newImage {
  display: block;
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}

.imageLabelName {
  color: #fff;
  margin-right: 25px;
}

.prevContent {
  display: flex;
}

.previewBox {
  height: 162px;
  width: 112px;
  margin: 0 15px 10px 0;
}

.upperBox {
  height: 112px;
  width: 100%;
  img {
    width: 112px;
    height: 112px;
  }
}

.lowerBox {
  display: flex;
  text-align: center;
}

.deleteBox {
  color: #1e90ff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.imageDeleteBtn {
  background-color: #f5f5f5;
  line-height: 4vh;
  height: 4vh;
  width: 60px;
}

.imageDeleteBtn:hover {
  color: rgba($color: #1e90ff, $alpha: 0.7);
}

//Post-Click-Bereich CSS
.labelContent {
  margin-bottom: 10px;
  width: 620px;
  .labelBox {
    display: block;
    border: 1px dashed #ccc;
    position: relative;
    background: #f5f5f5;
    width: 100%;
    height: 162px;
    cursor: pointer;
    &__text-visible {
      position: absolute;
      top: 50%;
      left: 16px;
      right: 16px;
      text-align: center;
      font-size: 14px;
      line-height: 1.5;
      font-weight: bold;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      pointer-events: none;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
//file_Feld CSS
.hiddenContent {
  .hiddenField {
    display: none;
  }
  .hidden-checkbox {
    display: none;
  }
}

//Kommentar====================================================================

.content {
  display: flex;
  height: auto;
  width: auto;
  margin-top: 5px;
  line-height: 1.5;
  font-size: 1.5vh;
  &__input {
    height: 15vh;
    width: 40vw;
    border-radius: 5px;
    color: #000000;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: 0px;
    padding: 1vh;
  }
}


//SEND-Taste=========================================================================
.send {
  display: flex;
  justify-content: center;
  &__btn {
    height: 5vh;
    width: 25vw;
    margin: 50px 0;
    border-radius: 20px;
    background-color: #87cefa;
    border: none;
    box-shadow: 0 0 8px gray;
    color: #ffffff;
    line-height: 1.5;
    font-size: 2vh;
    font-weight: bold;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  :hover {
    background-color: #00bfff;
  }
  .send__btn[disabled] {
    background-color: #ddd;
    cursor: not-allowed;
  }
}

Wenn Sie dies bisher tun, sieht es folgendermaßen aus.

Punkt

Diesmal, um den Status zu verwalten, ob das Formular in JavaScript eingegeben oder ausgewählt wurde

<%= form.collection_select :prefecture_id, Prefecture.all, :id, :name, {include_blank: 'Bitte auswählen'}, {class: "prefecture__input", id: 'input01'} %>

Die ID wird in Form von "id:" input01 "angegeben.

Auf diese Weise wird für jedes Formular eine ID angegeben. Diesmal ist es jedoch unmöglich, die ID mit demselben Namen wiederzuverwenden. Die IDs werden der Reihe nach in Form von "id =" input02 "," id = "input03" ... zugewiesen. (Der Klassenname kann vereinheitlicht und wiederverwendet werden, diesmal wird er jedoch weggelassen.)

In Bezug auf SCSS wird beschrieben, dass die Schaltflächenfarbe entsprechend dem aktivierten / deaktivierten Status der Schaltfläche geändert wird (Klasse: send__btn). Die Verwaltung des Schaltflächenstatus wird mit einem Wert namens distabled verwaltet, der später beschrieben wird. Wenn es ungültig ist, wird dem Element ein Wert namens distabled zugewiesen, also scss

.send__btn[disabled] {
  background-color: #ddd;
  cursor: not-allowed;
}

Wenn die Schaltfläche deaktiviert ist, ist die Farbe ausgegraut und der Cursor deaktiviert.

①-2 Beschreiben Sie den Prozess in submit.js

Danach bestimmen wir, ob das Formular in die js-Datei eingegeben / ausgewählt wurde, und beschreiben den Vorgang zum Aktivieren / Deaktivieren der Senden-Schaltfläche.

Dieses Mal werden wir es in eine Datei namens submit.js schreiben.

`submit.js`


//Verhindern Sie, dass die Senden-Schaltfläche gedrückt wird, bis das Formular ausgefüllt und ausgewählt ist=============================================
$(function() {
  //Deaktivieren Sie zuerst die Schaltfläche "Senden"
  $('#sending').prop("disabled", true);
  
  //Beim Betrieb eines Eingabefeldes, für das "Eingabe" für id eingestellt ist
  $("[id^= input],#post_images_attributes_0_image").change(function () {
      //Um zu definieren, ob das Eingabefeld leer ist, wird der Status des Inhalts des Formulars mithilfe einer Variablen namens send verwaltet.
      let send = true;
      //id=input~Überprüfen Sie die als angegebenen Eingabefelder&Überprüfen Sie das Bild (Bild mit Indexnummer 0)
      $("[id^= input],#post_images_attributes_0_image").each(function(index) {
        //Überprüfen Sie den Inhalt (die Werte) des Formulars in der angegebenen Reihenfolge. Wenn der Wert des Formulars leer ist, senden Sie ihn=falsch
        if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
          send = false;
        }
      });
      //Wenn alle Formulare ausgefüllt sind(send =Wenn wahr)
      if (send) {
          //Aktivieren Sie die Schaltfläche "Senden"
          $('#sending').prop("disabled", false);
      }
      //Wenn auch nur ein Formular leer ist(send =Wenn falsch)
      else {
          //Deaktivieren Sie die Schaltfläche "Senden"
          $('#sending').prop("disabled", true);
      }
  });
});

Punkt

Senden Sie zuerst die Schaltfläche

<input type='submit' id='sending' class='send__btn' value='Post'>

Andererseits ist die Schaltfläche als "Requisite (deaktiviert, falsch)" deaktiviert.

Die prop-Methode hat die Rolle __, einen Wert für das angegebene Attribut festzulegen. distabled ist ein Attribut __, das das angegebene HTML-Element ungültig machen kann. Durch die Verwendung in Kombination mit der Prop-Methode prop (‘ disabled ’, true)” ・・・ Element deaktivieren prop (‘ disabled ’, false)” ・・・ Element aktivieren Sie können es so verwenden.

Referenz: Requisitenmethode: ・・ http://js.studio-kingdom.com/jquery/attributes/prop distabled ・・・ https://persol-tech-s.co.jp/hatalabo/it_engineer/463.html#disabled

Nächster,

$("[id^= input],#post_images_attributes_0_image").change(function ()

Es wird beschrieben als.

Die Beschreibung lautet "Das Ereignis wird ausgelöst, wenn sich die Werte von" [id ^ = Eingabe] "und" # post_images_attributes_0_image "ändern.

Worauf ich Sie aufmerksam machen möchte

[id^= input]

Es ist der Teil von. Dies verwendet die Spezifikationsmethode unter Verwendung der Attribute von jQuery. Es gibt ungefähr vier Möglichkeiten, dies anzugeben.

Spiel starten
Rückwärtsspiel
Teilweise Übereinstimmung
Ablehnung

Für "Matching starten" können Sie alle Elemente erhalten, die mit der Zeichenfolge am Anfang des Attributnamens übereinstimmen, indem Sie einfach "^" wie "Attribut ^ = Attributname" hinzufügen.

In diesem Fall wird durch Setzen von "[id ^ = Eingabe]" das Element mit id = "input01", id = "input02, ... id =" input05, dh das Element mit dem Namen input im ID-Namen Sie können sie alle bekommen.

Für die Spezifikationsmethode unter Verwendung der Attribute von jQuery habe ich auf [diesen Artikel] verwiesen (https://www.sejuku.net/blog/34426). Wenn Sie mehr als die Präfixbezeichnung wissen möchten, schauen Sie bitte.

fortsetzen,

let send = true;

Wird beschrieben, um den Status des Formulars mithilfe einer Variablen namens send zu verwalten, um zu beurteilen, ob das Eingabefeld leer ist. Wenn dies zutrifft, bedeutet dies, dass das Formular vollständig ausgefüllt ist.

$("[id^= input],#post_images_attributes_0_image").each(function(index) {
  //Überprüfen Sie den Inhalt (die Werte) des Formulars in der angegebenen Reihenfolge. Wenn der Wert des Formulars leer ist, senden Sie ihn=falsch
  if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
    send = false;
  }
});

Verwenden Sie für jede Methode die Elemente, deren ID als Eingabe bezeichnet wird, entsprechend der Anzahl der Elemente. Beim Abrufen muss im Argument jeder Methode eine Rückruffunktion definiert werden. Geben Sie daher "function (index)" an. Auf diese Weise können Sie die Indexnummer abrufen und jedem extrahierten Element die Indexnummer zuweisen.

In diesem Fall als Bild

0 : id="input01"Elemente von
１ : id="input02"Elemente von
２ : id="input03"Elemente von
３ : id="input04"Elemente von
４ : id="input05"Elemente von

Ich denke, es wird so aussehen.

Außerdem wird dem Zielobjekt "# post_images_attributes_0_image" hinzugefügt. Ehrlich, Wenn ich mehrere Bilder poste, kann ich keine gute ID festlegen und angeben, daher habe ich sie hier hinzugefügt. (Ich würde es begrüßen, wenn Sie mir sagen könnten, ob es einen anderen Weg gibt!)

Nach dem Abrufen mit der Indexnummer bei jeder Methode

if ($("[id^= input],#post_images_attributes_0_image").eq(index).val() === "") {
  send = false;
}

Fahren Sie mit der Verarbeitung von fort.

Hier überprüfen wir, ob der Inhalt des Formulars für jedes der extrahierten Elemente leer ist. Die "eq-Methode" wird verwendet, um jede zu verifizieren. Was ist die eq-Methode? Filtert die aktuell übereinstimmenden Elemente nach Indexnummer. (eq method reference site)

Das Element mit dem Namen input in id ist ein Bild, in dem die Indexnummer in das Argument der eq-Methode eingegeben wird, da die Indexnummern 0 bis 4 in jeder Methode zugewiesen sind. (Beispiel: Gleichung (0), Gleichung (1) ... Gleichung (4))

Verwenden Sie die val-Methode, um den Wert des Formulars abzurufen (Referenzseite der val-Methode).

~~ ===" " bedeutet "~~ ist leer".

Es validiert die extrahierten Elemente nacheinander und gibt "send = false" zurück, wenn eines der Elemente einen leeren Formularwert hat.

Letzte

//Wenn alle Formulare ausgefüllt sind(send =Wenn wahr)
if (send) {
  //Aktivieren Sie die Schaltfläche "Senden"
  $('#sending').prop("disabled", false);
}
//Wenn auch nur ein Formular leer ist(send =Wenn falsch)
else {
  //Deaktivieren Sie die Schaltfläche "Senden"
  $('#sending').prop("disabled", true);
}

Für den Teil von Im Fall von "if (send)" (dh wenn "send == true"), dh wenn das Formular vollständig ausgefüllt ist, "$ (" # send "). Prop (" disabled ", false);" Die Sendetaste ist aktiviert und kann gedrückt werden.

Im Fall von "else" (send == false), dh wenn nur ein Formular leer ist, wird die Schaltfläche "submit" in Form von "$ (" # send ") deaktiviert. Prop (" disabled ", true);" Um es unmöglich zu machen zu drücken.

①-3 abgeschlossen

Das ist es.

Schließlich

Da ich ein Anfänger bin, gibt es noch viele Teile, die ich nicht gut verstehe, und ehrlich gesagt denke ich, dass es viele Vorhersagen für Verbesserungen in Bezug auf diese Implementierung gibt. Ich würde es begrüßen, wenn Sie mir sagen könnten, ob es eine bessere Implementierungsmethode gibt. Wenn Sie diesen Artikel lesen, würde ich mich sehr freuen, wenn Sie auch LGTM erhalten könnten. Danke für Ihre Kooperation.

[JAVA] [Rails] [jQuery] Verhindert, dass die Senden-Schaltfläche gedrückt wird, bis das Formular ausgefüllt und ausgewählt wird.

Einführung

Vollständiges Bild

Zweck des Schreibens des Artikels

Zweck der Einführung

Umgebung

Voraussetzungen

Status des Artikelschreibers

Tabelle

Regler

posts_controller.rb

Lass uns jetzt arbeiten.

①-1 Erstellen Sie new.html.erb

erb:new.html.erb

Dann schreibe scss.

new.scss

Punkt

①-2 Beschreiben Sie den Prozess in submit.js

submit.js

Punkt

①-3 abgeschlossen

Schließlich

`posts_controller.rb`

`erb:new.html.erb`

`new.scss`

`submit.js`