Оператор JavaScript .submit не может получить входные значения из формы, но .click может получить их, когда не форма?

Question

Оператор JavaScript .submit не может получить входные значения из формы, но .click может получить их, когда не форма?

0

Я делаю небольшую программу с Ruby и Sinatra, которая сравнивает различные типы носителей. В этом случае я сравниваю фильмы. Я отправлю свой код, а затем объясню проблему.

Файл ERB:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Media Comparison
    </title>

    <script src="/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">
      //when the document is ready to be manipulated
      $(document).ready(function(){

        //add a click handler to the button
        $("#add_movie").submit(function() {

          $.post("/movie", //url
            {name: $("#name").val(), releaseDate: $("#release_date").val().toString(), director: $("#director").val(), ratingCritic: $("#ratingc").val(), ratingMPAA: $("#ratingm").val(), genre: $("#genre").val()}, //data 
            function(data) { //function to call on return
              //empty out the select box
              $("#movie1").empty();
              $.each(data, function( key, val ) {
                //refill it

                $("#movie1").append("<option value=" + val.name + "> " + val.name  + "</option>"
                  );
              });
              $("#movie2").empty();
              $.each(data, function( key, val ) {


                $("#movie2").append("<option value=" + val.name + "> " + val.name  + "</option>"
                  );
              });

              //clear out the name and email textboxes - possibly arbitrary
              $("#name").val("");
              $("#release_date").val("");             
              $("#director").val("");
              $("#ratingc").val("");
              $("#ratingm").val("");
              $("#genre").val("");  
              }
            );
        });
      });
    </script>
  </head>
  <body>
    <FORM METHOD="LINK" ACTION="/">
        <input id='backButton' type='submit' value='Go back' />
    </FORM>
    <h1>Would you like to compare movies...</h1>
    <p>
    <div id= "movies">      
      <select id = "movie1">
        <% @movie_list.each do |movie| %>       
          <option value="<%= movie.name %>"><%= movie.name %></option>
        <% end %>
      </select>
      <select id = "movie2">
        <% @movie_list.each do |movie| %>       
          <option value="<%= movie.name %>"><%= movie.name %></option>
        <% end %>
      </select>
      <input id='compare_movies' type='submit' value="Compare these movies!" />
    </div>
    <div id= "compare">
      <script type="text/javascript">
      $("#compare").empty();
        $(document).ready(function(){

          $("#compare_movies").click(function() {
            if($("#movie1").val() == $("#movie2").val()){
              alert("You can't compare the same two movies!");
            }
            else{
              $("#compare").empty();
              $("#compare").append("<table border=\"1\" style=\"width:300px\"><tr><td>" + $("#movie1 option:selected").text() + "</td><td>" + $("#movie2 option:selected").text() + "</td></tr><tr><td>Great</td><td>Movies</td></tr></table>");
            }
          });
        });
      </script>
    </div>
    <h1>...Or add one?</h1>
    <form>
      Name: <input id='name' type='text' required>
      <br/>
      Release Date: <input id='release_date' type='date' required>
      <br/>
      Director: <input id='director' type='text' required>
      <br/>
      Critical Rating: <input id='ratingc' type='number' step=0.5 min="0" max="5" required>
      <br/>
      MPAA Rating: <input id='ratingm' type='text' required>
      <br/>
      Genre: <input id='genre' type='text' required>
      <br/>
      <input id='add_movie' type='submit' value="Add movie" >
    </form>
  </body>
</html>

.rb файл:

require 'sinatra'
require 'sequel'
require 'sinatra/json'

DB = Sequel.connect('sqlite://Comparison.db')

DB.create_table? :tvs do
  primary_key :id #auto incrementing primary key
  String :name #name of the show
  Integer :season #number of seasons the show has had
  Integer :startYear #The year the show first aired
  Boolean :current #whether or not the show is currently running
  String :endYear, :default=>"Currently Airing"   #The year the show finished. Able to be false if it current
  Float :rating #The show rating, out of five
end 
DB.create_table? :movies do
  primary_key :id #auto incrementing primary key
  String :name #name of the Movie
  String :releaseDate #Date the movie was release
  String :director #Director of the
  Float :ratingCritic #Does it suck?
  String :ratingMPAA #MPAA rating
  String :genre #genre of movie
end
DB.create_table? :musics do
  primary_key :id #auto incrementing primary key
  String :albumTitle #The title of the album
  String :releaseDate #The date the album was released
  String :artist #Album artist
  Boolean :advisory #True if there is a parental advisory
  String :genre #Genre of the music
  Float :rating #Critical rating
end
DB.create_table? :games do
  primary_key :id #auto incrementing primary key
  String :name #Name of the game
  String :ratingESRB, :size=>1 #Game rating, only one character long
  String :releaseDate #Game release date
  String :publisher #Game publisher
  String :platform #Game platform
  Float :ratingCritic #Critical rating
end

require_relative 'Game'
require_relative 'Movie'
require_relative 'Music'
require_relative 'Tv'

def addMovie
  Movie.create(:name => "The Lion King", :releaseDate => "1996-10-26", :director => "John Lasseter", :ratingCritic => 4.5, :ratingMPAA => "PG", :genre => "Family")
  Movie.insert(:name => "Cats and Dogs", :releaseDate => "2000-4-16", :director => "Mr. Director", :ratingCritic => 2.3, :ratingMPAA => "PG", :genre => "Family")
end
def print_movies
  #get all the students and print them (each row comes back as a hash)
  Movie.all.each do |movie|
    #print
    puts "Name: #{movie[:name]}
Release Date: #{movie[:releaseDate]}
Director: #{movie[:director]}
Critical Rating: #{movie[:ratingCritic]}
MPAA Rating: #{movie[:ratingMPAA]}
Genre: #{movie[:genre]}\n\n"
  end
end

def delete_media_db
  DB[:movies].delete
  DB[:games].delete
  DB[:tvs].delete
  DB[:musics].delete
end

get '/' do
  erb :welcome
end
get '/movie' do
  @movie_list = Movie.all
  erb :movie
end
post '/movie' do
  Movie.create(:name => params[:name],
         :releaseDate => params[:releaseDate],
         :director => params[:director],
         :ratingCritic => params[:ratingCritic],
         :ratingMPAA => params[:ratingMPAA],
         :genre => params[:genre])
    movies = Movie.all.map do |movie|
    {:name => movie.name, :releaseDate => movie.releaseDate, :director => movie.director, :ratingCritic => movie.ratingCritic, :ratingMPAA => movie.ratingMPAA, :genre => movie.genre}
  end

  #turn the array of hashes into json
  return json movies
end

Моя проблема возникает из формы внизу файла ERB. Это позволяет пользователю добавлять фильм в базу данных, которую они хотели бы сравнить. Первоначально не было тегов формы, и данные передавались в базу данных путем ссылки на поле ввода по идентификатору в этих строках:

name: $("#name").val(), releaseDate: $("#release_date").val().toString(), director: $("#director").val(), ratingCritic: $("#ratingc").val(), ratingMPAA: $("#ratingm").val(), genre: $("#genre").val()},

Тем не менее, я хотел сделать простую проверку данных, чтобы убедиться, что что-то есть в полях ввода, поэтому я сделал необходимые поля и поместил их в форму. Однако теперь, когда они в форме, и я сменил click на submit, я, похоже, больше не вхожу в submit. Я не мог сделать click, так как он обрабатывал POST независимо от того, были ли значения действительными, поскольку он ждал нажатия, а не отправки.

Riot Goes Woof 18 март 2014, в 19:29

Источник

Теги:

javascript

jquery

html

ruby

sinatra

1 ответ

Ещё вопросы

T J · Answer 1 · 2014-03-18T19-05-00.000Z

Прежде всего, вы, вероятно, в большинстве случаев не нуждаетесь, если вы не хотите его подавать
Если у вас есть форма, и вам просто нужно обработать ее на клиентской стороне, не отправив ее, вы можете просто использовать обычную кнопку вместо кнопки отправки
Если вы хотите обработать данные на стороне клиента и затем отправить их, в вызове обработчика кнопки e.preventDefault//where e is the event object и после обработки доступа к данным из и отправки с помощью функции submit()

примером может служить пример

<input id='compare_movies' type='submit' value="Compare these movies!" />

$("#compare_movies").click(function(e) {
e.preventDefault();
        if($("#movie1").val() == $("#movie2").val()){
          alert("You can't compare the same two movies!");
        }
        else{
          $("#compare").empty();
          $("#compare").append("<table border=\"1\" style=\"width:300px\"><tr><td>" + $("#movie1 option:selected").text() + "</td><td>" + $("#movie2 option:selected").text() + "</td></tr><tr><td>Great</td><td>Movies</td></tr></table>");
        }
$('selector').submit() // do this if you want to submit the form. selector can be an id, class etc of the form
});

примечание стороны: ваш код выглядит чуждо мне :)

Спасибо за ответ! Проблема в том, что я не беспокоюсь об этом. Тот работает нормально. Я говорю о представлении, которое представляет новые фильмы ниже. Выделенная вами часть кода также не является формой. Более того, я говорил об этом: <form> Имя: <input id = 'name' type = 'text' обязательно> ... <input id = 'add_movie' type = 'submit' value = "Добавить фильм"> </ форма>