CODEWITHSUNDEEP
javascriptform-submit
Red Swan
Red Swan

Reputation: 15545

Avoid page submission on button click if condition false in javascript

I am checking the textbox value in javascript. and saving to database. where as my save is of submit type. I want if textbox value is greater than 100 then it should alert. and after alert , page should not submit.

Upvotes: 2

Views: 5628

Answers (3)

Ali Shah Ahmed
Ali Shah Ahmed

Reputation: 3333

Firstly, bind the click event of that button to a function. Secondly, use event.prevent default to stop that button from submitting the form. Thirdly, validate the value you want. If validated, use form id to submit the form. Something like this:

$("#ButtonId").on("click", function(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;

    if ($("#InputBoxID").val() < 100) {
        $("#FormId").submit();
    }
    else {
        alert("your message");
    }
});

Above code is in jQuery, so do not forget to add the reference to jQuery.

Upvotes: 2

maqjav
maqjav

Reputation: 2434

Here you have an example of how to do it. I used a limit of 10 characters to make the test easier: Try if yourself

HTML:

<input type="text" id="myTextBox" onkeyup="checkValue(this)" maxlength="10"></input>
<input id="sendButton" type="submit" value="SEND"></inpu

JAVASCRIPT:

function checkValue(textbox) {
    if (textbox.value.length > 10) {
        alert("TEXT TOO LONG");
        document.getElementById("sendButton").disabled = true;
    }
    else
        document.getElementById("sendButton").disabled = false;        
}

Upvotes: 0

user6
user6

Reputation: 2043

I think you're looking for something like:

<form id="myForm" onsubmit="return validateForm();">
<input type="text" id="textfield"/>
<button type="submit">submit</button>
</form>
<script>
function validateForm(){
var value=parseInt(document.getElementById('textfield').value);
if(value>100){
alert('value is no good. larger then 100');
return false;
}
}
</script>

If you can show me your code I'd be happy to help you implementing such a feature.

Upvotes: 0

Related Questions