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

Tips for implementing both an onChange and onSubmit event for a MUI TextField

Tips for implementing filters in Angular2 without using the package field in the console

Strategies for positioning identical Highcharts series next to one another

Switch the view to a grid layout upon clicking

Using Google Chart API to create stacked bar charts with annotations using symbols

Generating dynamic @returns annotations in JSDoc based on the value of @param

Retrieve a div element using Ajax from the result of an If statement

Supply a variety of values to jQuery

Steps to customize a CSS file within node_modules

Transferring items between different containers without using innerHTML

What is the method for displaying a div adjacent to a password input field?

Using an xmlhttprequest to retrieve a PDF file functions properly in synchronous mode, but encounters issues in

VueJS component fails to remain anchored at the bottom of the page while scrolling

Insert a gap between the two columns to create some breathing room

Error message: Angular 7 - Running out of memory due to JavaScript heap

Tips for postponing the first button event in Vue 3 and JavaScript

Preventing memory leaks by harnessing the power of Node Streams and promises

Exploring the Jquery functionality: $(document).ready(callback);

Display a specific value from a dropdown using jQuery

Create a Jest unit test for a specific function