How to increment the value of a variable onclick

Question

anony 0 Newbie Poster

16 Years Ago

This is my code for multiple file upload. When the user clicks on attach more files link
$max_no_img should be incremented but i am not able to figure out how to do it.

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title></title>
<script type="text/javascript">
function increment(){
     max_no_img++;
     return max_no_img;
}
</script>
</head>

<body>
<?
$max_no_img=2;  // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
    <input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='addimg.php' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>"; 
echo "</form> </table>";
?>
</body>

</html>

Any help will be appreciated as i am a newbie.

javascript php

Edited 13 Years Ago by Reverend Jim because: Fixed formatting

3 Contributors
11 Replies
3K Views
11 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by vibhaJ

Dani AI

Generated 11 Months Ago

The key gotcha here is that the PHP for loop runs once on the server before the page is sent to the browser. Clicking your link only changes a client-side variable, so the rendered inputs do not update unless you either 1) modify the DOM with JavaScript or 2) submit back to PHP and re-render. Also, your original href='addimg.php' navigates away, so the click count is lost. was right to move the logic to the client and persist the count in a hidden field.

Here is a minimal pattern that keeps the user on the page, adds inputs dynamically, and keeps max_no_img in sync so the server receives the updated count on submit:

<form method="post" action="addimgck.php" enctype="multipart/form-data">
  <div id="files">
    <label>Image 1 <input type="file" name="images[]"></label>
    <label>Image 2 <input type="file" name="images[]"></label>
  </div>

  <input type="hidden" id="max_no_img" name="max_no_img" value="2">
  <button type="button" id="addMore">Attach more files</button>
  <button type="submit">Upload</button>
</form>

<script>
(function () {
  var files = document.getElementById('files');
  var hidden = document.getElementById('max_no_img');
  var addBtn = document.getElementById('addMore');
  var limit = 10; // optional safety cap

  addBtn.addEventListener('click', function (e) {
    var count = parseInt(hidden.value, 10) || 0;
    if (count >= limit) return;

    count += 1;
    var wrapper = document.createElement('label');
    wrapper.textContent = 'Image ' + count + ' ';
    var input = document.createElement('input');
    input.type = 'file';
    input.name = 'images[]';
    wrapper.appendChild(input);
    files.appendChild(wrapper);
    hidden.value = count;
  });
})();
</script>

Server tips:

Do not trust the hidden count; iterate $_FILES['images']['name'] to know how many files actually arrived.
Consider a modern alternative: a single <input type="file" name="images[]" multiple> plus server-side handling. This simplifies the UI while still supporting arrays.

All 11 Replies

vibhaJ 126 Master Poster

16 Years Ago

JS code runs on client side.
If you will give href on "attach more files" that means page is changed. And you can not have count of click.

you can add file element dynamically using JS.
Below code will give number of click without href.

<script type="text/javascript">
var max_no_img = 0;
function increment(){
max_no_img++;
alert('max_no_img : '+max_no_img);
return max_no_img;
}
</script>

<?
$max_no_img=2; // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
<input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='#' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>";
echo "</form> </table>";
?>

vibhaJ 126 Master Poster

16 Years Ago

Here when form submitted you can have $max_no_img value.
max_no_img is text field in this code you can make it hidden.
Try this code.

<script type="text/javascript">

function increment(){

	if(!max_no_img)
	{ var max_no_img = document.getElementById('max_no_img').value; }
	
		max_no_img++;
		document.getElementById('max_no_img').value = max_no_img;
		return max_no_img;
	
}
</script>

<?
$max_no_img=2; // Maximum number of images value to be set here
echo "<form method=post action=addimgck.php enctype='multipart/form-data'>
<input type=\"text\" value=\"".$max_no_img."\" name=\"max_no_img\" id=\"max_no_img\" />";
echo "<table border='0' width='400' cellspacing='0' cellpadding='0' align=center>";
for($i=1; $i<=$max_no_img; $i++){
echo "<tr><td>Images $i</td><td>
<input type=file name='images[]' class='bginput'></td></tr>";
}?>
<a href='#' onclick='increment();'>attach more files</a>
<?php
echo "<tr><td colspan=2 align=center><input type=submit value='Add Image'></td></tr>";
echo "</form> </table>";
?>

vibhaJ 126 Master Poster

16 Years Ago

Okay. try above code i have posted.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anony 0 Newbie Poster · Answer 1 · 2010-07-23T13:07:17+00:00

Thank you vibhadevit.
But i want to use that value of max_no_img in the form below.
So that more files can be uploaded.

anony 0 Newbie Poster · Answer 2 · 2010-07-23T13:07:32+00:00

Thank you vibhadevit.
But i want to use that value of max_no_img in the form below.
So that more files can be uploaded.

Member #334542 · Answer 3 · 2010-07-23T13:19:18+00:00

You can directly fetch the details inside js.

<script type="text/javascript">
var max_no_img = <?php echo $max_no_img; ?>;
function increment(){
max_no_img++;
alert('max_no_img : '+max_no_img);
return max_no_img;
}
</script>

anony 0 Newbie Poster · Answer 4 · 2010-07-23T13:30:51+00:00

It will display the incremented value in the text box.
But i dont think the for loop is beng executed, because there are only two text boxes for file upload.

Member #334542 · Answer 5 · 2010-07-23T13:55:20+00:00

Better you neglect the javascript function and call a php function onClick and no need for any increments, just add the

echo "<tr><td>Images $max_no_img++;</td><td><input type=file name='images[]' class='bginput'></td></tr>";

anony 0 Newbie Poster · Answer 6 · 2010-07-23T15:41:28+00:00

thank you RajaRajan. R.
But no luck. its not working.

anony 0 Newbie Poster · Answer 7 · 2010-07-23T17:19:28+00:00

Thank you so much RajaRajan. R. and Vibhadevit for your ideas.
Its working now.

vibhaJ 126 Master Poster · Answer 8 · 2010-07-23T17:55:48+00:00

vibhaJ 126 Master Poster

16 Years Ago

Okay.. gr8

Edited 16 Years Ago by vibhaJ because: n/a

How to increment the value of a variable onclick

Dani AI

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers