How To Change The Value Of The Hidden Field In The Foreach On Change Event?

February 13, 2023 Post a Comment

I have input fields and foreach conditions on my page.

Solution 1:

The below solution depends on your working code or you might want to tweak the code as required.

Wrap the input file element with a dummy wrapper.

<form action="process.php" name="employee" method="post">

  <input type="text" name="name" class="onchangefield">
  <input type="hidden" name="haschange[name]" class="haschange" value="0" />
    <?php 
            $i=1;
            $arrayName = array('1','2','3');
            foreach ($arrayName as $key => $value) {?>
            <div class="dummy-wrapper">
            <input type="file" name="slider[]"  class="fileupload onchangefield">
            <img src="<?php echo $value;?>">
            <input type="hidden" name="haschange[slider][<?php echo $i;?>]" 
                class="haschange" value="">
              </div>
    <?php $i++; } ?>
</form>

And update the js like

$(".onchangefield").change(function() {
  var selectorWrapper = $(this).closest('.dummy-wrapper') //get next input.
  selectorWrapper.find('.haschange').val($(this).val() != "" ? 1 : 0) //depending on value change value of next
});

Tested and working in my local

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
    </head>
    <body>
    <form action="process.php" name="employee" method="post">

    <input type="text" name="name" class="onchangefield">
    <input type="hidden" name="haschange[name]" class="haschange" value="0" />
    <?php 
            $i=1;
            $arrayName = array('1','2','3');
            foreach ($arrayName as $key => $value) {?>
            <div class="dummy-wrapper">
            <input type="file" name="slider[]"  class="fileupload onchangefield">
            <img src="<?php echo $value;?>">
            <input type="hidden" name="haschange[slider][<?php echo $i;?>]" 
                class="haschange" value="">
                </div>
    <?php $i++; } ?>
    </form>

    <script>
    $(".onchangefield").change(function() {
    var selectorWrapper = $(this).closest('.dummy-wrapper') //get next input.
    console.log("change",$(this).val()) //checkpoint // confirms, this function is executed on change
    console.log(selectorWrapper.find('.haschange').length) // checkpont // confirms there is an input element
    selectorWrapper.find('.haschange').val($(this).val() != "" ? 1 : 0) //depending on value change value of next
    });
    </script>
    </body>
    </html>

Solution 2:

In your foreach loop, the Input after the File is not the hidden one, it's the IMG tag.

So when you do $(this).next() you are actually selecting the IMG tag and changing its value.

Baca Juga

Since the hidden field doesn't appear, you can simply change its position in the foreach to be right after the file input.

<?php 
$i=1;
$arrayName = array('1','2','3');
foreach ($arrayName as $key => $value) {?>
    <input type="file" name="slider[]"  class="fileupload onchangefield">
    <input type="hidden" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
    <img src="<?php echo $value;?>">
<?php $i++; } ?>

Solution 3:

Other way will be checking if the input which is change has class fileupload or not depending this you can change your selector and then change your value there.

Demo Code :

$(".onchangefield").change(function() {
  var selector = $(this).hasClass("fileupload") ? $(this).next().next() : $(this).next() //get next input..
  selector.val($(this).val() != "" ? 1 : 0) //depending on value change value of next
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="process.php" name="employee" method="post">

  <input type="text" name="name" class="onchangefield">
  <input type="text" name="haschange[name]" class="haschange" value="0" />
  <br/>
  <input type="file" name="slider[]" class="fileupload onchangefield">
  <img src="<?php echo $value;?>">
  <input type="text" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
  <br/>
  <input type="file" name="slider[]" class="fileupload onchangefield">
  <img src="<?php echo $value;?>">
  <input type="text" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
  <br/>
  <input type="file" name="slider[]" class="fileupload onchangefield">
  <img src="<?php echo $value;?>">
  <input type="text" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
  <br/>

</form>

JavaScript Sample

How To Change The Value Of The Hidden Field In The Foreach On Change Event?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Change The Value Of The Hidden Field In The Foreach On Change Event?"