Apa itu onclick pada javascript?

Saya baru belajar javascript dan php. Saya membuat formulir kontak dan saya ingin tombol kirim untuk menyelesaikan dua hal ketika saya menekannya:

  1. kirimkan data kepada saya (bagian ini berfungsi)
  2. baca fungsi onclick saya (bagian ini tidak berfungsi)
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">

<?php
if ($_POST['submit']) {
 ////????? 
}
?>

Saya mengirim data ke email saya, dan saya mendapatkannya. Tetapi fungsi onclick tampaknya tidak berfungsi. Saya mencoba meninjau tambahkan fungsi klik untuk tombol kirim tetapi tidak membantu.

Saya perlu melihat tag html tombol kirim Anda untuk bantuan yang lebih baik. Saya tidak terbiasa dengan php dan bagaimana menangani postback, tapi saya rasa tergantung pada apa yang ingin Anda lakukan, Anda memiliki tiga opsi:

  1. Mendapatkan tombol penanganan onclick di sisi klien: Dalam hal ini Anda hanya perlu memanggil fungsi javascript.

function foo() {
   alert("Submit button clicked!");
   return true;
}
<input type="submit" value="submit" onclick="return foo();" />

  1. Jika Anda ingin menangani klik di sisi-server, Anda harus terlebih dahulu memastikan bahwa atribut metode tag formulir diatur ke post:

    <form method="post">
    
  2. Anda dapat menggunakan onsubmit event dari form sendiri untuk mengikat fungsi Anda.

<form name="frm1" method="post" onsubmit="return greeting()">
    <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

html:

<form method="post" name="form1" id="form1">    
    <input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>

Javascript: Untuk mengirimkan formulir menggunakan javascript

function eatFood() {
document.getElementById('form1').submit();
}

untuk menampilkan pesan onclick

function eatFood() {
alert('Form has been submitted');
}

jika Anda perlu melakukan sesuatu sebelum mengirimkan data, Anda bisa menggunakan formulir onsubmit

<form method=post onsubmit="return doSomething()">
  <input type=text name=text1>
  <input type=submit>
</form>

Saya punya kode ini:

<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {     
    document.getElementById("boton").style.display = 'none';
    document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";     
    return true;
} 
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio"  /></td>
</tr>
</table>
<div id="boton">
   <input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>

  1. Buat tombol tersembunyi dengan id="hiddenBtn" dan type="submit" yang melakukan pengiriman
  2. Ubah tombol saat ini menjadi type="button"
  3. atur onclick dari tombol saat ini memanggil tampilan function seperti di bawah ini:

    function foo() { // do something before submit ... // trigger click event of the hidden button $('#hinddenBtn').trigger("click"); }

<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>

jika Anda ingin membuka halaman di klik tombol dalam HTML tanpa bahasa scripting maka Anda dapat menggunakan kode di atas.

Apa itu onclick pada javascript?
Obyek acara

Contoh

Mengeksekusi JavaScript ketika sebuah tombol diklik:

<button onclick="myFunction()">Click me</button>

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.


Definisi dan Penggunaan

Acara onclick terjadi ketika pengguna mengklik pada sebuah elemen.


Dukungan Browser

Peristiwa
onclick iya nih iya nih iya nih iya nih iya nih

Sintaksis

Dalam HTML:

Dalam JavaScript:

Dalam JavaScript, menggunakan addEventListener() metode:

object .addEventListener("click", myScript );

Cobalah sendiri "

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.


Rincian teknis

Gelembung: iya nih
dibatalkan: iya nih
jenis acara: MouseEvent
tag HTML yang didukung: Semua elemen HTML, KECUALI: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, dan <title>
DOM Versi: Level 2 Acara

Apa itu onclick pada javascript?

Contoh lebih

Contoh

Klik pada <button> elemen untuk menampilkan hari ini, tanggal dan waktu:

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>

Cobalah sendiri "


Contoh

Klik pada <p> elemen untuk mengubah warna teks untuk merah:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>

Cobalah sendiri "


Contoh

Contoh lain tentang cara mengubah warna dari <p> elemen dengan mengkliknya:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
    elmnt.style.color = clr;
}
</script>

Cobalah sendiri "


Contoh

Klik tombol untuk menyalin beberapa teks dari sebuah field input untuk field input lain:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

Cobalah sendiri "


Contoh

Menetapkan "onclick" event ke objek window:

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
    document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

Cobalah sendiri "


Contoh

Menggunakan onclick untuk membuat tombol dropdown:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Cobalah sendiri "


Pages terkait

Referensi HTML DOM: acara ondblclick

Referensi HTML DOM: acara onmousedown

Referensi HTML DOM: acara onmouseup


<Object Acara

Apa itu onclick javascript?

Contoh Kode Secara keseluruhan, onclick() adalah jenis event JavaScript yang memungkinkan Anda menjalankan kode tertentu saat elemen di halaman web diklik. Dengan menggunakan kode di atas, kita akan berhasil membuat halaman web yang akan menjalankan kode ketika kita menekan tombol.

Apa itu onclick pada html?

onclick = adalah event jika sebuah element html di klik. onchange = adalah event jika sebuah element html berubah. onmouseover = adalah event jika sebuah element html di letakkan cursor mouse. onmouseout = adalah event jika saat cursor mouse meninggalkan element html.

Apa itu event javascript?

Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

Apa itu OnMouseOut?

OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.