Forum Moderators: open
this is my first post and I did try to use the search. I have not html/ajax etc background and I am just trying to generate a simple Webpage with 3 input fields that enables me after pressing submit to modify an URL and send the data to the browser.
The url I would like to generate is:
http://10.***.**.**/emapp/EMAppServlet?device=sepFIELD_1&userid=FIELD_2&seq=FIELD_3
Field 3 could be optional with the value= Option I found.
I tried to test it with this example [webmasterworld.com] but was unlucky...
My approch is the following:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>User Logon</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="demoBox">
<h3>User Logon</h3>
<p>Please fill out the fields and click submit to remotely logon a Phone with the User Id .</p>
</div>
<p></p>
<form action="/common/formdump.asp" method="post">
<table>
<tr>
<td><strong>MacAdress:</strong></td>
<td><input name="mac" type="text" size="11" maxlength="10" autocomplete="off" /></td>
<td><strong>UserID:</strong></td>
<td><input name="userid" type="text" size="10" autocomplete="off" /></td>
</tr>
<tr valign="top">
<tr>
<td><strong>PIN Code:</strong></td>
<td><input name="pincode" type="text" size="5" autocomplete="off" value="12345" /></td>
</tr>
<td><input type="button" onClick="sendTo(this.form.whatever.value,400,500);" value="Submit">
</tr>
</table>
</form>
</body>
</html>
But I have not yet included any of the link with the example as I struggle to undersand on how to add all 3 values ...
Any takers?
THX
Steffen
[edited by: tedster at 8:10 pm (utc) on Jan. 18, 2008]
[edit reason] obscure the IP address [/edit]
<html>
<body><script type="text/javascript">function ajaxFunction()
{var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }
catch (e)
{ // Internet Explorer try
{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{ try
{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e)
{ alert("Your browser does not support AJAX!"); return false; } } } }</script><form name="myForm">
<head>
<title>User Logon</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="demoBox">
<h3>User Logon</h3>
<p>Please fill out the fields and click submit to remotely logon a Phone with the User Id .</p>
</div>
<table>
<td><strong>IP Address: <input type="text" size="16" maxlength="15" id="ip" name="username" autocomplete="off" value="*8.***.**.**" /></td>
<tr valign="top">
<td><strong>Mac Address: <input type="text" size="11" maxlength="10" id="mac" name="mac" autocomplete="off" /></td>
</tr>
<tr valign="top">
<td><strong>Username: <input type="text" id="username" name="username" autocomplete="off" /></td>
</tr>
<tr valign="top">
<td><strong>PIN: <input type="text" name="pin" id="pin" size="10" maxlength="10" value="12345" autocomplete="off" /></td>
</tr>
</table>
</form></body>
</html>
[edited by: tedster at 8:12 pm (utc) on Jan. 18, 2008]
If understand your question well, you don't need AJAX, and even not JavaScript.
If you have a simple html page, with three input fields, and you want the values from the form to be sent to a certain web address, then you only need some html stuff. To quote you original example, the following should do what you are looking for:
<html>
<head>
<title>User Logon</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="demoBox">
<h3>User Logon</h3>
<p>Please fill out the fields and click submit to remotely logon a Phone with the User Id .</p>
</div>
<p></p>
<form action="http://**.***.**.**/emapp/EMAppServlet" method="get">
<table>
<tr>
<td><strong>MacAdress:</strong></td>
<td><input name="device" type="text" size="11" maxlength="10" autocomplete="off" /></td>
<td><strong>UserID:</strong></td>
<td><input name="userid" type="text" size="10" autocomplete="off" /></td>
</tr>
<tr valign="top">
<tr>
<td><strong>PIN Code:</strong></td>
<td><input name="seq" type="text" size="5" autocomplete="off" value="12345" /></td>
</tr>
<td><input type="submit" value="Submit">
</tr>
</table>
</form>
</body>
</html>
By pressing the Submit button on this form will bring you to the http://**.***.**.**/emapp/EMAppServlet url. The fields you mentioned in your original question, will be filled by the browser (automatically), and you don't need any additional code for this task.
But please note that this is a HTML issue, if you encounter similar problems in the future, try submitting your question to a more general forum like HTML and Browsers [webmasterworld.com], where they can help you formulate your questions, and direct you to the right form.
[edited by: tedster at 8:14 pm (utc) on Jan. 18, 2008]
THANKS A LOT! ;-)
I have modified your HTML Code to open the URL into a new Window and also added a value of sep to be posted infront ot the MAC address.
I am unsure if you could do this any better....
My last struggle is that I would like the URL to open in a minimized window without any toolsbars etc.
I have aaaded the onclick command behind the input type but no luck with the screen size..
Any Hints?
<html>
<head>
<title>User Logon</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
</head>
<base target="main">
<body>
<div id="idName">
<h3>User Logon</h3>
<p>Please fill out the fields and click submit to remotely logon a Phone with the User Id .</p>
</div>
<p></p>
<form action="http://**.***.**.**/emapp/EMAppServlet?" method="get">
<table>
<tr>
<td><strong>MacAdress:</strong></td>
<td><input name="device" type="text" size="14" maxlength="13" autocomplete="off" value="sep" /></td>
<td><strong>UserID:</strong></td>
<td><input name="userid" type="text" size="10" autocomplete="off" /></td>
</tr>
<tr valign="top">
<tr>
<td><strong>PIN Code:</strong></td>
<td><input name="seq" type="text" size="5" autocomplete="off" value="12345" /></td>
</tr>
<td><input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit" >
</tr>
</table>
</form>
</body>
</html>
[edited by: tedster at 8:15 pm (utc) on Jan. 18, 2008]
of course I discovered more features and want to include them
basically I want to implement more features on this Page and each submit button should only submit the Code for the selected aread.
Also is this correct:
<form action="http://" method="get"/CGI/Screenshot>
Basically I assume this would copy the content of the field and then add /CGI/Screenshot behind the created URL ...
Also I would love the opening Window to only be as big as it needs to be without any controls or scrollbars
And last not least why dose it format the text like in the last Option ...
<html>
<head>
<title>title text</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
</head>
<!-- Banner for all pages -->
<TABLE border="0" cellPadding="0" cellSpacing="0" width="745">
<TR><TD><IMG src="http://example.com/banneryh9.gif" border="0" height="74" width="745" alt="User Logon"></TD></TR>
</TABLE><base target="main">
<body>
<div id="idName">
<h3>User Logon</h3>
<p>Please fill out the fields and click submit to remotely logon a Phone with the User Id .</p>
<p></p>
<form action="http://**.***.**.**/emapp/EMAppServlet?" method="get">
<table>
<tr>
<td><strong>MacAdress:</strong></td>
<td><input name="device" type="text" size="14" maxlength="13" autocomplete="off" value="sep" /></td>
<td><strong>UserID:</strong></td>
<td><input name="userid" type="text" size="10" autocomplete="off" /></td>
</tr>
<tr valign="top">
<tr>
<td><strong>PIN Code:</strong></td>
<td><input name="seq" type="text" size="5" autocomplete="off" value="12345" /></td>
</tr>
<td><input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit" >
</tr>
</table>
<table>
<h3>Screenshot</h3>
<p>Please enter the IP Address and click submit retrieve a Screenshot.</p>
<p></p>
<form action="http://" method="get"/CGI/Screenshot>
<td><strong>IP Address:</strong></td>
<td><input name="ipaddress" type="text" size="10" autocomplete="off" /></td>
</tr>
<td><input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit" >
</tr>
</table>
</form>
</body>
</html>
[edited by: tedster at 8:09 pm (utc) on Jan. 18, 2008]
You are in bad need of some basic html knowledge, although the things you are looking for in your late posts will need some javascript programming after all.
Opening a new window;
I don't know from where this NewWindow javascript function comes from, I do not see any reference to an external javascript function, so probably it is not going to work like this. Opening new windows in javascript is possible using the window.open() 'command', where you have to define several parameters, more or less in the same way as you've done it. See this w3schools article [w3schools.com], with the help of this page, you should be able to make this work.
If you want to open both of your forms in a (custom) new window, then you either drop the html form approach, or you can go on as in this recent thread [webmasterworld.com].
But let's see your mistakes first :-)
The two forms are not working as you expect them to be, because the fist one isn't closed:
<form action="http://**.***.**.**/emapp/EMAppServlet?" method="get">
<!-- ... -->
<input name="device" type="text" size="14" maxlength="13" autocomplete="off" value="sep" />
<!-- ... -->
<input name="userid" type="text" size="10" autocomplete="off" />
<!-- ... -->
<input name="seq" type="text" size="5" autocomplete="off" value="12345" />
<!-- ... -->
<input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit">
<!-- ... -->
</form>
<form action="http://" method="get"/CGI/Screenshot>
<!-- ... -->
<input name="ipaddress" type="text" size="10" autocomplete="off" />
<!-- ... -->
<input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit" >
<!-- ... -->
</form>
Wrong behavior of the second form;
The
<form action="http://" method="get"/CGI/Screenshot>is not valid. HTML elements have the following syntax *always*:
<form action="" method="get" onsubmit="this.action='http://'+ this.ipaddress.value +'/CGI/Screenshot'; return true;">
<!-- ... -->
<input name="ipaddress" type="text" size="10" autocomplete="off" />
<!-- ... -->
<input type="submit" onclick="NewWindow(this.href,'main','200','200','no','center');" value="Submit" >
<!-- ... -->
</form>
This will change the form's action attribute (action is page, where the form will be submitted) upon submitting the form (when you press the submit button), to the ip address of the device.
NewWindow vs window.open;
As I mentioned above, I do not see any reference to an external javascript file, so the NewWindow wil not going to work like this. Either find the file or source which defined this function and place it into your code, or check out the w3schools page I mentioned above on how to use window.open.
Opening your forms in a new (custom) window;
The <form> tags should get a new attribute called "target", and set it to "main" (to stick to your NewWindow example). So add 'target="main"' to both of your forms (pay respect to what I wrote about the syntax of the HTML tags!). If you managed to fix the opening of windows, and you give it the name "main", then you already have what you re looking for, the forms will be submitted to the new customized window.
[edited by: tedster at 8:17 pm (utc) on Jan. 18, 2008]
