How to call a JQuery function from a SUBMIT button using parameters

Question

I create a HTML file, that have this:

It's ok! Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Form part -->
<!-- bdd8feef -->
<!-- http://www.omdbapi.com/?i=tt0978762&apikey=bdd8feef -->
<!-- 1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/discover/movie?api_key=1ca8226c006afb25adc4c816a2f8c184 -->
<!-- https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=star+wars&page=1 -->
<!-- Just a button <button type="button">Click Me!</button> -->
<h2>HTML Forms</h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <form action="https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184" method="post" target="_blank">
      Buscar:<br>
      <input type="text" name="query" value="black">
      <br>
    <!--   Last name:<br>
      <input type="text" name="lastname" value="Mouse">-->
      <br>
      <input type="submit" value="Submit">
    </form> 
</body>
</html>

But that file, gets a JSON file, and I want to parse this way:

In another TAB (Chrome) or may be bellow in the same file, it ok.
I have the code to parse the JSON file (the same code where I create the second image)

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
   $(function() {
   $.getJSON('https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=star+wars&page=1&language=en', function(data) {
       $.each(data.results, function(i, f) {
            var myPic = "https://image.tmdb.org/t/p/w185" + f.poster_path 
            var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path 
          var tblRow = "<tr>" + "<td>" 
          + f.vote_count + "</td>" + "<td>" 
          + f.id + "</td>" + "<td>" 
          + f.video + "</td>" + "<td>" 
          + f.vote_average + "</td>" + "<td>" 
          + f.title + "</td>" + "<td>" 
          + f.popularity + "</td>" + "<td>" 
          + "<img src=" + myPic + ">" + "</td>" + "<td>" 
          + f.original_language + "</td>" + "<td>" 
          + f.original_title + "</td>" + "<td>" 
          + f.genre_ids + "</td>" + "<td>" 
          + "<img src=" + myBac + ">" + "</td>" + "<td>" 
          + f.adult + "</td>" + "<td>"  
          + f.overview + "</td>" + "<td>" 
          + f.release_date + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });
   });
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>Total de votos</th>
            <th>Id TMDB</th>
            <th>Video</th>
            <th>Promedio de votos</th>
            <th>Titulo</th>
            <th>Popularidad</th>
            <th>Poster</th>
            <th>Lenguaje original</th>
            <th>Titulo Original</th>
            <th>Generos</th>
            <th>Background</th>
            <th>Para Adultos</th>
            <th>Sinopsis</th>
            <th>Fecha de lanzamiento</th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>
</body>
</html>

What I need now it is to "combine" both files. When the user press the SUBMIT button appears the JSON file parsed, not just the code, in another tab, that is useless, i want to see the table. And i need to send the text in the INPUT field (Buscar) to create the search and create the table using that parameters, QUERY= and the word or words the user write in the input field.

The resulting string to send as a parameter will be:

https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=black

Not at all clear what the specific problem is here and what's the question? — charlietfl
– charlietfl, Commented May 6, 2018 at 22:59
You have to prevent the form submit using for ex. e.preventDefault(), than you need to serialize the form data, please take a look at .serialize(). The second parameter in $.getJSON is actually serialized data, take a look at .getJSON() method and also consider using $.ajax() method (which is better for understanding). — skobaljic
– skobaljic, Commented May 6, 2018 at 23:05
So you need a param in url for the search term to send to API? What is param key name if so? — charlietfl
– charlietfl, Commented May 6, 2018 at 23:51
@charlietfl I need to send the URL as a parameter to the API, and the key will be ?QUERY=[ANYWORD]+[ANYWORD] — Elbert Villarreal
– Elbert Villarreal, Commented May 7, 2018 at 0:17

Ryuk Lee · Accepted Answer · 2018-05-07 04:38:35Z

1

First you change the type=submit to type=button

<form action="https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184" method="post" target="_blank">
  Buscar:<br>
  <input type="text" name="query" value="black">
  <br>
<!--   Last name:<br>
  <input type="text" name="lastname" value="Mouse">-->
  <br>
  <button type="button" id="submitform">Submit</button>
</form> 
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
   <thead>
        <th>Total de votos</th>
        <th>Id TMDB</th>
        <th>Video</th>
        <th>Promedio de votos</th>
        <th>Titulo</th>
        <th>Popularidad</th>
        <th>Poster</th>
        <th>Lenguaje original</th>
        <th>Titulo Original</th>
        <th>Generos</th>
        <th>Background</th>
        <th>Para Adultos</th>
        <th>Sinopsis</th>
        <th>Fecha de lanzamiento</th>
    </thead>
  <tbody>
   </tbody>
</table>
</div>
</div>

Then Use jquery to redirect

$(document).ready(function(){
    $('#submitform').click(function(){
        var action =  $(this).parent().attr('action');
      var value_user_type = $(this).parent().find('input[name="query"]').val();
//change space to plus if you want, it works with multiple space
//value_user_type = value_user_type.split(' ').filter(function(value){return value != ""}); //this line split all words into array
//value_user_type = value_user_type.join('+',value_user_type ); // this line join all words and add the plus
        action += '&query='+value_user_type +'&page=1&language=en'; // this is add whatever user entered
        $.getJSON(action , 
   function(data) {
      $.each(data.results, function(i, f) {
        var myPic = "https://image.tmdb.org/t/p/w185" + f.poster_path 
        var myBac = "https://image.tmdb.org/t/p/w92" + f.backdrop_path 
      var tblRow = "<tr>" + "<td>" 
      + f.vote_count + "</td>" + "<td>" 
      + f.id + "</td>" + "<td>" 
      + f.video + "</td>" + "<td>" 
      + f.vote_average + "</td>" + "<td>" 
      + f.title + "</td>" + "<td>" 
      + f.popularity + "</td>" + "<td>" 
      + "<img src=" + myPic + ">" + "</td>" + "<td>" 
      + f.original_language + "</td>" + "<td>" 
      + f.original_title + "</td>" + "<td>" 
      + f.genre_ids + "</td>" + "<td>" 
      + "<img src=" + myBac + ">" + "</td>" + "<td>" 
      + f.adult + "</td>" + "<td>"  
      + f.overview + "</td>" + "<td>" 
      + f.release_date + "</td>" + "</tr>"
       $(tblRow).appendTo("#userdata tbody");
    });
  });
    })
})

To prevent form post, add more

    $('form').submit(function(e){
        e.preventDefault();
    })

edited May 7, 2018 at 4:38

answered May 7, 2018 at 1:38

Ryuk Lee

7445 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Elbert Villarreal Over a year ago

I would like to add the table bellow the "BUSCAR" field, but that is my question, don't know how to send parameters as you suggest in the second block of code you wrote.

Ryuk Lee Over a year ago

Do you want like this? https://api.themoviedb.org/3/search/movie?api_key=1ca8226c006afb25adc4c816a2f8c184&query=[value User enter]

Elbert Villarreal Over a year ago

that is what I want, after that, as you can see on my question, y want to parse the JSON file that result, where the user can see the table, in another tab, as you can see in the second picture.

Elbert Villarreal Over a year ago

the [Value user enter] could be one word or several and the value would be: Star+Wars+Clone

Ryuk Lee Over a year ago

Try to put form submit and table in 1 page, change the jquery allow my last edited and try again

Collectives™ on Stack Overflow

How to call a JQuery function from a SUBMIT button using parameters

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related