Question

I want to create a javascript for checking value of textbox so if the textbox blank, it won’t proceed to next page. AND after checking (if all condition is true) it will return the result of textbox.

I’ve created this javascript:

function cekdata(myform)
{
    var id = document.myform.clientid.value;
        var nama = document.myform.nama.value;
        var divisi = document.myform.divisi.value;
        var way = document.getElementById('twoway').value;
        var ori = document.myform.lokasi.value;
        var desti = document.myform.tujuan.value;
        var ket = document.myform.keterangan.value;
        var tpergi = document.myform.tglb.value;
        var jpergi = document.myform.jamb.value;
        var mpergi = document.myform.menitb.value;
        var pegi = tpergi+', '+jpergi+':'+mpergi;
        var tplg = document.myform.tglp.value;
        var jplg = document.myform.jamp.value;
        var mplg = document.myform.menitp.value;
        var plg = tplg+', '+jplg+':'+mplg;
  if (document.myform.clientid.value == "")
  {
    alert("Please Fill Your ID");
    myform.clientid.focus();
    return false;
  }
  else
  if (document.myform.nama.value == "")
  {
    alert("Please Fill Passenger Name");
    myform.nama.focus();
    return false;
  }
  else
  if (document.myform.lokasi.value == "")
  {
    alert("Please Fill Origin Location");
    myform.lokasi.focus();
    return false;
  }
  else
  if (document.myform.tujuan.value == "")
  {
    alert("Please Fill Your Destination");
    myform.tujuan.focus();
    return false;
  }
  else
  if (document.myform.tglb.value == "")
  {
    alert("Please Fill Departure Date");
    myform.tglb.focus();
    return false;
  }
  else
  if (document.myform.novehicle.value == "")
  {
    alert("Please Fill Vehicle Number");
    myform.novehicle.focus();
    return false;
  }
  else
  if (document.myform.driverid.value == "")
  {
    alert("Please Fill Driver ID");
    myform.driverid.focus();
    return false;
  }
  else
  if(document.getElementById('twoway').checked)
  {
      if (document.myform.tglp.value == "")
      {
        alert("Please Fill Return Date");
        myform.tglp.focus();
        return false;
      }
      else
      if (document.myform.tglb.value > document.myform.tglp.value)
      {
        alert("Return date must bigger than departure date");
        myform.tglp.focus();
        return false;
      }
  }
  else
  {
        var a = window.confirm("CONFIRMATION :\nID : " +id+"\nName : "+nama+"\nDivision : "+divisi+"\nOne Way : "+way+"\nOrigin : "+ori+"\nDestination : "+desti+"\nNotes : "+ket+"\nDeparture : "+pegi+"\nArrived :"+plg);
        if (a==true)
        {
            return true;
        }
        else
        {
            return false;
        }
  }
}

And I called this function like this:

<form name="myform" onsubmit="return cekdata(this);" method="POST" action="<?php $_SERVER["PHP_SELF"]; ?>">

But what I got is the confirm box never show up, and it returns true (and go to next page). So, how to change this condition so my confirmation box showed up first, then after click OK, it go to next page, and if CANCEL, do nothing?

Answer 1

*Just make slight changes in your javascript just passevent on form submit*


<input type="submit" value="Submit" name="submit" onClick="return cekdata(this,event);" />

and when your textbox is empty or null write event.preventDefault() instead of return false;

function cekdata(myform,evt)
{
var id = document.myform.clientid.value;
    var nama = document.myform.nama.value;
    var divisi = document.myform.divisi.value;
    var way = document.getElementById('twoway').value;
    var ori = document.myform.lokasi.value;
    var desti = document.myform.tujuan.value;
    var ket = document.myform.keterangan.value;
    var tpergi = document.myform.tglb.value;
    var jpergi = document.myform.jamb.value;
    var mpergi = document.myform.menitb.value;
    var pegi = tpergi+', '+jpergi+':'+mpergi;
    var tplg = document.myform.tglp.value;
    var jplg = document.myform.jamp.value;
    var mplg = document.myform.menitp.value;
    var plg = tplg+', '+jplg+':'+mplg;
if (document.myform.clientid.value == "")
{
alert("Please Fill Your ID");
myform.clientid.focus();

evt.preventDefault();
}