Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

selected items to be displayed in the next page/form

Newbie
  
Join Date: Dec 2007
Posts: 15
#1: Jan 12 '08
Hi,

I have a php page which has some checkboxes ,textfields and values.If I select a checkbox ,a particular value will be displayed in a textfield.I have a "go"button in the same page.I want the selected values and textfields to be displayed in the next page if i click the button.Pl guide me how to do this.

I am sending the sample code below.

arical.php

[HTML]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ajax.js"></script>

<title>Untitled Document</title>
<style type="text/css">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. body{
  2.     background-repeat:no-repeat;
  3.     font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  4.     font-size:0.9em;
  5.     line-height:130%;
  6.     text-align:center;
  7.     height:100%;
  8.     background-color: #E2EBED;
  9. }
  10. #contentContainer h2{    /* No margins above <h2> tags */
  11.     margin-top:0px;
  12. }
  13.  
  14.  
  15. #mainContainer{
  16.     width:99%;
  17.     margin:0 auto;
  18.     text-align:left;
  19.     padding:5px;
  20.     margin-top:20px;
  21.     border:1px solid #000;
  22.     background-color: #FFF;
  23. }
  24. #contentContainer{
  25.  
  26.     float:left;
  27.     border:1px solid #000;
  28.     background-color: #E2EBED;
  29.     overflow:auto;
  30.     margin-right:10px;
  31.     padding:10px;
  32.  
  33.     /* CSS HACK */
  34.     width: 750px;    /* IE 5.x */
  35.     width/* */:/**/760px;    /* Other browsers */
  36.     width: /**/760px;
  37.  
  38.     /* CSS HACK */
  39.     height: 750px;    /* IE 5.x */
  40.     height/* */:/**/750px;    /* Other browsers */
  41.     height: /**/750px;
  42.  
  43. }
  44.  
  45.  
  46. #contentContainer .openingText{
  47.     color:red;
  48. }
  49.  
  50. #articleListContainer{    /* <ul> container for article list */
  51.     float:left;
  52.     height:100%;
  53.     overflow:auto;    
  54.     width:150px;
  55.     border:1px solid #000;
  56.     background-color:#CC9900;    
  57. }
  58. .articleList{
  59.     margin:0px;
  60.     padding:5px;
  61.  
  62. }
  63. .articleList li{    /* General layout article in list */
  64.     list-style-type:none;
  65.     border:1px solid #999;
  66.     background-color:#EEE;
  67.     height:100%;
  68.     margin:2px;
  69.     padding:2px;
  70.     color:#333;
  71.     cursor:pointer;
  72. }
  73. .articleList li.articleMouseOver{    /* Mouse over article in list - layout */
  74.     border:1px solid #000;
  75.     color:#000;
  76. }
  77. .articleList li.articleClick{    /* Active article in list - layout */
  78.     border:1px solid #000;
  79.     color:#000;
  80.     background-color:#317082;
  81.     /*color:#FFF;*/
  82.     color:#0033CC;
  83. }
  84.  
  85. .keyText{    /* Just a column I use for key text inside articles - the one with the light blue bg and dotted border */
  86.     background-color:#FFF;
  87.     border:1px dotted #000;
  88.     float:right;
  89.     margin-top:5px;
  90.     margin-left:5px;
  91.     margin-bottom:5px;
  92.     width:150px;
  93.     padding:3px
  94. }
  95. .clear{
  96.     clear:both;
  97. }
[HTML]</style>

<script type="text/javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. /************************************************************************************************************
  2. Ajax dynamic articles 
  3. Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland
  4.  
  5. This library is free software; you can redistribute it and/or
  6. modify it under the terms of the GNU Lesser General Public
  7. License as published by the Free Software Foundation; either
  8. version 2.1 of the License, or (at your option) any later version.
  9.  
  10. This library is distributed in the hope that it will be useful,
  11. but WITHOUT ANY WARRANTY; without even the implied warranty of
  12. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  13. Lesser General Public License for more details.
  14.  
  15. You should have received a copy of the GNU Lesser General Public
  16. License along with this library; if not, write to the Free Software
  17. Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  18.  
  19. Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
  20. written by Alf Magne Kalleland.
  21.  
  22. Alf Magne Kalleland, 2006
  23. Owner of DHTMLgoodies.com
  24.  
  25.  
  26. ************************************************************************************************************/    
  27. var ajax = new sack();
  28. var articleListObj;
  29. var activeArticle = false;
  30. var clickedArticle = false;
  31. var contentObj    // Reference to article content <div>
  32.  
  33. function mouseoverArticle()    // Highlight article
  34. {
  35.     if(this==clickedArticle)return;
  36.     if(activeArticle && activeArticle!=this){
  37.         if(activeArticle==clickedArticle)
  38.             activeArticle.className='articleClick';
  39.         else
  40.             activeArticle.className='';
  41.  
  42.     }
  43.     this.className='articleMouseOver';
  44.     activeArticle = this;    // Storing reference to this article
  45. }
  46.  
  47. function showContent()    // Displaying content in the content <div>
  48. {
  49.     contentObj.innerHTML = ajax.response;    // ajax.response is a variable that contains the content of the external file    
  50. }
  51.  
  52. function showWaitMessage()
  53. {
  54.     contentObj.innerHTML = 'Finding article.....<br>Please wait';
  55. }
  56. function getAjaxFile(fileName)
  57. {
  58.     ajax.requestFile = fileName;    // Specifying which file to get
  59.     ajax.onCompletion = showContent;    // Specify function that will be executed after file has been found
  60.     ajax.onLoading = showWaitMessage;    // Action when AJAX is loading the file
  61.     ajax.runAJAX();        // Execute AJAX function    
  62. }
  63.  
  64. function selectArticle()    // User have clicked on an article
  65. {
  66.     getAjaxFile(this.id + '.html');    // Calling the getAjasFile function. argument to the function is id of this <li> + '.html', example "article1.html"
  67.     if(clickedArticle && clickedArticle!=this)clickedArticle.className='articleMouseOver';
  68.     this.className='articleClick';
  69.     clickedArticle = this;
  70. }
  71.  
  72.  
  73.  
  74.  
  75. function initAjaxDemo()
  76. {
  77.     articleListObj = document.getElementById('articleList');
  78.     var articles = articleListObj.getElementsByTagName('LI');
  79.     for(var no=0;no<articles.length;no++){
  80.         articles[no].onmouseover = mouseoverArticle;
  81.         articles[no].onclick = selectArticle;
  82.     }    
  83.  
  84.     contentObj = document.getElementById('contentContainer');
  85. }
  86. window.onload = initAjaxDemo;
  87.  
  88.  
  89. function check()
  90. {
  91. <!-- Code for entering the values into the form by checking the boxes -->
  92. if (document.sangoma.chkownDomain.checked) {
  93. document.sangoma.ownDomain.value = "50";
  94. }
  95. else {
  96. document.sangoma.ownDomain.value = "0";
  97. }
  98. }
  99. function check1()
  100. {
  101. <!-- Code for entering the values into the form by checking the boxes -->
  102. if (document.sangoma.chkownDomain1.checked) {
  103. document.sangoma.ownDomain1.value = "500";
  104. }
  105. else {
  106. document.sangoma.ownDomain1.value = "0";
  107. }
  108. }
  109. <!-- End of check box code -->
  110. function sum()
  111. {
  112. var a=parseInt(document.sangoma.ownDomain.value);
  113. var b=parseInt(document.sangoma.ownDomain1.value);
  114. document.sangoma.total.value=a+b;
  115. }
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122. function check_1()
  123. {
  124. <!-- Code for entering the values into the form by checking the boxes -->
  125. if (document.sangoma.chkownDomain_1.checked) {
  126. document.sangoma.ownDomain_1.value = "7897";
  127. }
  128. else {
  129. document.sangoma.ownDomain_1.value = "0";
  130. }
  131. }
  132. function check_2()
  133. {
  134. <!-- Code for entering the values into the form by checking the boxes -->
  135. if (document.sangoma.chkownDomain_2.checked) {
  136. document.sangoma.ownDomain_2.value = "6768";
  137. }
  138. else {
  139. document.sangoma.ownDomain_2.value = "0";
  140. }
  141. }
  142. <!-- End of check box code -->
  143. function sum_tot()
  144. {
  145. var a1=parseInt(document.sangoma.ownDomain_1.value);
  146. var b1=parseInt(document.sangoma.ownDomain_2.value);
  147. document.sangoma.total.value=a1+b1;
  148. }


[HTML]</script>

</head>

<body>
<form action="" method="post" name="sangoma">


<div id="contentContainer">
<h2 class="openingText">Click on one of the Snagoma Card to the right.</h2>
<p>This will load the the content of external articles into this DIV</p>
</div>
<div id="articleListContainer">
<ul id="articleList" class="articleList">
<li id="article1">A200 FXO ONLY analog cards</li>
<li id="article2">A200 FXS ONLY analog cards</li>
<li id="article3">A200FXO & FXS analog cards</li>
<li id="article4">A400 FXO ONLY analog cards</li>
<li id="article5">A400 FXS ONLY analog cards</li>
<li id="sam">A400 FXO & FXS analog cards</li>
<li id="test">Sangoma Technologies</li>
<li id="article8">A200 Sangoma FXO/FXS Component Based Pricing starting Jan 1 2007</li>
<li id="article9">A400 Sangoma FXO/FXS Component Based Pricing</li>
</ul>
</div>
<div class="clear"></div>

</form>

</body>
</html>
[/HTML]

article1a.html
[HTML]<form action="" method="post" name="sangoma">
<!--<form method="post" action="article1.html" name="autoSumForm" >-->
<table><th>&nbsp;&nbsp;&nbsp;</th>
<th>SKU #</th>
<tr>&nbsp;&nbsp;&nbsp;<td align="left">A20001</td>&nbsp;&nbsp;&nbsp;<td align="right">2 FXO analog card</td></tr>

<tr>&nbsp;&nbsp;&nbsp;<td align="left">A20001D</td>&nbsp;&nbsp;&nbsp;<td align="right">2 FXO analog card w/ EC HW</td></tr>


</table>
</form>
[/HTML]
Thanks in advance.

------

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Jan 12 '08

re: selected items to be displayed in the next page/form

Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Jan 12 '08

re: selected items to be displayed in the next page/form

If you need to display these values on the next page, you don't need Ajax. Just let PHP do the work of retrieving the submitted values.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,467 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved