Как добавить Onclick в html - PullRequest
Новая
       0

Как добавить Onclick в html

0 голосов
/ 03 ноября 2019

У меня есть HTML-код. Я хочу реализовать onclick для имени кнопки GET DATA в моем HTML-коде. Также я хочу отправить userId и categoryId данные в файл php, когда я нажимаю на кнопку GET DATA Пожалуйста, добавьте это в мой код. Вот мой код 

<html>
<header>
    <title>Hello World
    </title>
    </header>
<body>





<!--javascript make append table data-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {

var user = document.getElementById("userId").value;
var category = document.getElementById("categoryId").value;
alert (user);
alert (category);
   $.getJSON('myphp.php',{"userId":'user',"categoryId":'category'}, function(data) {
 $.each(data.videoLectureListing, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;

         var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");

     });

   });

});
</script>




<!--javascript  append table data ended -->

















<!-- user form -->
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
<!-- user form -->
















<!--table-->

<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
  <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

<!--table data end-->


</body>
</html>

Ответы [ 2 ]

0 голосов
/ 03 ноября 2019

самая короткая версия вашего кода: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
$("body").on("submit","form", function(){
    let fdata= new FormData($("form")[0]);
   alert(fdata);

$.ajax({type:'GET',url:'myphp.php',data:fdata, success: function (data){
     $.each(data.videoLectureListing, function(i, f) {
      var link = "https://www.youtube.com/embed/"+ f.video;
      var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
$("#userdata tbody").empty();

$(tblRows).appendTo("#userdata tbody");
     });
}});
}
</script>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
   <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>
0 голосов
/ 03 ноября 2019

Присвойте своей кнопке идентификатор и измените тип с отправки на кнопку: 

<button id="myButton type="button" >GET DATA</button>

Вы используете jQuery, чтобы вы могли добавить прослушиватель событий (событие onclick) следующим образом: 

$('#myButton').click(function(){
  // your code here
});

Подробнее об ajax и PHP вы можете найти здесь: Форма отправки с AJAX-передачей данных формы в PHP без обновления страницы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...