[SOLVED] display orderform values in a div

Mortekai · July 17, 2009

I am trying to figure out a way to display the choices made in a form below in a div.

Basicly I want a form with checkboxes, dropdowns and radiobuttons and when pressing the submit button it should display the choices below in a div...

So, can I do this using getElementById to set variables or do i use the Elements array somehow?

rhodesa · July 17, 2009

Either way should work. You can either call them all individually with getElementById() or write something generic that loops over all the form elements. If you are looping though, just remember that you will need several cases, as text boxes, checkboxes, and radio buttons are all handled differently

Mortekai · July 17, 2009

I am trying getElementByID(), but it's not really working...

rhodesa · July 17, 2009

Can you post some code?

Mortekai · July 17, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<script language="javascript" type="text/javascript">



function submitForm(){
	var dryck="";
	var namn = document.getElementById("form1").value;

	///////////////////

	if (document.getElementById("form1").elements[2].checked)
	dryck="glögg";

	else if (document.getElementById("form1").elements[3].checked)
	dryck="glögg";

	document.writeln(dryck + namn);

	}


</script>
<body>
<form id="form1" name="form1" method="post" action="">
  <table border="2" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC">
    <tr>
      <td align="right">Namn</td>
      <td align="left"><label>
          <input name="name" type="text" id="name" size="45" />
        </label></td>
    </tr>
    <tr>
      <td align="right">Dryck</td>
      <td align="left"><label>
          <input type="radio" name="radio" id="radio1" value="radio" />
          Glögg<br />
          <input type="radio" name="radio" id="radio2" value="radio" />
          Julmust<br />
          <input type="radio" name="radio" id="radio3" value="radio" />
          Sprit</label></td>
    </tr>
    <tr>
      <td align="right">Dresskod</td>
      <td align="left"><label>
          <select name="select" id="select">
            <option>select:</option>
            <option>Julmössa</option>
            <option>Bikini</option>
            <option>Finkostym</option>
          </select>
        </label></td>
    </tr>
    <tr>
      <td align="right">Önskemål</td>
      <td align="left"><label>
          <input type="checkbox" name="checkbox" id="checkbox1" />
          Kräkas<br />
          <input type="checkbox" name="checkbox" id="checkbox2" />
          Somna<br />
          <input type="checkbox" name="checkbox" id="checkbox3" />
          Dö<br />
        </label></td>
    </tr>
    <tr>
      <td align="right"> </td>
      <td align="right"><label>
          <input type="submit" name="button" id="button" value="Skicka" onClick="submitForm" />
        </label></td>
    </tr>
  </table>
</form>
</body>
</html>

I think I am way off with this one

Mortekai · July 17, 2009

Ok...I have this now:

<script language="javascript" type="text/javascript">



function submitForm(){
	var namn = document.getElementById("name").value;

	///////////////////

	var cbs = document.forms[0].elements["radio"];
	for(var i=0; i<cbs.length; i++){
		cbs[i].checked = true;
		}

	document.writeln(namn + cbs);

	}


</script>

The output gives the name and [object NodeList] , so how can I output the value of the boxes instead?

Mortekai · July 17, 2009

I am not sure what I am trying to do with the accursed checkboxes and radiobuttons really... Do I fetch the whole group and then loop through to find the checked one and then pick out the value...or how do I do this?

Picking out the value of one ID is not so difficult, but the concept of filtering through groups of inputs is still not clear to me...

rhodesa · July 17, 2009

I envision something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
      function submitForm(){
        var form = document.getElementById('form1');
        var output = "";
        for(var i = 0;i < form.length;i++){
          var ele = form[i];
          if(ele.tagName == 'SELECT'){
            output += "Select '"+ele.name+"': "+ele[ele.selectedIndex].value+"<br />";
          }else if(ele.type == 'radio'){
            if(ele.checked){
              output += "Radio Button '"+ele.name+"': "+ele.value+"<br />";
            }
          }else if(ele.type == 'checkbox'){
            if(ele.checked){
              output += "Checkbox '"+ele.name+"': "+ele.value+"<br />";
            }
          }else{
            output += "Other '"+ele.name+"': "+ele.value+"<br />";
          }
        }
        document.getElementById('output').innerHTML = output;
        return false;
      }
    </script>
  </head>
  <body>
    <form id="form1" name="form1" method="post" action="" onsubmit="return submitForm();">
      <table border="2" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC">
        <tr>
          <td align="right">Namn</td>
          <td align="left">
            <input name="name" type="text" id="name" size="45" />
          </td>
        </tr>
        <tr>
          <td align="right">Dryck</td>
          <td align="left">
            <input type="radio" name="radio" id="radio1" value="Glögg" /> Glögg<br />
            <input type="radio" name="radio" id="radio2" value="Julmust" /> Julmust<br />
            <input type="radio" name="radio" id="radio3" value="Sprit" /> Sprit
          </td>
        </tr>
        <tr>
          <td align="right">Dresskod</td>
          <td align="left">
            <select name="select" id="select">
              <option>select:</option>
              <option>Julmössa</option>
              <option>Bikini</option>
              <option>Finkostym</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">Önskemål</td>
          <td align="left">
            <input type="checkbox" name="checkbox[]" id="checkbox1" value="Kräkas" /> Kräkas<br />
            <input type="checkbox" name="checkbox[]" id="checkbox2" value="Somna" /> Somna<br />
            <input type="checkbox" name="checkbox[]" id="checkbox3" value="Dö" /> Dö<br />
          </td>
        </tr>
        <tr>
          <td align="right"> </td>
          <td align="right">
            <input type="submit" name="button" id="button" value="Skicka" />
          </td>
        </tr>
      </table>
    </form>
    <div id="output"></div>
  </body>
</html>

Mortekai · July 17, 2009

That worked like a charm

I'll go over it and see if I can make out how it works

I owe you, big time.

Sign In

[SOLVED] display orderform values in a div

Recommended Posts

Mortekai

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Mortekai

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Mortekai

Link to comment

Share on other sites

Mortekai

Link to comment

Share on other sites

Mortekai

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

Mortekai

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information