php equivalent of getelementbyid

Hi,

I want to display a summary of someones chosen options from a form on the same page as they are selecting them.  I had used something like the below in the past but is there not an easier way to do it using either php or jquery.

function sync()
{
var oForm1 = document.forms['code'];
var oForm2 = document.forms['basic'];
var oForm3 = document.forms['pricing'];
var n1 = oForm1['code'];
var n2 = oForm2['product_code'];
var n3 = oForm3['product_code'];
  n2.value = n1.value;
  n3.value = n1.value;
}

Open in new window

and using onkeyup = sync()

My current form has elements such as qty and print_location.  I just want to display a summary.  
Thanks in advance for any help.
MsKazza
Karen LiddyOffice ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ArgentiCommented:
Hi MsKazza,

The code you posted is JavaScript = client-side executed language. PHP is a server-side executed language. That means you have to submit your form data to the server in order to process the information.
So, in your case, showing the summary on the same page as the original form doesn't give you much choice but to use JavaScript. PHP won't do. Sorry to disappoint you.
0
Karen LiddyOffice ManagerAuthor Commented:
what about jquery?  there must be something in there?
0
Meir RivkinFull stack Software EngineerCommented:
depends of the elements u can set their text via jquery.
for example, if the element is label/span/div then use the id attribute to set its text:
$("#LabelID").text("some value");

Open in new window


you can also use the class attribute to reference the element, the difference is using a dot instead of hash:
$(".LabelClass").text("some value");

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ray PaseurCommented:
The difference between the client and server roles in the HTTP protocol is broken down in this article.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

You can use something like jQuery to submit information to a PHP script running on the server.  But you can also use HTML forms, and that might be easier.

Regarding the JavaScript that is posted with the original question, you might want to post the rest of the "moving parts" in that script.  I am sure it can be changed to use jQuery, but until we see the larger picture, it wouldn't make any sense to try to guess at what else might need to be changed.
0
COBOLdinosaurCommented:
You have an 11 line javascript that does the task.  Why would bloat the page with a 30-40k jquery library so you can save 4 or 5 lines of code. It is like using a transport truck to move a 2 pound package.

Cd&
0
Slick812Commented:
greetings MsKazza, , You seem to have some Idea that there is an easier way to code, and you ask - "but is there not an easier way to do it using either php or jquery." , , Well, there are certainly different ways to code this, but being an "easier way " depends on how you look at it? ?
This code below may be a different way to code your sync( ) function -
function sync() {
var v1 = document.forms['code']['code'].value;
document.forms['basic']['product_code'].value = v1;
document.forms['pricing']['product_code'].value = v1;
}

Open in new window

 But is it easier just because it has less lines of code?
So to your - "equivalent of getelementbyid" , , in javascript there are many additional ways to get the DOM for an HTML element, but since there are no uses of
getelementbyid( ) in your code, so I can not suggest anything. JQUERY does have some DOM access that will seem easier, and may well suit what you need to do, but without knowing what you need for your - "I just want to display a summary.", no one can suggest any thing for you to try.
I will guess you need to roll through ALL form elements, and if they have a name like "qty" you will add their value together and then display somewhere -
Total Quantity of Blue Widgets is 32 !
0
Karen LiddyOffice ManagerAuthor Commented:
thank you all for your comments.  i guess i worded it wrong, i didn't necesserily mean easier, i wanted to know if there was a way to do it in php.  I have attached the code i have so far, however atm i am getting an undefined error.  But if i put the sync script on its own page it works fine.

<?php require_once('Connections/adlantic.php'); 
session_start();?>
<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#qty").click(function(){
    $("#qty_panel").slideToggle("slow");
  });
});

$(document).ready(function(){
  $("#imprint").click(function(){
    $("#imprint_panel").slideToggle("slow");
  });
});

$(document).ready(function(){
  $("#locations").click(function(){
    $("#locations_panel").slideToggle("slow");
  });
});

$(document).ready(function(){
  $("#misc").click(function(){
    $("#misc_panel").slideToggle("slow");
  });
});

$(function(){
$( '[id^=imprint]' ).change(function(){
   var pClass = '.'+$(this).val();
   if ($(this).is(':checked')) {
         $(pClass).show();
      } else {
         $(pClass).hide();
      }
});
});


function sync()
{
  var n1 = document.getElementById('qty');
  var n2 = document.getElementById('qty_copy');
  n2.value = n1.value;
}
</script>
 
<style type="text/css"> 
#qty_panel,#qty
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#imprint_panel,#imprint
{
padding:5px;
text-align:center;
background-color:#6699FF;
border:solid 1px #c3c3c3;
}
#locations_panel,#locations
{
padding:5px;
text-align:center;
background-color:#993366;
border:solid 1px #c3c3c3;
}
#misc_panel,#misc
{
padding:5px;
text-align:center;
background-color:#0099CC;
border:solid 1px #c3c3c3;
}
#qty_panel,#imprint_panel,#locations_panel,#misc_panel
{
padding:10px;
display:none;
background-color:#ffffff;
}
</style>
<?php


$result_colour = mysqli_query($con,"SELECT colour_variation.colour_variation_id, colour_variation.product_code, colour_variation.colour_id, colour_variation.variation_price, colours.colour_id, colours.colour_name, colours.colour_image FROM colour_variation INNER JOIN colours ON colour_variation.colour_id=colours.colour_id WHERE product_code='$_GET[recordID]'");
$result_size = mysqli_query($con,"SELECT * FROM size_variation WHERE product_code='$_GET[recordID]'");
$result_product = mysqli_query($con,"SELECT * FROM products WHERE product_code='$_GET[recordID]'");
$result_imprint = mysqli_query($con,"SELECT * FROM imprint_options WHERE product_code='$_GET[recordID]'");

?>
</head>

<body>
<table><tr><td>
<table width="600"><tr><td>
<form name="quote" action="testform.php" method="post">
<div id="qty">Please choose your quantities:</div>
<div id="qty_panel">

<table width="600"><tr><td>Minimum Quantity: <?php while($row = mysqli_fetch_array($result_product)) { echo $row['min_qty']; } ?></td><td>Quantity Increment:</td></tr>
<tr><td colspan="2"><br />How Many do you want?&nbsp;&nbsp;<input type="text"  name="qty" id="qty" size="10" onkeyup="sync()"/></td></tr>
<tr><td colspan="2"><br />Please let us know how many of each you require:</td></tr>
<tr><td width="300" valign="top">
<br />Available Colours:<br />
<table><?php 
while($row = mysqli_fetch_array($result_colour))
  { ?>
  <tr><td><img src="img/colours/<?php echo $row['colour_image']; ?>" width="25" height="20" />
  <input type="text" size="10" name="qty_<?php echo $row['colour_name']; ?>" id="qty_<?php echo $row['colour_name']; ?>">
  (+ €<?php echo $row['variation_price']; ?>)</td></tr>
  <?php } ?></table>
</td>

<td width="300" valign="top">
<br />Available Sizes:<br />
<table><?php 
while($row = mysqli_fetch_array($result_size))
  { ?>
	<tr><td><?php echo $row['size']; ?>  </td><td><input type="text" size="10" name="qty_<?php echo $row['size']; ?>" id="qty_<?php echo $row['size']; ?>"></td><td> (+ €<?php echo $row['variation_price']; ?>)</td></tr>
<?php } ?></table>
</td></tr></table>
</div>
<br /><br />
<div id="imprint">Would you like to imprint on product?</div>
<div id="imprint_panel"><fieldset id="imprint" tabindex="-1" class="checkbox_group">
  Yes : <input type="checkbox" id="imprint_yes" name="imprint" value="yes" autocomplete="off"/>
  No :  <input type="checkbox" id="imprint_no" name="imprint" value="no" />
</fieldset>
</div><br />
<div class="yes" id="locations" style="display: none;">Which locations would you like to imprint on?</div>
<div class="yes" id="locations_panel"><table><tr><td width="600" valign="top">
Available Options:<br />
<table border="1" bordercolor="#6666FF"><tr><td></td><td>Imprint Location</td><td>Max Size</td><td>Imprint Type</td><td>Max Colours</td><td>Setup Fee</td></tr>
<?php 
while($row = mysqli_fetch_array($result_imprint))
  { ?>
	<tr><td><input type="checkbox" id="<?php echo $row['product_code']; ?>_<?php echo $row['imprint_location']; ?>" name="<?php echo $row['product_code']; ?>_<?php echo $row['imprint_location']; ?>" /> <td><?php echo $row['imprint_location']; ?>  </td><td><?php echo $row['max_size']; ?></td><td> <?php echo $row['imprint_type']; ?></td><td> <?php echo $row['max_colours']; ?></td><td> <?php echo $row['setup_fee']; ?></td></tr>
<?php } ?></table></td></tr></table></div>
<br /><br />
<div id="misc">Finalise Quote</div>
<div id="misc_panel">Hello world!</div>

<input name="submit" type="submit" value="submit" />
</td></tr></table>
</td><td valign="top">
<table cellpadding="10" align="left" bgcolor="#FFFFCC" width="300" border="1" bordercolor="#FFCC66"><tr><td>Your Options</td></tr></table>


<input type="text" name="qty_copy" id="qty_copy"/>


</td></tr></table></form>


</body>
</html>

Open in new window

0
Karen LiddyOffice ManagerAuthor Commented:
oh i totally forgot to ask, how can i change the text box to a div to display the copy.  I tried : <div class="qty_copy" id="qty_copy"></div> but nothing showed up
or some other way to just display the text
thanks
0
COBOLdinosaurCommented:
If you want to process a document in some way on the server, you can certainly use the standards compliant document object and the DOM API which include all the methods:

http://php.net/manual/en/book.dom.php

Because DOM is a widly supported W3C standard you will find it implemented in most common web dev related tools.

Cd&
0
Slick812Commented:
Oh brother, , there is so much in your page code that I feel needs improvement, that I can not talk about much of it, but I will say some about the javascript and the use you seem to want to do here.
First, , In my view, unless you really know what you are doing in Jquery AND javascript, it is a very bad idea to try and mix the two as you have done here, you may should stick with all Jquery or all regular javascript, untill you know enough to see what is going on in your code.
I do believe that you know very little about the Jquery syntax, methods and how to do things. You have 4 $(document).ready(function(){   functions, as if you do not know what you are doing, and just copy pasted 4 times, , as far as I have ever known of there is always JUST ONE  $(document).ready(function(){ -
$(document).ready(function(){

  $("#qty").click(function(){
    $("#qty_panel").slideToggle("slow");
  });

  $("#imprint").click(function(){
    $("#imprint_panel").slideToggle("slow");
  });

  $("#locations").click(function(){
    $("#locations_panel").slideToggle("slow");
  });

  $("#misc").click(function(){
    $("#misc_panel").slideToggle("slow");
  });
});

Open in new window

you also Define any Jquery functions for Jquery, inside this $(document).ready(function(){, , I am not saying that the above $(document).ready(function(){ is correct and will work, just that you need to learn more about using  Jquery your . I can not try and teach you how to use Jquery.

I looked at your FORM and it's html TABLES and DIV, I saw that you have this CSS for <div id="qty_panel">-
#qty_panel,#imprint_panel,#locations_panel,#misc_panel
{
padding:10px;
display:none; /* qty_panel, does NOT show on page */
background-color:#ffffff;
}
    But you have this  <input type="text"  name="qty" id="qty" size="10" onkeyup="sync()"/>  within the <div id="qty_panel">, so it is also not shown, and yet the ONLY WAY to show the <div id="qty_panel"> is to click on the <input type="text"  name="qty" id="qty" size="10" onkeyup="sync()"/>, which can not happen since it is not shown? ? seems wrong to me, how can you click something that is not there?.

You ask about the DIV not showing as the INPUT did, that is because of a Basic Javascript access rule, INPUT has a value and html elements have a innerHTML, if the qty_copy is a DIV then this might work -
function sync()
{
document.getElementById('qty_copy').innerHTML = document.getElementById('qty').value;
}

Just the way I approach buildin a web page, first I start with page code (DHTML, CSS, javascript, and PHP) that works, If things are not correct I REMOVE elements that are NOT working, so I have some functional code to start with. Then I add ONE thing at a time, if I am using a framework (like your Jquery), I will add the JS library, and Initialize it, with something like  $(document).ready(function(){  , then I add One framework element at a time, and get it working correctly, before I add anything else, That way I know what to work on, and can see if the addition interferes with previous additions.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.