By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,903 Members | 2,097 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,903 IT Pros & Developers. It's quick & easy.

Get input value of a form

P: 1
I'm trying to make a website with a form where users put in information and then the information is written to a <div> like a bussinesscard.

I've done it in JavaScript and now I'm trying to make it work in PHP but I'm stuck, so I need all help I can get! I think I made the variables declaration right, but how do I make the "style.fontFamily, style.backgroundColor" etc. and the innerHTML to work?

This is my code:

Expand|Select|Wrap|Line Numbers
  1.  <?php print('<?xml version="1.0" encoding="UTF-8"?>') ?>
  2.  
  3.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  4.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5.  
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  8.     <head>
  9.  
  10.        <title>Visitkort</title>
  11.  
  12.     <style type="text/css">
  13.  
  14.      #form1 fieldset 
  15.     { 
  16.      width: 400px; 
  17.      padding: 20px 0px 20px 50px; 
  18.      border: 1px solid #99cc00; 
  19.      background-color: #e2ff8c;
  20.     }
  21.  
  22.      #form1 legend 
  23.     { 
  24.      background-color: #e2ff8c; 
  25.      padding: 2px 2px 2px 3px; 
  26.      margin-left: -30px; 
  27.      letter-spacing: 3px; 
  28.      border: 1px solid #99cc00; 
  29.     }
  30.  
  31.      #showMsg 
  32.     {
  33.      width: 400px; 
  34.      height: 200px; 
  35.      padding: 5px; 
  36.      margin-top: 10px; 
  37.      margin-bottom:10px;
  38.     }
  39.  
  40.      #footer
  41.     { border-top-style: solid; font-size:0.9em; 
  42.      clear:both; 
  43.      width:980px; 
  44.      line-height:1.4em; 
  45.      font-weight:400; 
  46.      margin-bottom:10px; 
  47.      padding-top:5px; 
  48.      border-top: 1px gray; 
  49.      text-align:right;
  50.     }
  51.  
  52.      .valid { float: left;} 
  53.  
  54.      label
  55.     {
  56.      width: 4em;
  57.      float: left;
  58.      text-align: right;
  59.      display: block;
  60.      margin-right: 2.5em; 
  61.     }     
  62.     </style>
  63.  
  64.      <?php
  65.  
  66.  
  67.  
  68.         $userCompany = $_POST['userCompany'];
  69.         $userLname = $_POST['userLname'];
  70.         $userSname = $_POST['userSname'];
  71.         $userTitle = $_POST['userTitle'];
  72.         $userPhone = $_POST['userPhone'];
  73.         $userMail = $_POST['userMail'];
  74.         $font = $_POST['font'];
  75.         $_POST['showMsg'];.style.fontFamily = font.value;
  76.         $bgcolor =  $_POST['bgcolor'];
  77.         $_POST['showMsg'];.style.backgroundColor = bgcolor.value;  
  78.         $fontcolor =  $_POST['fontcolor'];
  79.         $_POST['showMsg'];.style.color = fontcolor.value;
  80.  
  81.         $showMessageDiv =  $_POST['showMsg'];
  82.  
  83.  
  84.          $showMessageDiv.innerHTML = "<h1>" + userCompany + "</h1>" + "<br />" + userSname + 
  85.          " " + userLname + "<br />" + userTitle + "<p>Tfn " + userPhone + "<br />E-post: " + userMail + "</p>"}
  86.   ?>
  87.  
  88.    </head>
  89.  
  90.    <body>
  91.     <div id="form1">
  92.     <form id="inputform" action="resultat.php" method="post"> 
  93.     <fieldset>
  94.       <legend>Beställ ditt visitkort här</legend>      
  95.       <label for="userCompany">Företag</label>
  96.       <input type="text" id="userCompany" /> <br/>
  97.       <label for="userLname">Efternamn</label>
  98.       <input type="text" id="userLname" /> <br/>
  99.       <label for="userSname">Förnamn</label>
  100.       <input type="text" id="userSname" /> <br/>
  101.       <label for="userTitle">Titel</label>
  102.       <input type="text" id="userTitle" /> <br/>
  103.       <label for="userPhone">Telefon</label>
  104.       <input type="text" id="userPhone" /> <br/>
  105.       <label for="userMail">E-post</label>
  106.       <input type="text" id="userMail" /> <br/>
  107.  
  108.       <label for="bgcolor">Bakgrundsfärg</label>
  109.      <select name="bgcolor" id="bgcolor">
  110.       <option value="#00CCFF">Ljusblå</option>
  111.       <option value="#CCFF99">Ljusgul</option>
  112.       <option value="#FFFFFF">Vit</option>
  113.       <option value="#00FFFF">Turkos</option>
  114.      </select> <br />  
  115.       <label for="fontcolor">Textfärg</label>
  116.      <select name="fontcolor" id="fontcolor">
  117.       <option value="#000000">Svart</option>
  118.       <option value="#0000FF">Blå</option>
  119.       <option value="#FF0000">Röd</option>
  120.       <option value="#003300">Mörkgrön</option>
  121.      </select> <br />  
  122.       <label for="font">Typsnitt</label>
  123.       <select name="font" id="font">
  124.       <option value="verdana">Verdana</option>
  125.       <option value="arial">Arial</option>
  126.       <option value="tahoma">Tahoma</option>
  127.       <option value="impact">Impact</option>
  128.      </select> <br />
  129.       <input type="button" name="send" id="send" value="Skicka" onclick="showMsg()" />
  130.       <input type="button" value="Återställ" onclick="reset()" />
  131.      </fieldset>
  132.  
  133.   </form>
  134.   </div>
  135.  
  136.    <div id="showMsg"></div>
  137.  
  138.    <div id="footer">
  139.     </div>
  140.     <div class="valid">
  141.     <a href="http://validator.w3.org/check?uri=referer"><img
  142.         src="http://www.w3.org/Icons/valid-xhtml10"
  143.         alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  144.  
  145.  
  146.     <a href="http://jigsaw.w3.org/css-validator/check/referer">
  147.         <img style="border:0;width:88px;height:31px"
  148.             src="http://jigsaw.w3.org/css-validator/images/vcss"
  149.             alt="Valid CSS!" />
  150.     </a>
  151.  
  152.   </div>
  153.   </body>
  154.  </html>
  155.  
Oct 15 '11 #1
Share this Question
Share on Google+
1 Reply


100+
P: 1,059
I think you better start with simple application like calculator.

May insert two box and a submit button, and then do the add and show it as output. It will give a better start.

and dont expect javascript and php to do the same job, cause there working area is different, one get executed on client side and other on server side
Oct 15 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.