jquery ajax input[name=somename] val(data) - how to identify multiple variables

Question

With help from this site, so far I have figured out how to get a value to an input field through ajax. Now I need to get specific values to separate input fields (user form). Overview; the user is selecting data from jquery results to propagate to the form so the user does not have to manually enter that data.

Here is my script code:

  <script>
  var book_title;
  var author;
  var published;
  var description;
  var pages;
  var Publisher;
  var ISBN;
  $(function() { 
  $( "#dialog" ).dialog({
    height: 550, width: 450});
    $( ".btn" ).click(function(){ 
   //var book_title = $item['volumeInfo']['title'];
   $.ajax({
     type: "POST",
     url: 'book-meta.php',
     //dataType: 'json',
     //data: { book_title : $("#returnvalues").val()  },
     data: { book_title : '$title', author: "Author"},
     success: function(data)
         {
         //alert(data);
         //console.log(data);
         $("input[name='bbp_extra_field1']").val(data);
         $("input[name='bbp_extra_field2']").val(data);
         //$("#displayResults").html(data);
         },
         error: function(errorThrown){
         alert('error');
         }
         });
  $( "#dialog" ).dialog( "close" );  
  });
  });
  </script>

Here is the book-meta.php code:

     if ( isset( $_POST['book_title'] )) {
//      echo $_SESSION['book_title'];
//        $book_title = $_REQUEST['book_title'];
        $book_title = $_POST['book_title'];
        echo $book_title;

      }
     if ( isset( $_POST['author'] )) {
        $author = $_POST['author'];
        echo $author;

      }

Here is the code for data entry. So far, I can get data to the $value part, but it is the same data going to both input fields. In short, I am trying to get book_title to bbp_extra_field1, and I'm trying to get author to bbp_extra_field2.

add_action ( 'bbp_theme_before_topic_form_content', 'bbp_extra_fields');
function bbp_extra_fields() {
//  include 'book-meta.php';

  //This is where the cover will go, from google book search
   $value = get_post_meta( bbp_get_topic_id(), 'bbp_extra_fieldc', true);
//   echo '<label for="bbp_extra_fieldc">Cover</label><br>';
   echo "<p><input type='image' name='bbp_extra_fieldc' value='".$value."'></p>";
  //Input field for the Author
   $value = get_post_meta( bbp_get_topic_id(), 'bbp_extra_field1', true);
   echo '<label for="bbp_extra_field1">Author</label>';
   echo "<p><input type='text' name='bbp_extra_field1' value='".$value."'></p>";

   $value = get_post_meta( bbp_get_topic_id(), 'bbp_extra_field2', true);
   echo '<label for="bbp_extra_field2">Published</label><br>';
   echo "<p><input type='date' name='bbp_extra_field2' value='".$value."'></p>";

Any help would be appreciated. Thanks.

Answer 1

You can use json:

 if ( isset( $_POST['book_title'] )) {
    $book_title = $_POST['book_title'];
  }
 if ( isset( $_POST['author'] )) {
    $author = $_POST['author'];
  }

  $r=array("title"=>$book_title,"author"=>$author);
  print(json_encode($r));

I didn't check whether $book_title and $author exist in the above code. You probably need to check that.

In jquery.ajax adding dataType and changing success:

dataType: 'json',
success: function(data) {
     $("input[name='bbp_extra_field1']").val(data.title);
     $("input[name='bbp_extra_field2']").val(data.author);
}