将表单结果传递给另一个表单形成值

时间:2015-10-08 16:36:23

标签: javascript php jquery arrays forms

我在页面上有两个表单,“顶层表单”搜索电影,我正在尝试从顶层表单中找到数据并将其作为值传递给底部表单,以便将其输入到数据库中。

我无法做到这一点但是,我可以将结果显示在页面上。这是我的代码:

TOP FORM DATA

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php
$squery="";
if(isset($_GET["squery"]))
{
$squery=$_GET["squery"];
}
?>
<div class="col-xs-8 col-xs-offset-2">
<form action="#" method="GET" class="form-horizontal">
<div class="form-group">
        <label for="newMovieName" class="col-sm-3 control-label">Search what movie?</label>
        <div class="col-sm-9"> <input type="text" name="squery" class="form-control"><br />
<input type="submit" value="Submit" class="btn btn-success"></div></div>
</form>
  <script type="text/javascript" charset="utf-8">
    var api_key = '6969696969696969696969696969696';

    $(document).ready(function(){
      $.ajax({
        url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
        dataType: 'jsonp',
        jsonpCallback: 'testing'
      }).error(function() {
        console.log('error')
      }).done(function(response) {
          var i=0;
       // for (var i = 0; i < response.results.length; i++) {
          $('#search_results').append('<li>' + response.results[i].title + '</li>');
       // }
         $('#search_results_title').append(response.results[i].title);
         $('#search_results_release').append(response.results[i].release_date);
         $('#search_results_overview').append(response.results[i].overview);
         $('#search_results_poster').append('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
         $('#search_results_votes').append(response.results[i].vote_count);
      });
    });
  </script>

TOP FORM RESULTS

以下是 BUT 上方表单中显示结果的位置,我希望这些结果在下面的表单中显示为值。

  <h3>Results</h3>

  <p id="error"></p>
  <ul id="search_results_title"></ul>
  <ul id="search_results_release"></ul>
  <ul id="search_results_overview"></ul>
  <ul id="search_results_poster"></ul>
  <ul id="search_results_votes"></ul>

底部表格数据

以下是应该提交到数据库的底部表单,其中“结果”是上面的值。

    <form class="form-horizontal" role="form" action="processmovie.php" method="get" enctype="text/plain">
  <div class="form-group">
    <label for="newMovieName" class="col-sm-3 control-label">Title</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="newMovieName" name="movie_name" placeholder="Movie Title" required value="">
    </div>
  </div>
  <div class="form-group">
    <label for="movieYear" class="col-sm-3 control-label">Year</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="movieYear" name="movie_year" placeholder="Year" required>
    </div>
  </div>
  <div class="form-group">
    <label for="movieBio" class="col-sm-3 control-label">Storyline</label>
    <div class="col-sm-9">
      <textarea type="email" class="form-control" id="movieBio" name="movie_bio" rows="4" placeholder="Enter Storyline" required></textarea>
    </div>
  </div>
  <div class="form-group">
    <label for="newImage" class="col-sm-3 control-label">Movie Cover URL</label>
    <div class="col-sm-9">
      <input type="text" id="newImage" class="form-control" name="movie_img" placeholder="Enter URL" required>
    </div>
  </div>
  <div class="form-group">
    <label for="movieRating" class="col-sm-3 control-label">Rating</label>
    <div class="col-sm-9">
      <select id="movieRating" name="movie_rating" class="form-control" required>
        <option value="G">G</option>
        <option value="PG">PG</option>
        <option value="PG-13">PG-13</option>
        <option value="R">R</option>
        <option value="NR">NR (Not Rated)</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-success">Add Movie</button>
    </div>
  </div>
</form>

我尝试使用各种代码来尝试获取此处的值是一个示例:<?php echo $_GET['search_results_title'];?>

我也找到了这样的例子:How to pass the value of a form to another form?但是,我的表单在同一页面而不是不同的。

1 个答案:

答案 0 :(得分:2)

正如我在评论中所说,你只想将你的ajax调用改为:

$.ajax({
        url: 'http://api.themoviedb.org/3/search/movie?api_key=' + api_key + '&query=<?php echo $squery; ?>',
         dataType: 'jsonp',
         jsonpCallback: 'testing'
      }).error(function() {
         console.log('error')
      }).done(function(response) {
         var i=0;

         $('#newMovieName').val(response.results[i].title);
         $('#movieYear').val(response.results[i].release_date);
         $('#movieBio').val(response.results[i].overview);
         $('#newImage').val('https://image.tmdb.org/t/p/w185' + response.results[i].poster_path);
      });

(我不确定response.results[i].vote_countmovieRating之间的关系

Here is a fiddle显示结果,但由于ajax调用我无法在那里完全复制代码