cara manampilkan form tapi setelah pilih radio button

budi nuryadin · Jun 15, 2011
bagaimana contoh script manampilkan form tapi setelah kita pilih radio button..
pilih radio button dulu baru keluar form...
jika tidak dipilih tidak tampil formnya...mohon bantuannya.
Silahkan login untuk menjawab!
2
Ellyx Christian · Jun 15, 2011 · 2 Suka · 0 Tidak Suka
Agar lebih mudah gunakan jquery. Pertama element form yang mau ditampilkan saat radio button diklik ditaruh dalam sebuah div yang di-hide dengan menambahkan attribute style="display:none". Seperti ini:
<html>
	<head></head>
	<body>
		<form>
		Radio: <input type="radio" name="rad" id="rad1" value="1" class="rad"/> Form1 <input type="radio" name="rad" id="rad2" value="2" class="rad"/> Form2
			<!-- form yang mau ditampilkan-->
			<div id="form1" style="display:none">
				Input1: <input name="input" type="text"/>
			</div>
			<div id="form2" style="display:none">
				Input2: <input name="input" type="text"/>
			</div>
		</form>
		<!-- tambahkan jquery-->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(":radio.rad").click(function(){
					$("#form1, #form2").hide()
					if($(this).val() == "1"){
						$("#form1").show();
					}else{
						$("#form2").show();
					}
				});
			});
		</script>
	</body>
</html>
0
Ressa Cahyani · Jun 26, 2011 · 0 Suka · 0 Tidak Suka
iya, thanks alot mas ellyx..
0
Ellyx Christian · Jun 27, 2011 · 0 Suka · 0 Tidak Suka
@Ressa Cahyani: terima kasih kembali
0
tryco · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
makasih banyak mas ellyx tutorialnya..sangat membantu...tapi ada yang saya tanyakan mas, saya praktekan cara mas ellyx,tapi dalm form1 & 2 saya tambahin textboxnya dengan date. saya pakai datepicker jquery dengan image calendar..pertanyaan: ketika saya klik form1 muncul datepickernya beserta imagenya,tapi ketika saya klik form2 kok ga keluar ya mas...apakah jquerynya harus ada yang dirubah...makasih banyak sebelumnya...
0
Ellyx Christian · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
@tryco: saya rasa tidak perlu, kecuali ada salah dijquery yang kamu buat. Bisa lihat koding kamu?
0
tryco · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
<html>
<head>
<title>Input Proof On Delivery</title>
<link type="text/css" href="style.css" rel="stylesheet">
<link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet">
<link type="text/css" href="css/jquery.ui.datepicker.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#prdate").datepicker({
buttonImage:'css/images/calendar.gif',
buttonImageOnly:true,
showOn:'button'
});
});
</script>
</head>

<div id="body">
<form action="<? $_SERVER;?>" method="post" name="pencarian" id="pencarian">
<div align="center">No Connote :
<label>
<input name="conote" type="text" id="conote" maxlength="8" />
</label>
<label>
<input type="submit" name="submit" id="submit" value="submit" />
</label>
<p>Masukan Sesuai dengan Nomer Connote Anda</p>
</div>
<label></label>
<label></label>
</form>

<p>
<?php
include "koneksi_php.php";
$cn=$_POST;
$query = "";
$hasil = mysql_query ($query);
?>
<div id="description">
<table align="center" border="0">
<?php
while($row=mysql_fetch_array($hasil)){
?>
<tr>
<td colspan="7" align="center"><h1>Description</h1></td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td></td>
<td>&nbsp;</td>
<td bgcolor="#999999"><font color="#003300" face="Courier New, Courier, monospace"><?php echo date('d/m/Y');?></font></td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="89">No Connote</td>
<td width="6">:</td>
<td width="394"><font color="#FF0000" size="+1" face="Courier New, Courier, monospace"><?php echo $row;?></font></td>
<td width="86">Origin</td>
<td width="6">:</td>
<td width="144"><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="89">Customer</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
<td>Destination</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="89">Consigne</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="8"></td>
<td width="89"></td>
<td></td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
<td>Date Entry</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
</tr>
<tr>
<td width="8"></td>
<td width="89"></td>
<td></td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
<td>Service</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
<td>No. Manifest</td>
<td>:</td>
<td><font color="#000066" face="Courier New, Courier, monospace" size="+1"><?php echo $row;?></font></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2" align="center">
<form action="do_pilih.php" name="status">
Status
:
<input type="radio" name="pod" id="status1" value="C" class="pod"/>
Rejected
<input type="radio" name="pod" id="status2" value="Y" class="pod"/>
Success


<!-- form yang mau ditampilkan-->
<div id="form1" style="display:none">
<table>
<tr>
<td>Name</td><td>:</td><td><input name="prby" type="text"/></td></tr>
<tr><td>Date</td><td>:</td><td><input type="text" id="prdate" name="prdate"></td></tr>
<tr><td>Reason</td><td>:</td><td><select name=colpod><option value=0 selected>-- Alasan Rejected --</option>
<?php
$sql=mysql_query("select * from failed");
while ($data=mysql_fetch_array($sql)){
echo "<option value=$data[kode]>$data[kode]-$data[nama]</option>";
}
?>
</select></td></tr><tr><td></td><td></td><td><input type="submit" name="button" id="button" value="Save"></td></tr></table>
</div>
<div id="form2" style="display:none">
<table>
<tr><td>Nama</td><td>:</td><td><input name="prby" type="text"/></td></tr>
<tr><td>Jabatan</td><td>:</td><td><select name=colpod>
<option value=0 selected>--Status--</option>
<?php
/*include 'koneksi_php.php';*/
$sql=mysql_query("select * from relati");
while ($data=mysql_fetch_array($sql)){
echo "<option value=$data[kode]>$data[kode]-$data[nama]</option>";
}
?>
</select></td></tr>
<tr><td>Date</td><td> :</td><td><input type="text" id="prdate" name="prdate"></td></tr>
<tr><td>Time</td><td> :</td><td><input type="text" size="5"></td></tr>

<tr><td></td><td></td><td><input type="submit" name="button" id="button" value="Save"></td></tr>
</table>
</div>
</form>

<!-- tambahkan jquery-->

<script type="text/javascript">
$(function(){
$(":radio.pod").click(function(){
$("#form1, #form2").hide()
if($(this).val() == "C"){
$("#form1").show();
}else{
$("#form2").show();
}
});
});
</script> </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<?php
}
?>
</table>
</div>

</p></div>
</html>

jadi saat saya click form1(rejected) muncul mas datepicker datenya, tapi setelah saya click form 2 di datenya tidak muncul,saya hanya masalah di situ mas..maff mas masih newbie..
0
Ellyx Christian · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
saya coba dan berhasil, coba hilangkan bagian style="display:none" pada form1 dan form2. Mungkin ada masalah dengan pembentukan form2. Dan install firebug untuk debug javascript.

note: pada saat menyisipkan koding gunakan cara yang dijelaskan di http://www.myphptutorials.com/syntax.html
0
tryco · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
sudah saya hilangkan style="display:none" nya mas, kok malah tampil dua2nya ya..dan tetep mas calender datepickernya yang form 2 ga muncul...jadi logikanya ketika klik radio button rejected keluar form1,ketika klik success muncul form2..munculnya form tergantung yang di klik radio buttonnya..sory mas banyak nanya..
0
Ellyx Christian · Jun 30, 2011 · 0 Suka · 0 Tidak Suka
kamu install dulu firebug trus debug javascriptmu, biar tahu dimana salahnya.
0
Ellyx Christian · Dec 25, 2022 · 0 Suka · 0 Tidak Suka

bisa lihat lagi tutorialnya di https://youtu.be/Cz0-1q8FvJ0