Html Question posted in
Some basic documentation can be found here.

Html – Ajax is preventing input type number min attribute

function Min(ID) {
    $Number = document.getElementById(ID);
    if ($Number.value < 1 && $Number.value !== "") {
        $Number.value = 1;
    }
}

echo '
<form id="' . $Item2 . '">
    <input type="image" src="AddToCart.png" style="margin:5px; float:left; font-size:25px;" width="65px" height="33" id="' . $EAN2 . '"
    onmouseup="KeyUp(this.id)" onmousedown="Click(this.id)"/>
    <input type="number" id = "' . $Image .'" name = "Amount" min="1" onKeyUp="Min(this.id)">
    <input type="text" name = "ID" value="' . $Item . '" readonly style="display: none;">
    <input type="text" name = "Cost" value="' . $Cost . '" readonly style="display: none;">
    <input type="text" name = "Kom" value="' . $Kom . '" readonly style="display: none;">
    <input type="text" name = "EAN" value="' . $EAN . '" readonly style="display: none;">
    <input type="text" name = "Type" value="Food/Slatko" readonly style="display: none;">
    <input type="text" name = "Image" value="' . $Image . '" readonly style="display: none;">
    <input type="text" name = "Account" value="' . $_SESSION["Account"] . '" readonly style="display: none;">
</form>';

<script>
echo "
<script>
$('#" . $EAN2 . "').on('click',function(event){
    event.preventDefault()
    $.ajax({
        type: 'get',
        url: 'ItemProcessor.php',
        data: $('#" . $Item2 . "').serialize(),
    })
})
</script>";

I have this form here. It normally stops the user from inputting less than 1 into the input, but because of the ajax code it sends it regardless.

I have tried adding a function onkeyup that checks the value and sets it to 1 if it’s lower than it, but the user can press the image while not releasing the key to still have a negative number.

Tags:

2

Answers


  1. 0

    I would suggest just adding the validation before the .ajax call. It will validate it regardless of the event:

    $('#" . $EAN2 . "').on('click', function(event) {
event.preventDefault();
const amountInput = $('#" . $Image . "');

// Validate that the amount is at least 1
if (parseInt(amountInput.val()) < 1 || amountInput.val() === '') {
    amountInput.val(1); // Set it to 1 if it's less than 1 or empty
    alert('Amount must be at least 1.');
    return; // Stop the form from submitting
}

$.ajax({
    type: 'get',
    url: 'ItemProcessor.php',
    data: $('#" . $Item2 . "').serialize(),
    success: function(response) {
        console.log('Form submitted successfully:', response);
        // Additional handling for the response can be added here if needed
    },
    error: function(xhr, status, error) {
        console.error('Form submission failed:', error);
    }
});
});
    Login or Signup to reply.
  2. 0

    Instead of keyup, i would use input since it check as soon as an input is detected :

    <input type="number" id = "' . $Image .'" name = "Amount" min="1" oninput="Min(this.id)">

    But in any case you should check the value again in ItemProcessor.php and not spend too much time on the front side, as there are lot of ways to go through a JS or HTML restriction (you’re sending data with Ajax, using GET method, it would be really simple)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search