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
1 answers
solution1
1 ACCPTED 2018-05-07 01:38:11
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();
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Call submit button function from jquery?
how to call a function after iframe form submit using submit() jquery
How to call jquery function after calling wicket ajax submit button
call jquery function from button (not using onclick)
How to call a function on button click using jquery?
Call submit button method using JQuery ajax
How to call function on form submit using jQuery and Validate plugin?
how to call another function after the form submit using jquery
How to call a Controller from button using jQuery
How to call a php function with parameters using Ajax and JQuery
Related Tags