Javascript alert box and confirmation after - php

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();
}

Answer 2

Try this:
Remove your last else part and paste below lines at the end of your javascript function.
Remove below lines :
var a = window.confirm("CONFIRMATION :\nID : " +id+"\nName : "+nama+"\nDivision : "+divisi+"\nOne Way : "+way+"\nOrigin : "+ori+"\nDestination : "+desti+"\nNotes : "+ket+"\nDeparture : "+pegi+"\nArrived :"+plg);
instead use this,
var a = window.confirm("Are you sure?");
if (a==true)
{
return true;
}
else
{
return false;
}

Answer 3

I would better suggest you to place that cekdata(this) in your submit tag rather than form tag. Like
<input type="submit" value="Submit" name="submit" onClick="return cekdata();" />
And also when you have done this
var id = document.myform.clientid.value;
Then why you are using again the same
if (document.myform.clientid.value == "")
Better use
var id = document.myform.clientid;
if (id.value == "")
{
alert("Please Fill Your ID");
id.focus();
return false;
}

Answer 4

Changing code like this:
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 (id == "")
{
alert("Please Fill Your ID");
myform.clientid.focus();
return false;
}
else
if (nama == "")
{
alert("Please Fill Passenger Name");
myform.nama.focus();
return false;
}
else
if (ori == "")
{
alert("Please Fill Origin Location");
myform.lokasi.focus();
return false;
}
else
if (desti == "")
{
alert("Please Fill Your Destination");
myform.tujuan.focus();
return false;
}
else
if (tpergi == "")
{
alert("Please Fill Departure Date");
myform.tglb.focus();
return false;
}
else
if(document.getElementById('twoway').checked)
{
if (tplg == "")
{
alert("Please Fill Return Date");
myform.tglp.focus();
return false;
}
else
if (tpergi > tplg)
{
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;
}
}
}
then it works...

Answer 5

I would recommend using Jquery insead of Javascript.
Here is the short & sweet code I have made just for you, feel free to use it!
JQUERY CODE
$(document).ready(function() {
$('#submit').click(function(){
var id = $('#id').val();
var dataString = 'id='+ id;
if(id==''){
alert("Please Fill Your ID");
$('#id').focus();
return false;
}
else if(confirm("Are you sure? Your id = "+id))
{
$.ajax({
type: "POST",
url: "ajxRegistration.php",
data: dataString,
cache: false,
success: function(e)
{
e.stopImmediatePropagation();
}
});
return false;
}
});
})

Answer 6

Try this -
if(confirm('Are you sure?'))
return true;
else
return false;