detecting input in dynamically generated input - javascript

My code dynamically generates a series of input fields. Each row of fields belongs to one database record and I use php's dynamic array notation ('[]') to capture the values.
Then at the input field i want to show the price input value that have been multiplied by total number of item that the data is generated from database.
I used javascript that placed inside foreach looping to detect the input and multiply it, but it only works for the first field, at the second field the multiplied value shown on the first field too.
this is the code structure :
<?php foreach ($barang->result_array() as $row): ?>
<tr>
<td><?php echo $row['nmbr']; ?> </td>
<td><?php echo $row['jumlah']?> </td>
<td><input id="pnwrn" type="text" name="pnwrn[]" value="" />
<input type="hidden" name="id_barang[]" value="<?php echo $row['id_barang']?>" />
<input type="hidden" name="jumlah[]" value="<?php echo $row['jumlah']?>" /> </td>
<td><div id="output"><script type="text/javascript">
var harga = <?php echo $row['jumlah']; ?>;
$('input').bind('input propertychange', function () {
$('#output').html($(this).val()*harga);
});
</script>
</div></td>
</tr>
<?php endforeach; ?>
I tried to make the output show the multiply value in each row but have no result yet..can someone tell me where i make my mistake?
thanks ~

There are several issues that others have pointed out in the comments.
The reason why every value on the page is changing is because you are using an id for the output div instead of a class and your jQuery change handler is saying: "get everything with an id of output and put this new html in it." Aside from that, it's not valid to use an id more than once on a page. So, change both the output and pnwrn to classes.
To make it simple to get the corresponding 'harga' value later, you can just store it as data on the input.
<?php foreach ($barang->result_array() as $row): ?>
<tr>
<td><?php echo $row['nmbr']; ?> </td>
<td><?php echo $row['jumlah']?> </td>
<td><input class="pnwrn" type="text" name="pnwrn[]" value="" data-harga="<?php echo $row['jumlah']?>" />
<input type="hidden" name="id_barang[]" value="<?php echo $row['id_barang']?>" />
<input type="hidden" name="jumlah[]" value="<?php echo $row['jumlah']?>" /> </td>
<td><div class="output"></div></td>
</tr>
<?php endforeach; ?>
The second issue is that you are writing a separate handler in every single table row. This is not only inefficient, it's hard to read the output and completely unnecessary. You just want your script once on the page so don't include it in your loop. To get to the corresponding values for your calculation, you can just retrieve the data value stored on the input. Then, you can use DOM traversal to find the corresponding output div. In this case, go up to the nearest ancestor row, then find its descendent element with the output class. Also, unless you are using a really old version of jQuery, use the on method instead of the deprecated bind.
<script type="text/javascript">
$('input').on('change', function () {
var harga = parseInt($(this).data('harga'));
$('this').parents('tr').find('.output').html($(this).val()*harga);
});
</script>

Related

PHP echo javascript to change iframe source

I have a text input search form for support tickets. If the user inputs a ticket id (checked using a PHP if statement), the background color of the search box is changed to yellow (using a PHP echo) to highlight the search text entered. This part works.
I would like to also change the source value of an iframe as part of the PHP if condition like this:
<td align="left">
<input type="text" name="ticket" id="ticket" placeholder="Ticket" value="<?php echo $this->state->ticket;?>" class="input-mini search-query" onchange="document.adminForm.submit();"
<?php if ($this->state->ticket != "")
{
echo 'style="background-color: yellow;"';
echo '<script language="javascript">';
echo 'document.getElementById("ticketIframe").contentWindow.document.location.href="http://myurl.com"';
echo '</script>';
}?>/>
</td>
The javascript function (document.getElementById...) displays on the page rather than executing. I tried a simple javascript alert, but got the same result.
Suggestions?
Need to close the input tag before you insert script tag. You simply are generating invalid html that looks like:
<input <script></script> />
You get unexpected results when html is invalid

CakePHP dynamic form inputs

I'm using CakePHP 2.3.8 and I'm trying to create a form with dynamically added inputs from this tutorial but I'm having some issues. The adding and removing of inputs works just fine, but when I submit the form I get a black hole error message. Upon inspecting the inputs, it doesn't appear as if the key value isn't properly set and causing some issues with the id's of the inputs.
For example, with this code in an element
//Elements/users.ctp
$key = isset($key) ? $key : '<%= key %>';
<tr>
<td><?php echo $this->Form->input("Role.{$key}.user_id", array('options' => $users, 'label' => false)); ?></td>
<td class="actions">
Remove User
</td>
</tr>
this is the select that is generated
<select name="data[Role][0][user_id]" id="Role<%=Key%>UserId">
Edit
The value of $key is being set correctly on /Elements/users.ctp. I can create a row and echo the output of $key, and a number for the row appears correctly. As you can see above, the name of the element is set correctly, but the id is still being set strangely.
The name of the select element is being set properly, but not the id.
What is causing the select id to be Role<%=Key%>UserId rather than Role0UserId?
The Problem:
If you observe the generated select tag you posted in question, it shows
<%=Key%>
The variable expected by underscore library utilized by the tutorial you are using is
<%= key %>
CakePHP form input is replacing the html characters and space of that underscore variable, hence its not detectable by underscore library.
The Solution:
In order to fix the issue, you must use plain html code for the template part. Your grades.ctp must be as shown below (partial code for understanding)
<?php if (isset($key)) : ?>
<tr>
<td>
<?php echo $this->Form->input("Grade.{$key}.id") ?>
<?php echo $this->Form->input("Grade.{$key}.subject", array('label' => false)); ?>
</td>
</tr>
...rest of the code
<?php else: ?>
<tr>
<td>
<input type="hidden" id="Grade<%= key %>Id" name="data[Grade][<%= key %>][id]">
<div class="input text required">
<input type="text" required="required" id="Grade<%= key %>Subject" maxlength="200" name="data[Grade][<%= key %>][subject]">
</div>
</td>
...rest of the code
</tr>
<?php endif; ?>

Keep value in input box when the page is refreshed

I want to keep the value from a input box even when the page is refreshed.
I know that i could do that using just an echo, but i'm connecting two different files.
I have one page with the form:
<form method="POST" action="mypage.php">
<input type="hidden" name="value" value="test">
<input type"submit">
</form>
And another one(mypage.php) that reads the form
<input type="text" name="value" value='<?php echo $_POST['value']; ?>' />
The code is working, bue lets imagine that someone refreshed the page and the value desappears.
I want to know how can I keep the value inside the textbox even when someone refreshes the page.
Thanks.
Create a session to preserve the value:
<?php
session_start();
if((isset($_SESSION["preserve"]))&&($_SESSION["preserve"] != "")){
$_SESSION["preserve"] = $_POST['value'];
}else{
$_SESSION["preserve"] = "";
}
?>
<input type="text" name="value" value='<?php echo $_SESSION["preserve"]; ?>' />
<?php
//when you don't need this session anymore do this:
//(that can also be called in another page of your project)
unset($_SESSION["preserve"]);
?>
Hope that's what you were looking for...

Store a session variable in html/javascript

I'm trying to grab a session variable in my javascript, but have some problems getting it right..
I didn't get that to work, so instead i tried to store it in a hidden variable in HTML first, but i dont know how to store a session variable there..
Can anyone guide me to the right path?
The code (HTML file): ($_SESSION["price1"] is equal to "20.00")
<input type="hidden" id="price" value="$_SESSION["price"]"/>
The code in javascript:
var sessionValue = document.getElementById("price").value;
What to do?
you missed PHP tags <?php and echo, change to:
<input type="hidden" id="price" value="<?php echo $_SESSION["price"]; ?>"/>
What everyone bellow mentioned is perfectly true, inside HTML you can just wrap stuff in <?php echo $_SESSION['price']; ?> and it will work (notice the <?php tags)
However, the right way to do this -- considering you want to pass a PHP variable (in your case a session variable) to javascript is to directly insert it into a javascript variable instead of accessing the DOM. This way, you also have it instantly and don't have to wait for the DOM to be loaded
<script>
var price = '<?php echo $_SESSION["price"]; ?>';
alert('The price is: ' + price);
</script>
This line:
<input type="hidden" id="price" value="$_SESSION["price"]"/>
Should be:
<input type="hidden" id="price" value="<?php echo $_SESSION["price"];?>"/>
You are missing the php tags
change,
<input type="hidden" id="price" value="$_SESSION["price"]"/>
To,
<input type="hidden" id="price" value='<?php echo $_SESSION["price"]; ?>'/>
Grab your session variable in JavaScript using this:
var my_session_price = "<?php echo $_SESSION["price"]; ?>";

Hidden values in php echo

I have this query in php code:
$sql="SELECT vName,id FROM employee WHERE vName LIKE '%$my_data%' ORDER BY vName";
I have echoed the vName.
echo $row['vName']."\n";
The above values appear in a autocomplete textbox.
In the same aboce echo statement I want to pass 'id' as hiden value. is it possible? I wan to retrieve it in another page.How do I do this?
$sql="SELECT vName,id FROM employee WHERE vName LIKE '%$my_data%' ORDER BY vName";
$hid='<input type="hidden" name="xyz" id="abc" value="'.$row['id'].'" />';
echo($hid);
echo $row['vName']."\n";
I hope you get the idea.
Echo it out to a hidden input field,
<input type="hidden" name="hidden_id" id="my_hidden_id" value="<?php echo $row['id'];?>"/>
This way you can pass it with a form if you are submitting one or simply add an id to it and get the value to pass to the next page.
I would first make a variable of $row['id'] and when you're still in your form but outside the textbox do this:
<?php echo "<input type='hidden' name='id' value='".$yourvariable."'/>";?>
If it must be completely hidden i recommend using php-sessions.
I guess you want to do that if you want to retrieve the id in other page , you better do this :
<?php echo $row['vname'] ?>

Categories