javascript help...input page display to info page - Overclock.net

chobes · 04-04-07

how would i make an info page with a bunch of text input boxes and once submitted show the values on a different page as like a confirmation type of thing..

im doing a project at school where i have to make a business card generator and on the first page the user inputs info into text boxes then submit, after it displays a template of it using the info on the previous "text box" page

thanks so much guys\girls!

+rep for help!!

chobes · 04-04-07

C-bro · 04-05-07

The simple answer? Download Netbeans. I took the time a while back to learn alot of the Swing API for text boxes and buttons and all that jazz. However, Netbeans incorporates a WYSWYG editor where you just drag and drop all the buttons/controls onto a panel or container and it generates the code automatically. You can then specify your own action events (for generating a popup with the data for example). I'm pretty sure you can do the same with Javascript projects as well.

stupid · 04-05-07

Quote:

Originally Posted by C-bro

The simple answer? Download Netbeans. I took the time a while back to learn alot of the Swing API for text boxes and buttons and all that jazz. However, Netbeans incorporates a WYSWYG editor where you just drag and drop all the buttons/controls onto a panel or container and it generates the code automatically. You can then specify your own action events (for generating a popup with the data for example). I'm pretty sure you can do the same with Javascript projects as well.

I am not sure if that will hold true at all, there is basically no relation between Java and JavaScript other than the name:
http://www.htmlgoodies.com/beyond/ja...le.php/3470971

Can you do it with a server side language like php or ASP? It would be a lot easier.

If not, I just have to shake the rust out and think through some Javascript.

stupid · 04-05-07

Here's a ghetto barebone example with as little JS as possible. There is no validation/error checking or anything, but this should give you the basic idea:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>JS test</title>
  <style type="text/css">
    div.border {border:solid 1px black;padding:5px;margin:5px;}
    a{text-decoration:none;font-weight:bold;}
  </style>
  <script language="javascript" type="text/javascript">
    function run(){
      document.getElementById("output").innerHTML = document.getElementById("company").value + "<br /><br />";
      document.getElementById("output").innerHTML += "<div style=margin-left:100px;>" + document.getElementById("name").value + "</div>";
      document.getElementById("output").innerHTML += "<div style=margin-left:100px;>" + document.getElementById("name").value + "@" + document.getElementById("company").value + ".com</div>";
    }
  </script>
</head>
<body>
<form id="form1">
  <div style="width:300px;" class="border">
    INPUT:
      <div class="border">
        Name:
        <input id="name" type="text" />
        <br />
        Company:
        <input id="company" type="text" />
        <br />
        <a href="#" onclick="run()">SUBMIT</a>
      </div>
    OUTPUT:
    <div id="output" class="border"></div>
  </div>
</form>
</body>
</html>

Basically make sure you id (not 'name' anymore) all of the elements in your html you want to work with and then you can use the document.getElementByName() tag. Once you can pull the values, just stick them into the .innerHTML of whatever you want to fill. But remember, if you set the innerHTML equla to something, it will COMPLETELY replace everything you have in there already, += will append it to the end of where the innerHTML left off.

Basically all of the work goes into formatting in the JS.

Let me know if that explains it well enough.

chobes · 04-09-07

thanks guys... too bad my assignment was already due!! i had a url example with question marks in the url to pass variables but it never worked if i viewed the site locally.. luckilly my teacher knew it would work on a server so i passed =) but thanks for the input guys!!

		Overclock.net - Overclocking.net > Software, Programming and Coding > Coding and Programming
javascript help...input page display to info page

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)