I have a javascript that gets the content of another web page that is on my server. but it only works with the function onchange so only when i pick an option int he dropdown my javascript works.
But I wish to make it work with the submit button.
That when the submit button is clicked that then the same action is done that the dropdown is doing now. and I cant get this done.
Any advice?
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
alert("testing");
}
}
xmlhttp.open("GET","querie.php");
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<form id="game" action="" onsubmit="return showUser(this.value)" method="post">
<input type=submit value=Send />
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
<form id="game" action="" onsubmit="return showUser(**this.value**)" method="post">
You have two separate forms. The list is in the first form and your button is in the second. In your second form, this.value has no value in the opening FORM tag because the FORM tag is not an input.
Try this:
<form id="game" action="" onsubmit="return showUser(document.name_of_form1.users.options[document.name_of_form1.users.selectedIndex].value)" method="post">
this.value is context dependent. It works in an attribute of the <select> element but has a different meaning in the <form> element of an entirely different form. How about, instead of 2 forms, just have 1. Something like this should work. Also,
<form method="post"
onsubmit="var users=document.getElementById('users'); showUser(users[users.selectedIndex].value); return true;">
<select id="users" name="users" onchange="showUser(this.value);">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
<input type="submit" value="Send" />
</form>
Your comment suggest that you actually don't need the dropdown at all. This was not clear from the question. In any case, this greatly simplifies both the HTML and the javascript. Try something like the code below. Note: the onsubmit handler returns false to prevent the form submit from actually loading a new page.
<html>
<head>
<script type="text/javascript">
function showUser() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', 'querie.php');
xmlhttp.send();
}
</script>
</head>
<body>
<form onsubmit="showUser(); return false;" method="post">
<input type="submit" value="Send" />
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Remove the form tag wrapped around your submit button. On the first/original form tag, add `onsubmit="showUser(names.value)"