Onlick event error

[nitation]

Good day,

 

I am trying to achieve something of this nature. When a user click a link, an input box should appear below the link without the page loading. See example below

 

click here->

 

an input should appear below

 

<form name="formA" action="" method="post">
<input name="test_box" type="text" size="10">
<input name="sub" type="submit" value="submit">
</form>

[obsidian]

What is the error?

[Ken2k7]

<form name="formA" action="" method="post">
<a href='javascript:void(0);' onclick='this.parentNode.test_box.style.display="block"; this.parentNode.sub.style.display="block";'>Click here</a><br />
<input name="test_box" type="text" size="10" style='display:none;'> <br />
<input name="sub" type="submit" value="submit" style='display:none;'>
</form>

[nitation]

I tried the code you provided, but its not displaying the form.

[Ken2k7]

I tried the code you provided, but its not displaying the form.

I don't understand what you mean. What do you mean it's not displaying the form? That's all the code you gave me to work with.

[nitation]

@KEN

 

I want you to help me out with a code to display a form when a link is clicked without the page reloading. This i believe can be achieved using AJAX.

[Ken2k7]

@KEN

 

I want you to help me out with a code to display a form when a link is clicked without the page reloading. This i believe can be achieved using AJAX.

But doesn't my code already does that? It doesn't need AJAX. And the form is never hidden so it's always displayed. I just hid those input boxes and make them show when you click the link.

[nitation]

@ken

 

You may try the code you provided and see if its displays anything. Its not working from my side. I tried it on IE and Mozilla Firefox 3

 

I have Firebug installed on my system. It is taking this piece of code as an error. Kindly help out.

 

this.parentNode.test_box.style.display = "block";

[Ken2k7]

I tested it on Tryit Editor and it works.

 

But here's an alternative:

<form name="formA" action="" method="post">
<a href='javascript:void(0);' onclick='dispForm()'>Click here</a><br />
<input name="test_box" type="text" size="10" style='display:none;'> <br />
<input name="sub" type="submit" value="submit" style='display:none;'>
</form>

<script>
function dispForm () {
     var tehForm = document.forms.formA;
     tehForm.test_box.style.display = "block";
     tehForm.sub.style.display = "block";
}
</script>

[nitation]

@Ken

 

It is not displaying still. This is where the error is pointing.

 

tehForm.test_box.style.display = "block";

 

Please look into it. I tried it on IE, Firefox, Opera. None of them is displaying the form after i click the link.

 

Thank you

[wildteen88]

 

<a href='javascript:void(0);' onclick='dispForm()'>Click here</a><br />
<form id="formA" action="" method="post" style="display:none">
<input name="test_box" id="test_box" type="text" size="10"> <br />
<input name="sub" type="submit" value="submit">
</form>

<script>
function dispForm () {
     var tehForm = document.getElementById('formA');
     tehForm.style.display = "block";
}
</script>

 

 

[nitation]

@wildteen

 

Your code displays the form without clicking the link (Click Here).

 

Thanks

[wildteen88]

Strange, doesn't for me. I changed your HTML and JavaScript.

[nitation]

The piece of code is not working

[wildteen88]

What browser are you using? Tested with FF, IE7 and Safari

[nitation]

i tested it with IE7, FF, Opera and Google chrome. I am trying to achieve this;

 

When a user click on this link(Click here). It should open a form below the link without the page reloading.

 

Thank you

[nitation]

@wildteen

 

I think i have figured out why it is not displaying.

 

I have that code included in another form

 

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">

 

When i removed this form tag, the form is displaying. Why am i getting such error?

[nitation]

@wildteen

 

I figured that out. Thanks for all your support. But, i have one more thing. How do i insert the value of this form to mysql table without the page reloading.

 

<a href='javascript:void(0);' onclick='dispForm()'>Click here</a><br />
<form id="formA" action="" method="post" style="display:none">
<input name="test_box" id="test_box" type="text" size="10"> <br />
<input name="sub" type="submit" value="submit">
</form>

<script>
function dispForm () {
     var tehForm = document.getElementById('formA');
     tehForm.style.display = "block";
}
</script>

[Ken2k7]

@wildteen

 

I figured that out. Thanks for all your support. But, i have one more thing. How do i insert the value of this form to mysql table without the page reloading.

 

<a href='javascript:void(0);' onclick='dispForm()'>Click here</a><br />
<form id="formA" action="" method="post" style="display:none">
<input name="test_box" id="test_box" type="text" size="10"> <br />
<input name="sub" type="submit" value="submit">
</form>

<script>
function dispForm () {
    var tehForm = document.getElementById('formA');
    tehForm.style.display = "block";
}
</script>

That would require AJAX. Though I really don't suggest it because it's highly insecure. Well it depends how you code it, but it's still vulnerable.

[nitation]

@ Ken

 

So what do i do to achieve this. I want to submit the form without the page reloading. Can you show me a sample of what to do???

 

Tnak you in advance

[Ken2k7]

Fine, here's an example:

 

<div id='ajax_example'>Loading...</div>

<script>
var AJAX;
try { window.AJAX = new XMLHttpRequest(); } 

catch (e) {

try { window.AJAX = new XDomainRequest(); }

catch (e) {

	try { window.AJAX = new ActiveXObject("Microsoft.XMLHTTP"); } 

	catch (e) {

		try { window.AJAX = new ActiveXObject("Msxml2.XMLHTTP");	}

		catch (e) { window.AJAX = null; }

	}

}

}

if (window.AJAX !== null) {
window.AJAX.open("GET", "www.example.net/example.php?id=53886&name=Ken2k7", true);
window.AJAX.onreadystatechange = function () {
	if (window.AJAX.readyState == 4) {
		window.document.getElementById("ajax_example").innerHTML = AJAX.responseText;
	}
}
window.AJAX.send(null);
}
</script>

[nitation]

@Ken

 

Should i include your last code before or after my HTML form. Also, what should i add in my form action tag?

 

example:

<form name=formA action="" method="post">

 

Thanks in advance

[Ken2k7]

Well it was an example so if you include it, it probably won't do anything. And it's AJAX so you put nothing in the action attribute. In fact, you don't require a form tag at all.

[nitation]

@ Ken

 

Give me a guide according to the code you provided me. Where do i include my php insert query? How am i gonna pass the query when the submit button is clicked. Kindly Help

 

This is my HTML form

 

<form name="formA" action="" method="post">
<a href='javascript:void(0);' onclick='dispForm()'>Click here</a><br />
<input name="test_box" type="text" size="10" style='display:none;'> <br />
<input name="sub" type="submit" value="submit" style='display:none;'>
</form>

<script>
function dispForm () {
     var tehForm = document.forms.formA;
     tehForm.test_box.style.display = "block";
     tehForm.sub.style.display = "block";
}
</script>