Home/ Questions/Q 6248983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T13:09:23+00:00

I have tried a lot on this code but it keeps messing up. The

  • 0

I have tried a lot on this code but it keeps messing up. The problems:

  • when you click on the +/- 2 is added/subtracted instead of one; the method is called twice for some reason
  • when you click submit, the +/- functionality simply doesn’t work anymore

I cannot find the problem and before I submit a bug to jquery-mobile, I would first like to know if i’m not doing something very stupid.

When I remove the jquery-mobile .js file, everything works perfectly fine, but with it doesn’t work.

After submit the url show the #bang in the url and when that’s there, it stops working.

Code: 

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="content">
<form method="post"> 
<a id="minus" href="#">-</a> 
<input type="text" id="value" name="days" value="1" /> 
<a id="plus" href="#">+</a> 
<script> 
$('#home').live('pagecreate',function(event){

    var valueElement = $('#value');
    function incrementValue(e){
        valueElement.val(Math.max(parseInt(valueElement.val()) + e.data.increment, 0));
        return false;
        }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

    });
</script> 
<input type="submit" value="submit" />
</div></div> 
</form></body></html>

Edit: changed it to match the mobile framework better, with the below comments added into there. Fixes problem one; the double calling of the method, however the second problem; after submit it stops working.

Phill’s answer works and strangely enough it works always like this; 

                                      var inputs = $("input[type='text']");

                                        for(i=0;i<inputs.length;i++) {
                                                if (inputs[i].getAttribute("id") == "value") {
                                                        inputs[i].value = currentValue;
                                                }
                                        }

If I directory select the element, it doesn’t work after submit; does anyone know the explanation of that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working Example:

    JS:

    var currentValue=1;

$("#minus, #plus").click(function(){
    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
    $('#value').val(currentValue);
});

    HTML:

    <div data-role="page" id="home"> 
    <div data-role="content">
        <a id="minus" href="#">-</a> 
        <input type="text" id="value" name="days" value="1" /> 
        <a id="plus" href="#">+</a>
    </div>
</div>

    UPDATE #2

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Increment</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $('#home').live('pagecreate',function(event) { 
                var currentValue=1;
                $("#minus, #plus").click(function() {
                    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
                    $('input:text[id=value]').val(currentValue);
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <form id="theForm" method="post">
                    <a id="minus" href="#" data-role="button" data-inline="true">-</a>                    
                    <a id="plus" href="#" data-role="button" data-inline="true">+</a>
                    <br />
                    <input type="text" id="value" name="days" value="1" />
                    <input type="text" id="newvalue" name="days" value="100" />

                    <input type="submit" value="submit" />
                </form>
            </div>
        </div>

    </body>
</html>
    • 0