Instantly change value based on text field

As a user types a price in this text field:

<input name="price" type="text" id="price" style="width:90px;"/>

I want it to instantly change the value $_POST['price'] in the code below:

$price_adjusted = number_format(round($_POST['price'], 2), 2) / ($mark_up_adjusted_revised / 100);

How can I do this?
petewinterAsked:
Who is Participating?
 
Samuel LiewCommented:
done!
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_rs_ink = "-1";
if (isset($_GET['id'])) {
  $colname_rs_ink = $_GET['id'];
}
mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_ink = sprintf("SELECT * FROM ink WHERE id = %s", GetSQLValueString($colname_rs_ink, "int"));
$rs_ink = mysql_query($query_rs_ink, $conn_igs) or die(mysql_error());
$row_rs_ink = mysql_fetch_assoc($rs_ink);
$totalRows_rs_ink = mysql_num_rows($rs_ink);

mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_mark_up = "SELECT * FROM mark_up WHERE id != 1 ORDER BY mark_up_rate ASC";
$rs_mark_up = mysql_query($query_rs_mark_up, $conn_igs) or die(mysql_error());
$row_rs_mark_up = mysql_fetch_assoc($rs_mark_up);
$totalRows_rs_mark_up = mysql_num_rows($rs_mark_up);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Price Markup Calculation</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
        price_textbox = document.getElementById('price');
        price_table   = document.getElementById('priceTable');
        markup_spans  = price_table.getElementsByTagName('span');
        
        price_textbox.onkeyup = function() {
                
                var currentPrice = parseFloat(price_textbox.value);
                
                for(i=0; i<markup_spans.length; i+=2) {
                        var mark_up_adjusted = parseFloat(markup_spans[i].innerHTML) - 100;
                        if (mark_up_adjusted < 0) {
                                mark_up_adjusted = Math.abs(mark_up_adjusted);
                        }
                        mark_up_adjusted = Math.round( currentPrice / mark_up_adjusted * 10000 )/100;
                        markup_spans[i+1].innerHTML = mark_up_adjusted.toFixed(2);
                }
        };
}
//]]>
</script>
</head>

<body>
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
        <label> £<input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>" />
        </label>
        <input type="hidden" name="Customer_Submit" id="Customer_Submit" value="Go" />
        <!--I see the script needs the input with name Currency_Submit to work right so I have still added it here but made it a "hidden" input-->
</form>
<h3>Mark Up Price</h3>
<table width="360" cellspacing="1" cellpadding="5" style="margin-bottom:15px;" id="priceTable">
        <tr>
                <td bgcolor="#F1671F" class="whitebold">Mark Up</td>
                <td bgcolor="#F1671F" class="whitebold">Mark Up Price</td>
        </tr>
        <?php do {
        
                $mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
                
                if ($mark_up_adjusted < 0) {
                        $mark_up_adjusted_revised = -$mark_up_adjusted;
                } else {
                        $mark_up_adjusted_revised = $mark_up_adjusted;
                }
                
                $price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
        ?>
        <tr>
                <td width="50%" bgcolor="#DDDDDD">Cost + <span><?php echo $row_rs_mark_up['mark_up_rate'] ?></span>%</td>
                <td width="50%" bgcolor="#DDDDDD">£<span><?php echo number_format(round($price_adjusted, 2), 2) ?></span></td>
        </tr>
        <?php } while($row_rs_mark_up = mysql_fetch_assoc($rs_mark_up)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($rs_ink);
mysql_free_result($rs_mark_up);
?>

Open in new window

0
 
CodebotCommented:
use this

<script type="text/javascript">
function ChangeValues()
{
$price_adjusted = number_format(round($_POST['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
}
</script>

<input name="price" type="text" id="price" style="width:90px;" onblur="ChangeValues()" />

0
 
sweetfa2Commented:
$_POST is a server side php variable.

Are you saying you want to update it on the server, or do you wish it to display somewhere on your current screen?

If you wish to update it on the server just submit the form.  If you wish to just display the value on the screen use the onclick method of the <input> tag.

If you wish to update the server without actually posting it use an xmlhttp request.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
petewinterAuthor Commented:
Codebot - Thanks, but your code didn't work for me?

sweetfa2 - I wish it to display somewhere on your current screen. Basically whatever the value is price text field I want to be where the $_POST['price'] appears.

Many thanks
0
 
CodebotCommented:
yes because you need to convert this line in javascript.


$price_adjusted = number_format(round($_POST['price'], 2), 2) / ($mark_up_adjusted_revised / 100);

like

document.getElementById('someid').value=document.getElementById('price').value;
0
 
sweetfa2Commented:
Change codebots function to

int current_price=parseFloat(document.forms['yourformname'].price.value);
int mark_up_adjusted_revised = something?;
document.forms['yourformname'].price.value=number_format(round(current_price, 2), 2) / (mark_up_adjusted_revised / 100);
0
 
sweetfa2Commented:
You should also consider using a hidden field for this, as you will get a circular operation if you keep updating the field.
0
 
petewinterAuthor Commented:
Thanks to you both, but sorry still a bit confused. Do you mind integrating it with my attached code so I can understand easier?
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">

<label>
      £
      <input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>"/>
      </label>

    <input type="hidden" name="Customer_Submit" id="Customer_Submit" value="Go" /> <!--I see the script needs the input with name Currency_Submit to work right so I have still added it here but made it a "hidden" input-->
</form>

<h3>Mark Up Price</h3>

<table width="360" cellspacing="1" cellpadding="5" style="margin-bottom:15px;">
    <tr>
      <td bgcolor="#F1671F" class="whitebold">Mark Up</td>
      <td bgcolor="#F1671F" class="whitebold">Mark Up Price</td>
    </tr>
    <?php do {
		
	  $mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
	  
	  if ($mark_up_adjusted < 0) { $mark_up_adjusted_revised = -$mark_up_adjusted; } else  {  $mark_up_adjusted_revised = $mark_up_adjusted; }
	  
	  $price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
		
		?>
    <tr>
      <td width="50%" bgcolor="#DDDDDD">Cost + <?php echo $row_rs_mark_up['mark_up_rate'] ?>%</td>
      <td width="50%" bgcolor="#DDDDDD">£<?php echo number_format(round($price_adjusted, 2), 2) ?></td>
    </tr>
    <?php } while ($row_rs_mark_up = mysql_fetch_assoc($rs_mark_up)); ?>
  </table>

Open in new window

0
 
Samuel LiewCommented:
Try this and see if this is similar to what you need
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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 type="text/javascript">
//<![CDATA[
window.onload = function() {
	price_textbox = document.getElementById('price');
	markup_span  = document.getElementById('markup');
	markupPrice_span = document.getElementById('markupPrice');
	price_textbox.onkeyup = function() {
		
		var mark_up_adjusted = parseFloat(markup_span.innerHTML) - 100;
		
		if (mark_up_adjusted < 0) {
			mark_up_adjusted = Math.abs(mark_up_adjusted);
		}
		
		markupPrice_span.innerHTML = Math.round((Math.round(parseFloat(price_textbox.value)*100)/100) / mark_up_adjusted * 100)/100;
	};
}
//]]>
</script>
</head>

<body>
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
	<label> £<input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>" />
	</label>
	<input type="hidden" name="Customer_Submit" id="Customer_Submit" value="Go" />
	<!--I see the script needs the input with name Currency_Submit to work right so I have still added it here but made it a "hidden" input-->
</form>
<h3>Mark Up Price</h3>
<table width="360" cellspacing="1" cellpadding="5" style="margin-bottom:15px;">
	<tr>
		<td bgcolor="#F1671F" class="whitebold">Mark Up</td>
		<td bgcolor="#F1671F" class="whitebold">Mark Up Price</td>
	</tr>
	<?php do {
	
		$mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
		
		if ($mark_up_adjusted < 0) {
			$mark_up_adjusted_revised = -$mark_up_adjusted;
		} else {
			$mark_up_adjusted_revised = $mark_up_adjusted;
		}
		
		$price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
	?>
	<tr>
		<td width="50%" bgcolor="#DDDDDD">Cost + <span id="markup"><?php echo $row_rs_mark_up['mark_up_rate'] ?></span>%</td>
		<td width="50%" bgcolor="#DDDDDD">£<span id="markupPrice"><?php echo number_format(round($price_adjusted, 2), 2) ?></span></td>
	</tr>
	<?php } while($row_rs_mark_up = mysql_fetch_assoc($rs_mark_up)); ?>
</table>
</body>
</html>

Open in new window

0
 
petewinterAuthor Commented:
Thanks sam2912, but nothing is happening?

Don't I need the on blur function on the text field below?

<input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>" />
0
 
Samuel LiewCommented:
No, line 12 has set the onkeyup handler. Maybe you could provide a link to your page?
0
 
petewinterAuthor Commented:
Sam2912 - Sorry I tried again and it does work, but not correctly.

See this link: http://www.igsuk.net/pricelist/zzzz.php?id=82

It only changes the first row of the repeated area?

Also the calculation is not correct. It's correct on page load, but not when I change the value.

See code attached. Many thanks for your help!
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_rs_ink = "-1";
if (isset($_GET['id'])) {
  $colname_rs_ink = $_GET['id'];
}
mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_ink = sprintf("SELECT * FROM ink WHERE id = %s", GetSQLValueString($colname_rs_ink, "int"));
$rs_ink = mysql_query($query_rs_ink, $conn_igs) or die(mysql_error());
$row_rs_ink = mysql_fetch_assoc($rs_ink);
$totalRows_rs_ink = mysql_num_rows($rs_ink);

mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_mark_up = "SELECT * FROM mark_up WHERE id != 1 ORDER BY mark_up_rate ASC";
$rs_mark_up = mysql_query($query_rs_mark_up, $conn_igs) or die(mysql_error());
$row_rs_mark_up = mysql_fetch_assoc($rs_mark_up);
$totalRows_rs_mark_up = mysql_num_rows($rs_mark_up);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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 type="text/javascript">
//<![CDATA[
window.onload = function() {
	price_textbox = document.getElementById('price');
	markup_span  = document.getElementById('markup');
	markupPrice_span = document.getElementById('markupPrice');
	price_textbox.onkeyup = function() {
		
		var mark_up_adjusted = parseFloat(markup_span.innerHTML) - 100;
		
		if (mark_up_adjusted < 0) {
			mark_up_adjusted = Math.abs(mark_up_adjusted);
		}
		
		markupPrice_span.innerHTML = Math.round((Math.round(parseFloat(price_textbox.value)*100)/100) / mark_up_adjusted * 100)/100;
	};
}
//]]>
</script>
</head>

<body>
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
	<label> £<input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>" />
	</label>
	<input type="hidden" name="Customer_Submit" id="Customer_Submit" value="Go" />
	<!--I see the script needs the input with name Currency_Submit to work right so I have still added it here but made it a "hidden" input-->
</form>
<h3>Mark Up Price</h3>
<table width="360" cellspacing="1" cellpadding="5" style="margin-bottom:15px;">
	<tr>
		<td bgcolor="#F1671F" class="whitebold">Mark Up</td>
		<td bgcolor="#F1671F" class="whitebold">Mark Up Price</td>
	</tr>
	<?php do {
	
		$mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
		
		if ($mark_up_adjusted < 0) {
			$mark_up_adjusted_revised = -$mark_up_adjusted;
		} else {
			$mark_up_adjusted_revised = $mark_up_adjusted;
		}
		
		$price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
	?>
	<tr>
		<td width="50%" bgcolor="#DDDDDD">Cost + <span id="markup"><?php echo $row_rs_mark_up['mark_up_rate'] ?></span>%</td>
		<td width="50%" bgcolor="#DDDDDD">£<span id="markupPrice"><?php echo number_format(round($price_adjusted, 2), 2) ?></span></td>
	</tr>
	<?php } while($row_rs_mark_up = mysql_fetch_assoc($rs_mark_up)); ?>
</table>
</body>
</html>
</html>
<?php
mysql_free_result($rs_ink);
mysql_free_result($rs_mark_up);
?>

Open in new window

0
 
Samuel LiewCommented:
Ok, that's a very good start. What is the format of the numbers presented in the repeated section? What is the formula calculation?
0
 
petewinterAuthor Commented:
This is the previous calculation:

$mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
            
            if ($mark_up_adjusted < 0) {
                  $mark_up_adjusted_revised = -$mark_up_adjusted;
            } else {
                  $mark_up_adjusted_revised = $mark_up_adjusted;
            }
            
            $price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);

0
 
Samuel LiewCommented:
Amended the code. See if this is what you need.
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_rs_ink = "-1";
if (isset($_GET['id'])) {
  $colname_rs_ink = $_GET['id'];
}
mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_ink = sprintf("SELECT * FROM ink WHERE id = %s", GetSQLValueString($colname_rs_ink, "int"));
$rs_ink = mysql_query($query_rs_ink, $conn_igs) or die(mysql_error());
$row_rs_ink = mysql_fetch_assoc($rs_ink);
$totalRows_rs_ink = mysql_num_rows($rs_ink);

mysql_select_db($database_conn_igs, $conn_igs);
$query_rs_mark_up = "SELECT * FROM mark_up WHERE id != 1 ORDER BY mark_up_rate ASC";
$rs_mark_up = mysql_query($query_rs_mark_up, $conn_igs) or die(mysql_error());
$row_rs_mark_up = mysql_fetch_assoc($rs_mark_up);
$totalRows_rs_mark_up = mysql_num_rows($rs_mark_up);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Price Markup Calculation</title>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
	price_textbox = document.getElementById('price');
	price_table   = document.getElementById('priceTable');
	markup_spans  = price_table.getElementsByTagName('span');
	
	price_textbox.onkeyup = function() {
		
		var currentPrice = parseFloat(price_textbox.value);
		
		for(i=0; i<markup_spans.length; i+=2) {
			var mark_up_adjusted = parseFloat(markup_spans[i].innerHTML) - 100;
			if (mark_up_adjusted < 0) {
				mark_up_adjusted = Math.abs(mark_up_adjusted);
			}
			markup_spans[i+1].innerHTML = Math.round( currentPrice / mark_up_adjusted * 10000 )/100;
		}
	};
}
//]]>
</script>
</head>

<body>
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
	<label> £<input name="price" type="text" id="price" style="width:90px;" value="<?php echo number_format(round($row_rs_ink['price'], 2), 2); ?>" />
	</label>
	<input type="hidden" name="Customer_Submit" id="Customer_Submit" value="Go" />
	<!--I see the script needs the input with name Currency_Submit to work right so I have still added it here but made it a "hidden" input-->
</form>
<h3>Mark Up Price</h3>
<table width="360" cellspacing="1" cellpadding="5" style="margin-bottom:15px;" id="priceTable">
	<tr>
		<td bgcolor="#F1671F" class="whitebold">Mark Up</td>
		<td bgcolor="#F1671F" class="whitebold">Mark Up Price</td>
	</tr>
	<?php do {
	
		$mark_up_adjusted = $row_rs_mark_up['mark_up_rate'] - 100;
		
		if ($mark_up_adjusted < 0) {
			$mark_up_adjusted_revised = -$mark_up_adjusted;
		} else {
			$mark_up_adjusted_revised = $mark_up_adjusted;
		}
		
		$price_adjusted = number_format(round($row_rs_ink['price'], 2), 2) / ($mark_up_adjusted_revised / 100);
	?>
	<tr>
		<td width="50%" bgcolor="#DDDDDD">Cost + <span><?php echo $row_rs_mark_up['mark_up_rate'] ?></span>%</td>
		<td width="50%" bgcolor="#DDDDDD">£<span><?php echo number_format(round($price_adjusted, 2), 2) ?></span></td>
	</tr>
	<?php } while($row_rs_mark_up = mysql_fetch_assoc($rs_mark_up)); ?>
</table>
</body>
</html>
<?php
mysql_free_result($rs_ink);
mysql_free_result($rs_mark_up);
?>

Open in new window

0
 
petewinterAuthor Commented:
That's great. :)

One last issue...

When I change the value the mark up prices are not formatting to to 2 decimal points. i.e. £50 should be £50.00

See link: http://www.igsuk.net/pricelist/zzzz.php?id=82
0
 
petewinterAuthor Commented:
i.e. The javascript equivalent to

number_format(round($price_adjusted, 2), 2)
0
 
petewinterAuthor Commented:
Perfect. Many thanks for all your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.