Update a variable if hidden input was changed

Question

First of all i have a hidden input

<input type="hidden" id="hiddeninp" value="0">

When i click on this div, value of hidden input need to changed. (example to 1)

<div id="inputvalue">change input value to 1</div>

I have 2 extra div (display none)

<div style="display:none" id ="div0">div 1</div>
<div style="display:none" id ="div1">div 2</div>

Now, when i click on <div id="inputvalue"></div> hidden input value must to change in 1.

$("#inputvalue").click(function() {
  $("#hiddeninp").val(1);
});

After hidden input value was changed, i what to display <div id ="div1"></div> and hide <div id ="div0"></div> (and vice versa when hidden input value is 0)

var myvar = $("#hiddeninp").val();

if (myvar == 0) {
  $("#div1").hide();
  $("#div0").show();
} else {
  $("#div0").hide();
  $("#div1").show();
}

https://jsfiddle.net/e8a3ewj0/5/

You have to place the if statements with the hide and show in the click event function. Because right now it only executes the if statements when the page is rendered. When you place it in the click event function, the code gets executed each time you click the div. This is necessary because you have to check the value after it is changed. — Roberto Geuke
– Roberto Geuke, Commented Jan 10, 2017 at 11:37

Roberto Geuke · Accepted Answer · 2017-01-10 11:39:11Z

1

I've put my answer here as an answer instead of a comment so I can show you how the code will look like.

You have to place the if statements with the hide and show in the click event function. Because right now it only executes the if statements when the page is rendered. When you place it in the click event function, the code gets executed each time you click the div. This is necessary because you have to check the value after it is changed.

Your code will become this

    $("#inputvalue").click(function() {
        $("#hiddeninp").val(1);

        var myvar = $("#hiddeninp").val();

        if (myvar == 0) {
          $("#div1").hide();
          $("#div0").show();
        } else {

          $("#div0").hide();
          $("#div1").show();
        }
    });

answered Jan 10, 2017 at 11:39

Roberto Geuke

5525 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2017-01-10 11:52:52Z

1

However, you have to do the toggle just after when you change the value. Like if you make a function then you can call it just after changing the value.

You can use:

function doToggle(){
    var i = $("#hiddeninp").val();
    $('div[id^="div"]').hide(); // or add a common class="foo" = $('.foo').hide()
    $('#div'+i).show();
}

$("#inputvalue").click(function() {
    $("#hiddeninp").val(1);
    doToggle();
});

Or this one but not recomended:

$(document).on('click', function(e){
   var i       = $("#hiddeninp").val(),
       isinput = $(e.target).is('#inputvalue') || $(e.target).parent().is('#inputvalue');
   $('#div0').toggle(isinput && i == 0);
   $('#div1').toggle(isinput && i == 1);
});

edited Jan 10, 2017 at 11:52

answered Jan 10, 2017 at 11:39

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Z-Bone · Accepted Answer · 2017-01-10 11:43:28Z

Try putting the action of checking the input value, in a separate function and call itr onload and on every click.

Here try this:

$("#inputvalue").click(function() {
  if  ($("#hiddeninp").val() == 1) {
    $("#hiddeninp").val(0);
    $("#inputvalue").text("change input value to 1");
  } else {
    $("#hiddeninp").val(1);
    $("#inputvalue").text("change input value to 0");
  }
  checkStatus();
 
});


var checkStatus = function() {
  var myvar = $("#hiddeninp").val();
  if (myvar == 0) {
    $("#div1").hide();
    $("#div0").show();
  } else {
    $("#div0").hide();
    $("#div1").show();
  }
}

checkStatus();

div#inputvalue {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="hiddeninp" value="0">


<div id="inputvalue">change input value to 1</div>


<div style="display:none" id ="div0">div 1</div>
<div style="display:none" id ="div1">div 2</div>

Collectives™ on Stack Overflow

Update a variable if hidden input was changed

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related