Some Form components that we often use are usually intended for data validation, whether the data we have entered is correct. We can display the value/content of the component with the javascript function. Here is the source program:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript"> function tampil(){
tampil_1=form1.textfield.value; // simpan nilai dari objek form textfield sebagai tampil_1 tampil_2=form1.textarea.value; // simpan nilai dari objek form textarea sebagai tampil_2 tampil_3=form1.select.value; // simpan nilai dari objek form select sebagai tampil_3 tampil_all = 'komponen 1 berisi : '+tampil_1+' | '+'komponen 2 berisi :'+tampil_2+' | '+'komponen 3 berisi :'+tampil_3;
alert(tampil_all);
}
</script>
</head>
<body>
<form name="form1" method="post" action=" ">
Komponen 1 : <input type="text" name="textfield"><br><br>
Komponen 2 : <textarea name="textarea"></textarea><br><br>
Komponen 3 : <select name="select">
<option value="linux">linux</option>
<option value="window">window</option>
</select><br><br>
<input type="button" name="Submit" value="Tekan" OnClick="tampil()">
</form>
</body>
</html>When we press the "Press" button, the OnClick="tampil()" properties on the form button object will call the javascript function, namely the muncul() function. Note in the source program above, all form objects are stored in the muncul_1 to muncul_3 variables. All of these variables are combined into 1 variable, namely the muncul_all variable and to display the results of the input of several form objects in the browser, the alert() function is used.
Note: works well on IE & Mozilla browsers
Filling Form Fields Based on Pressed Buttons
I have a project, in this case I want when a button in the table is pressed, it can automatically fill in the form itself based on the table value, let's say each record has its own unique ID, so to do editing, how do I do it so that users don't need to manually input the ID to do editing, just press the button and the ID field is filled in automatically.
This is roughly the scheme, this is the button
<a href="" id="1" class="btn">info</a>Fields on the form that need to be filled in
<form>
<input type="text" id="product_name">
<input type="text" id="number">
</form>I want the product_name field to be filled automatically based on the button pressed, please help, I have tried using this
<a href="" id="1" onClick="reply_click(this.id)">info</a>and this script
function reply_click(clicked_id)
{
//alert(clicked_id);
if(clicked_id == "1")
{
document.getElementById(product_name).value='Soap';
}
else
{
alert("button not pressed");
}
}Is there something wrong with my logic?
Completion
As Suman stated, you have to pass 'product_name' as a string to getElementById(). Here is an example project that comes close http://jsfiddle.net/CTnFt/
But since you probably have a lot of tags in the project, a simpler solution might be to put the value in a data-attribute on the tag and read it in a javascript function, here's a closer working example http://jsfiddle.net/Rc9MG/
<a href="#" id="1" class="btn" onclick="reply_click(this)" data-product-name="Soap">info</a>
<form>
<input type="text" id="product_name" />
</form>
<script type="text/javascript">
function reply_click(element)
{
document.getElementById('product_name').value = element.getAttribute('data-product-name');
}
</script>Good luck and have fun!