Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Php

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

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.

<formaction="process.php"name="employee"method="post"><inputtype="text"name="name"class="onchangefield"><inputtype="hidden"name="haschange[name]"class="haschange"value="0" /><?php$i=1;
            $arrayName = array('1','2','3');
            foreach ($arrayNameas$key => $value) {?><divclass="dummy-wrapper"><inputtype="file"name="slider[]"class="fileupload onchangefield"><imgsrc="<?phpecho$value;?>"><inputtype="hidden"name="haschange[slider][<?phpecho$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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"referrerpolicy="no-referrer"></script></head><body><formaction="process.php"name="employee"method="post"><inputtype="text"name="name"class="onchangefield"><inputtype="hidden"name="haschange[name]"class="haschange"value="0" /><?php$i=1;
            $arrayName = array('1','2','3');
            foreach ($arrayNameas$key => $value) {?><divclass="dummy-wrapper"><inputtype="file"name="slider[]"class="fileupload onchangefield"><imgsrc="<?phpecho$value;?>"><inputtype="hidden"name="haschange[slider][<?phpecho$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 changeconsole.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>

enter image description here

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.

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 ($arrayNameas$key => $value) {?><inputtype="file"name="slider[]"class="fileupload onchangefield"><inputtype="hidden"name="haschange[slider][<?phpecho$i;?>]"class="haschange"value=""><imgsrc="<?phpecho$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
});
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><formaction="process.php"name="employee"method="post"><inputtype="text"name="name"class="onchangefield"><inputtype="text"name="haschange[name]"class="haschange"value="0" /><br/><inputtype="file"name="slider[]"class="fileupload onchangefield"><imgsrc="<?php echo $value;?>"><inputtype="text"name="haschange[slider][<?php echo $i;?>]"class="haschange"value=""><br/><inputtype="file"name="slider[]"class="fileupload onchangefield"><imgsrc="<?php echo $value;?>"><inputtype="text"name="haschange[slider][<?php echo $i;?>]"class="haschange"value=""><br/><inputtype="file"name="slider[]"class="fileupload onchangefield"><imgsrc="<?php echo $value;?>"><inputtype="text"name="haschange[slider][<?php echo $i;?>]"class="haschange"value=""><br/></form>

You may like these posts

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