JQuery - count total of div after clone() - javascript

This is my continuation of my previous question: Modifying $i inside a form
So now I created the code like this:
<form method="post" action="actionhere">
<div id='clone_me'>
<?php
for($i=1; $i<=1;$i++) {
?>
<span id="title">Line <?php echo $i;?></span>
<input type='checkbox' name='ck[]'/>
<input type='text' name='tx[]'/>
<?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>
<script>
$(document).ready(function() {
$('.addrow').click(function(){
var n= $("#clone_me").length;
var new_n=n+1;
var new_line= $('#clone_me div:first').clone().append();
$("span#title", new_line).text("Line bet "+new_n+" ");
new_line.appendTo('#clone_me');
alert(new_n);
});
});
</script>
So I can add new row when I click the button, but I want to change the title inside span element, but I can't make it work. The 1st cloned, yes, the title is changed correctly (from 1 to 2), but the 2nd cloned still display "2", not "3".
What is the correct way?
EDIT
I only put $i=1 for testing purposes. In actual application I need to change it to 10 (so will loop 10 rows)

Related

multiple checkbox sum and totals in php-loop

my problem is to get a dynamic total for each checkbox group coming from a PHP loop
unique array-items comes from mysql database loop
<?php
$price_list = array(1, 7, 8, 10, 12, 15);
foreach($price_list AS $price){ ?>
<div>
<span>Price-Group <?php echo $price;?></span>
<form method="post" action="">
<input type="text" value="20.50" id="price<?php echo $price;?>"><br>
Option 1<input type="checkbox" value="1.50" data-id="<?php echo $price;?>"><br>
Option 2<input type="checkbox" value="2.50" data-id="<?php echo $price;?>"><br>
Option 3<input type="checkbox" value="3.50" data-id="<?php echo $price;?>"><br>
<input type="text" id="total<?php echo $price;?>" value="20.50">
</form>
</div>
<hr>
<?php } ?>
and here is my problem jquery-code (i need a dynamic total)
<script>
$('input:checkbox').change(function(){
var id = $(this).attr('data-id');
var total = parseFloat($('#price'+id).val());
$('input:checkbox:checked').each(function(){
total += isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val());
});
$('#total'+id).val(total);
});
</script>
OK, I spotted a problem in your Javascript. In the middle you do:
$('input:checkbox:checked').each(function () {....});
and this function is therefore applied to all checked checkboxes. You only want to apply the function to checked checkboxes in the pricegroup, to which the checkbox that changed belongs. Something like this:
$('#form' + id + ' input:checkbox:checked').each(function () {....});
Now you don't have a form id, so I had to add that. See: code example.
Note that you don't have to give each checkbox an individual data-id, because from them you can access the form id. For instance, when a checkbox changed:
var id = $(this).parent().attr('id');
would give you the whole form id.

Trouble with getting right value from html input using jquery

I have this at the end of my PHP file:
<script type="text/javascript>"
$("#id").on("click", "#otherId", function(e)
{
var html = "<input class='id' type='text' size='5' />";
var row = $(this).closest("#addoid").html(html);
row.find("input").focus();
row.find('input').change( function(e)
{
var value = $(this).val();
var fid = $("input#idName").val();
$.ajax({
type: "POST",
url: "page.php",
data: { entryId: fid, val: value }
})
.done(function( msg ) {
alter("data: " + msg);
});
});
</script>
</body>
The html is something like this:
<div id="id">
<div id="otherId">
<input id="idName" type="hidden" value="1234" />
<button type="button" id="otherId">Add</button>
</div>
<div id="otherId">
<input id="idName" type="hidden" value="1235" />
<button type="button" id="otherId">Add</button>
</div>
<div id="otherId">
<input id="idName" type="hidden" value="1236" />
<button type="button" id="otherId">Add</button>
</div>
</div>
I left the earlier jquery code out, but basically, when the Add button is pressed, it is changed to an input field, if the user puts an id into the input field, it will display a link (on blur) or go back to the add button if nothing is entered.
So far it is working, however
var fid = $("input#idName").val();
is taking the next id (instead of 1234, it is posting 1235).
I am new to jquery. I have searched around and tried several different things but I am getting nowhere.
Thanks.
ADDITION
To make this more clear, I have a table that is being populated with a foreach loop (using php) it is pulling records from a database.
looks something like this:
<div id="list">
<table>
<?php foreach ($data as $value):?>
<tr>
<td>
<div class="row">
<button class="add">Add</button>
<input class="hiddenId" type="hidden" name="hiddenName" value="<?php echo $value['id']?>" />
</div>
</td>
</tr>
<?php endforeach?>
</table>
</div>
Like I explained earlier, when the "Add" button is clicked, it turns into an input field.
On change (of the input field), I need the ajax to send a request containing the values of the two input fields.
The problem I am having is I am not able to get the correct value of the hidden input. jquery is grabbing a value from another row, not the correct row.
I can't seem to figure this out and have honestly tried many different ways, including some that would probably be considered unconventional.
Thanks for any help.
Please first rename input ids, since ID has to be unique.

Passing variable from within while loop to popupdiv

I have table which displays the values of SQL table. In each row there is a dropdown which allows you to select which action you want to do. When you select the action and click '
go', it pops up a form which I want to be able to pass the $id variable from the table to the popup div form, then on to the next pop page. ID displays correctly in dropdown, but whenever when it shows the div, its showing the incorrect id (its displaying the first id of the table, rather than the id of the selected dropdown).
Heres the php
while($row = mysql_fetch_array($proposal_result)) {
$date=substr($row["date"], 0, 50);
$formatted_date=date('d/m/Y', strtotime($date));
$id=substr($row["idproposal"], 0, 50);
$businessname=substr($row["businessname"], 0, 50);
$status=substr($row["status"], 0, 50);
$staff=substr($row["staff"], 0, 50);
$file_access='<bucket-location>';
$file_name='proposal_'.$id.'_'.$businessname.'.pdf';
$file=$file_access.$file_name;
print "<tr><td>".$formatted_date."</<td>
<td>".$id."</td>
<td width='25px'><a href='".$file."'target='_blank'><img src='".$images."/attachment.png' alt='file'></a></td>
<td>".$businessname."</td><td>".$staff."</td>
<td>".$status."</td>
<td>
<div>
<select id='zb-admin-dropdown' name='zb-admin-dropdown' class='dropdowns' required>
<option value='0'>Select and action...*</option>
<option value='1'>Change Status for ID#".$id."</option>
<option value='2'>Delete Proposal</option>
</select>
<input type='submit' id='report-submit' value='Go' onclick='displayDiv()'></div>
</td></tr>";
}
Javascript
function displayDiv() {
e=document.getElementById("zb-admin-dropdown");
strUser=e.options[e.selectedIndex].value;
if (strUser=='1') {
document.getElementById('abc').style.display = "block";
}
if (strUser=='2') {
document.getElementById('def').style.display = "block";
}
}
popupdiv
print "<div id='abc'>
<div id='popup'>
<form name='changestatus' action='' method='post'>
<!--<img id='close' src='images/3.png'> CLOSE ICON-->
<h2>Change Status for ".$id."</h2>
<hr>
<textarea name='deletecomments' placeholder='Comments...'></textarea><br />
<a href='/delete?id=".$id."&businessname=".$businessname."'><input type='button' id='report-submit' value='Delete Proposal'></a><a href='/zerobooks-admin-dashboard'><input type='button' id='report-submit' value='Cancel'></a>
</form>
</div>
</div>";
print "<div id='def'>
<div id='popup'>
<form name='deletefeedback' action='' method='post'>
<!--<img id='close' src='images/3.png'> CLOSE ICON-->
<h2>Reason for deleting proposal <br />".$id."</h2>
<hr>
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Added by mistake<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>No longer required<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Incorrect Information Provided<br />
<input id='deletereason' type='radio' name='deletereason' class='radio' value='Added by mistake'>Reason 4<br />
<textarea name='deletecomments' placeholder='Comments...'></textarea><br />
<a href='/delete?id=".$id."&businessname=".$businessname."'><input type='button' id='report-submit' value='Delete Proposal'></a><a href='/zerobooks-admin-dashboard'><input type='button' id='report-submit' value='Cancel'></a>
</form>
</div>
</div>";
My aim is pretty much to pass the correct ID to the popupdiv. Any help would be appreciated. You can ignore the content of the popupdiv forms.
In your html, you call the function when a button is clicked. Pass the variable there in the function call. So:
<input type='submit' id='report-submit' value='Go' onclick='displayDiv(' + $id + ')'></div>
Then have the javascript function accept an input:
function displayDiv(divId) { ...
and use it in the javascript. But the thing is, php is server side, and javascript is client side. So to get the information to the server-side php, you need to make an http request.
I can't see where all the code is but you may be able to try a couple work-arounds with minimal refactoring. First, after the div element is displayed, you can have the javascript update the href tag with:
`document.getElementById(/*a_element's_id*/).href=''+divId`
Otherwise, I'm not a php expert, but I think perhaps if the php scripts are in the same scope, a global variable or perhaps a global static variable would be accessible to both php scripts?
Personally I'd go all javscript! :)
Best of luck

How to use a for loop variable in php that is declared in javascript language

I have a little bit complicated situation with codes but I made an easy example so that It is easier for you to understand what I actually need.
HTML:
<html>
<body>
<input type="button" value="Increase" name="increase" id="increase"></input>
<input type="button" value="Submit" name="submit" id="submit"></input>
</body>
</html>
Javascript:
$(document).ready(function() {
$count = 1;
$('input').click(function() {
$count++;
});
});
And the idea of all this web-page:
1)Click few times on button "Increase";
2)The javascript variable $count increases each time You clicked on that button;
3)When You click button "Submit", it makes php loop that repeats $count times and each repeating time it makes new record in some database table. Here is the example of possible php for loop:
for($i=1; $i<=$count; $i++) {
//Here makes new record in some database table. For example, it makes some tables rows "Number" = $i; <-- This is not important in my problem.
}
The question is about middle part of declaring for loop: "$i<=$count" - how it is possible to tell until what point I want this loop with variable, if that variable was made and increased in Javascript language? :?
PHP interpratate HTML, so you are can send variable via ajax only!
You could add an input field to your form and each time you increase your count variable you update its value, so when submitted, you can extract that number via the request.
$(document).ready(function() {
$count = 1;
$('input').click(function() {
$count++;
$('#your-input-field').val($count);
});
});
You should change your form like
<html>
<body>
<form method="post" action="/">
<input type="text" value="0" id="your-input-field" name="count"></input>
<input type="button" value="Increase" name="increase" id="increase"></input>
<input type="button" value="Submit" name="submit" id="submit"></input>
</form>
</body>
</html>
now you can extrach that number via $_POST['count']
You can't use the javascript variable directly in the PHP.
I think the best way to achieve what you want to do is using an AJAX request. You should use the javascript to send a request to another URL and then use the variable.
This is how you should do:
var url = 'create_database_records.php';
var request = $.post(url, { count: count });
request.done(function(data) {
// request is done
});
Notice that in this method you should have access to the count variable.
In the *create_database_records.php* you should use the $_POST['count'] variable.
Note: You should not use $ declaring javascript variables, use var count = 1 instead.
UPDATE: Another way to do this
You may want to put this buttons in a form, and add a new input (type: hidden) that will hold the counter.
<form action="create_database_records.php" method="POST">
<input type="hidden" value="1" name="count" id="count" />
<input type="button" value="Increase" name="increase" id="increase" />
<input type="submit" value="Submit" name="submit" id="submit" />
</form>
Then, in the click event you should change the hidden field value:
$(document).ready(function() {
count = 1;
$('#increase').click(function() {
count++;
$('[name=count]').attr('value', count);
});
});
In the *create_database_records.php* you should use the $_POST['count'] variable.

form with 2 buttons need to call different functions based on value

I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?
I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});
change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();

Categories

Resources