Using buttons as spinners for input elements with identical styles but unique identifiers

Question

Using buttons as spinners for input elements with identical styles but unique identifiers

Currently, I am in the process of developing a project that involves users. In order to display all users, I am executing a query on an SQL database. After styling the interface, I have added an input element beside each user, which initializes at zero. Additionally, there are two buttons - one for incrementing (#up) and another for decrementing (#down) the value displayed in the input element. Essentially, these buttons act as spinners. Moreover, I aim to set limits for the input element, with a minimum value of 5 and a maximum of 500.

Despite my attempts at implementing various 'onclick' functions, I have not been successful. While using 'GetElementById', it only alters the value of the input element for the first user due to the unique ID assigned to it. How can I rectify this issue?

I deeply appreciate any assistance provided. As a beginner, I welcome corrections if I have made any mistakes rather than receiving downvotes.

Below is the HTML code:

 <span class='username'>" . $row['username'] . "</span>
<form name='matchcreator' id='amount' action='arena.php' method='post'>
<input name='m-maker' type='text' id='price' maxlength='15' value='0'/>
<button id='up' type='button'><img src='images/up.png' width='10px' height='10px' href='#'></button>
<button id='down' type='button'><img src='images/down.png' width='10px' height='10px' href='#'></button>
</form>

javascript jquery html css

Answer 1

Answer №1

You have two options to customize the input controls: either follow David Cash's advice and utilize the HTML5 input element with spinners, or you can opt to eliminate the IDs from the up/down arrows and the input element itself. Here is an example of what that might look like:

Customized HTML

    <span class='username'>".$row['username']."</span>
    <form name='matchcreator' id='amount' action='arena.php' method='post'>
        <input name='m-maker' type='text' class='price' maxlength='15' value='0'/>
        <button class='up' type='button'><img src='images/up.png' width='10px' height='10px' href='#'></button>
        <button class='down' type='button'><img src='images/down.png' width='10px' height='10px' href='#'></button>
    </form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    $(function () {
    $(".up").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev();
        if (Number(input.val()) < 500) {
            input.val(Number(input.val()) + 1);
        }
        else { alert("max value reached"); }
    }); 
    $(".down").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev().prev();
        if (Number(input.val()) > 5) {
            input.val(Number(input.val()) - 1);
        }
        else { alert("min value reached"); }
    });
    }
</script>

Answer 2

You have two options to customize the input controls: either follow David Cash's advice and utilize the HTML5 input element with spinners, or you can opt to eliminate the IDs from the up/down arrows and the input element itself. Here is an example of what that might look like:

Customized HTML

    <span class='username'>".$row['username']."</span>
    <form name='matchcreator' id='amount' action='arena.php' method='post'>
        <input name='m-maker' type='text' class='price' maxlength='15' value='0'/>
        <button class='up' type='button'><img src='images/up.png' width='10px' height='10px' href='#'></button>
        <button class='down' type='button'><img src='images/down.png' width='10px' height='10px' href='#'></button>
    </form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    $(function () {
    $(".up").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev();
        if (Number(input.val()) < 500) {
            input.val(Number(input.val()) + 1);
        }
        else { alert("max value reached"); }
    }); 
    $(".down").on("click", function () {
        var trigger = $(this);
        var input = trigger.prev().prev();
        if (Number(input.val()) > 5) {
            input.val(Number(input.val()) - 1);
        }
        else { alert("min value reached"); }
    });
    }
</script>

Answer 3

Answer №2

Why not give simple HTML 5 a try for your input box?

<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">

By using this code, you can easily create an input box with spinners without the need for additional buttons to adjust the value.

Check out this example on Plunker

Answer 4

Why not give simple HTML 5 a try for your input box?

<input name ="m-maker" name="price" type="number" min="1" max="500" value="5">

By using this code, you can easily create an input box with spinners without the need for additional buttons to adjust the value.

Check out this example on Plunker

Answer 5

Answer №3

Here is a demonstration of the requested functionality using classes instead of IDs:

<form name='matchcreator' class='amount' action='arena.php' method ='post'>
    <input  name='m-maker' type='text' class='price' maxlength='15' value='0'/>
    <button class='up' type='button'><img src='images/up.png' width='10px' height='10px' href='#'></button>
    <button class='down' type='button' '><img src='images/down.png' width='10px' height='10px' href='#'></button>
</form>

Sample usage of jQuery:

$(".down").on("click", function() {
    var input = $(this).prev(".price");
    input.val(parseInt(input.val()) - 1);
});

$(".up").on("click", function() {
    var input = $(this).prev(".price");
    input.val(parseInt(input.val()) + 1);
});

Answer 6

Here is a demonstration of the requested functionality using classes instead of IDs:

<form name='matchcreator' class='amount' action='arena.php' method ='post'>
    <input  name='m-maker' type='text' class='price' maxlength='15' value='0'/>
    <button class='up' type='button'><img src='images/up.png' width='10px' height='10px' href='#'></button>
    <button class='down' type='button' '><img src='images/down.png' width='10px' height='10px' href='#'></button>
</form>

Sample usage of jQuery:

$(".down").on("click", function() {
    var input = $(this).prev(".price");
    input.val(parseInt(input.val()) - 1);
});

$(".up").on("click", function() {
    var input = $(this).prev(".price");
    input.val(parseInt(input.val()) + 1);
});

Using buttons as spinners for input elements with identical styles but unique identifiers

Answer №1

Customized HTML

Answer №2

Answer №3

Similar questions

Performing a multitude of if statements simultaneously consistently results in an undefined outcome after the sixth iteration

The getElementById function can only select one option at a time and cannot select multiple options

Is there a way to send a JSON object and a file to an ASP.NET server using the fetch method?

How can I set the text to be in the center of a VML

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

The css values for component _nghost-c0 in an Angular application

Discover the process of integrating PWA features into an Express web application

``Troubleshooting: Problem with Rails checkboxes and error-ridden fields

What is the best way to insert identical text into several lines at once using emacs?

Issues with login validation in HTML when utilizing JSON and PHP

Navigating external pages with Vue Router

The filter is displaying incorrect categories

What should I do to resolve the issue of ajax failing to update data randomly?

"Integrating Vuetify into a single-spa Vue application: Step-by-step

Enhancing your Vue web application with Bootstrap: A guide to customization

What is the method for configuring the asp-for input tag helper to create camelCase names?

Inserting information into a MySQL database using a dynamic jQuery-generated form

What is the sequence in which the browser handles CSS?

Issue with Node's jsonwebtoken library: jwt.sign() method fails to include payload in generated token

Employing negative margin to connect div1 to the left side of div2