asked on

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?

Codebot

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()" />

sweetfa2

$_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.

Pete Winter

ASKER

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

Codebot

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;

sweetfa2

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);

sweetfa2

You should also consider using a hidden field for this, as you will get a circular operation if you keep updating the field.

Pete Winter

ASKER

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

Samuel Liew

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

Pete Winter

ASKER

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); ?>" />

Samuel Liew

No, line 12 has set the onkeyup handler. Maybe you could provide a link to your page?

Pete Winter

ASKER

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

Samuel Liew

Ok, that's a very good start. What is the format of the numbers presented in the repeated section? What is the formula calculation?

Pete Winter

ASKER

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);

Samuel Liew

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

Pete Winter

ASKER

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

Pete Winter

ASKER

i.e. The javascript equivalent to

number_format(round($price_adjusted, 2), 2)

ASKER CERTIFIED SOLUTION

Samuel Liew

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pete Winter

ASKER

Perfect. Many thanks for all your help.