Menampilkan Hasil Input Form dengan VALUE dan InnerHTML

Anda tentu pernah melihat kode html berbentuk form. Salah satu tujuan yang paling sering digunakan dalam website adalah untuk melakukan pencarian (search).

Menggunakan cara ini, Anda bisa menampilkan langsung hasil dari input/ teks masukan dari pengguna tanpa harus memuat ulang loading blog.

HTML
<form>
<input type="text" id="myText" name="inputText"/>
<input type="button" onclick="check(this.form)" value="Submit"/>
</form>

<!--Hasil Input Muncul-->
<div id="teksDiv" class="beriJarak">Hasil dalam div disini</div>
<input id="teksInput" class="beriJarak" value="Hasil dalam input disini"/>
<textarea id="teksArea" class="beriJarak">Hasil dalam textarea disini</textarea>
JavaScript
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/

function check(form)
{
 if(form.inputText.value == "")
  {
     alert("Silahkan tulis sesuatu untuk mencoba hasil")
  }

 else
 {
    var x = document.getElementById("myText").value; // Hasil dari input pada ID "myText"

    document.getElementById("teksDiv").innerHTML = x;
document.getElementById("teksInput").value = x;
document.getElementById("teksArea").innerHTML = x;

  }
}
CSS Style
.beriJarak {display:block;margin-bottom:10px;width:100%;}

Catatan
Pada tutorial ini, saya lengkapi dengan kontrol input (if dan else) agar pengguna paham bahwa dia harus mengisi bidang dalam form tersebut.

Untuk menghilangkan perintah if else, silahkan gunakan script ini
/*******
** Get more script: http://www.kangsigit.com **
   *************************************************
*****/
function check(form)
{
    var x = document.getElementById("myText").value; // Hasil dari input pada ID "myText"
    document.getElementById("teksDiv").innerHTML = x;
document.getElementById("teksInput").value = x;
document.getElementById("teksArea").innerHTML = x;
  }

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini