Automatically increment input type="hidden" value

Question

I have this line of code

        <html>
        <head></head>
        <body>
        <script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","hidden");
var r = $("#id2").val()+1;
$("#id2").val(r);
});
});
</script>
        <title>CV Education Form</title>
       .
       .
       .
       .
        </fieldset>
        <input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
        <input type="submit" value="Update" name="submit"/>
        </form>
        </body>
        </html>

and I want to change it to hidden so it is invisble but also when i click on a button update (which I have it) then it increments the value ($id) ... More simple i want something like that id+1.

Do you know how can I do that?

enter image description here

When I click on update button i want the 1 which is the $id to become $id+1 but I dont want to add myself I want to do it automatically when i click the update button and also hide the textfield

Have you tried anything or even searched for this I am sure you can find this easily. — Shub
– Shub, Commented Jan 13, 2015 at 8:43
Maybe i am searching on the wrong way . For example i am searching this "how can I auto increment the value of an input type="hidden"". Maybe it is wrong , can you suggest me another way to search it — Waaaaat
– Waaaaat, Commented Jan 13, 2015 at 8:45
yupp u are searing in the wrong way search for changing input type separately and incrementing separately and u will definetly get your answer. — Shub
– Shub, Commented Jan 13, 2015 at 8:51

Utkarsh Dixit · Accepted Answer · 2015-01-13 09:18:10Z

1

Just specify the update button id and id of the inputs. Use the code below

     <html>
        <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
        <body>
        <script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","none");
var r = parseInt($("#id2").val(),10)+1;
$("#id2").val(r);
});
});

</script>
        <title>CV Education Form</title>
       .
       .
       .
       .
        </fieldset>
        <input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
        <input type="submit" value="Update" id="update" name="submit"/>
        </form>
        </body>
        </html>

Check it here http://jsfiddle.net/53cov3uq/3/

Hope this helps you

edited Jan 13, 2015 at 9:18

answered Jan 13, 2015 at 8:56

Utkarsh Dixit

4,2853 gold badges18 silver badges42 bronze badges

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

8 Comments

Waaaaat Over a year ago

the script tag should i place them in the php tags and also the type I want to be hidden and be incremented when i click on update button

Utkarsh Dixit Over a year ago

The code above is doing all the task that you mentioned.

Waaaaat Over a year ago

where should i place the script tags in the php tags or in the html tags ?

Utkarsh Dixit Over a year ago

Place them in html tags

Utkarsh Dixit Over a year ago

Hey listen replace #update in $("#update") with your update button od

|

Ragini Gurram · Accepted Answer · 2015-01-13 09:28:14Z

1

you can do it very simply using either Jquery or JavaScript .find the code below

function update()
{
  var count=parseInt($('#counter').val());
  $('#counter').val(count+1);
  alert($('#counter').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="hidden" id="counter" name="id" value="0"/>
<button onclick="update()">update</button>

i just kept alert at the end that will popup the current value of the id.

answered Jan 13, 2015 at 9:28

Ragini Gurram

513 bronze badges

Comments

Mohammed Safeer · Accepted Answer · 2015-01-14 04:36:42Z

1

try this,

<script type="text/javascript">
function increment_val(){
   var id_val = parseInt(document.getElementById('id').value);
   id_val++;
   document.getElementById('id').value=id_val;
}
</script>

and in button html call js function,

<input type="button" value="update" id="btn_id" onclick="increment_val();"/>

edited Jan 14, 2015 at 4:36

answered Jan 13, 2015 at 8:50

Mohammed Safeer

21.6k8 gold badges79 silver badges81 bronze badges

2 Comments

Waaaaat Over a year ago

I edited my question can you please be more specific where should i place it

Mohammed Safeer Over a year ago

i assumed you didn't used jQuery. Place the Code inside <script> tag in head or after body. Use this button for update

Ján Stibila · Accepted Answer · 2015-01-13 08:52:48Z

0

For that use javascript. Php is server-side script.

<script type="text/javascript">
  function increment()
  {
    var elem = document.getElementById("hiddenElement");
    elem.value = 1 + parseInt(elem.value);
  }
</script>
<input type="hidden" id="hiddenElement" name="id" value="0" />
<button onclick="increment()">Click me</button>

answered Jan 13, 2015 at 8:52

Ján Stibila

6373 silver badges13 bronze badges

Comments

Madhura KM · Accepted Answer · 2015-01-13 08:53:21Z

0

You can use below code which increments the value on click of a button.

<button onclick="document.getElementById('id').value = document.getElementById('id').value + 1;">Update</button>

answered Jan 13, 2015 at 8:53

Madhura KM

1401 silver badge10 bronze badges

Comments

Shub · Accepted Answer · 2015-01-13 08:55:53Z

0

HTML

<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />

To change input type you can use the syntax like:

$("#id").attr('type','hidden');

To increment the value use

document.getElementById('id').value=parseInt(document.getElementById('id').value)+1;

or using jquery

$("#id").val($("#id").val()+1);

Hope it helps.

answered Jan 13, 2015 at 8:55

Shub

2,72420 silver badges26 bronze badges

Comments

Saurabh Misra · Accepted Answer · 2015-01-13 08:58:18Z

0

try this if you want to change text to hidden element and increment value

HTML Code:

<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
<button onclick="increment_value()">Update</button>

JS:

function increment_value()
{
    var txt_field = document.getElementsByName("id")[0];
    txt_field.value = parseInt(txt_field.value) + 1;
    txt_field.setAttribute("type", "hidden");
}

OR

If you want to simply hide the text field just use this version of the above function

function increment_value()
{
    var txt_field = document.getElementsByName("id")[0];
    txt_field.value = parseInt(txt_field.value) + 1;
    txt_field.style.display = "none";
}

answered Jan 13, 2015 at 8:58

Saurabh Misra

5591 gold badge7 silver badges17 bronze badges

Comments

JNF · Accepted Answer · 2015-01-13 08:45:37Z

-1

<input type="hidden" name="id" id="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />

Jquery

$(function(){
  $("button").click(function(){
    $("#id").val($("#id").val()+1);
  })
})

answered Jan 13, 2015 at 8:45

JNF

3,7403 gold badges35 silver badges65 bronze badges

2 Comments

Shub Over a year ago

OP wants to change input type to hidden on an event.

Waaaaat Over a year ago

I will update my question with a print screen check in a min.

Collectives™ on Stack Overflow

Automatically increment input type="hidden" value

8 Answers 8

8 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

8 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related