Stop form submission when using JavaScript
0
I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the cnic number is less than 15.
<script>
function validateform()
{
var cnic1 = document.getElementById("cnic1").value;
if (cnic1.length < 15)
{
window.alert("Invalid CNIC");
cnic1.focus();
return false;
}
}
</script>
<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">
<div class="row">
<div class="input-field col s1"></div>
<div class="input-field col s4"><label>CNIC No. </label>
<font style="color: #ff0000">*</font>
</div>
<div class="input-field col s6">
<input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
</div>
</div>
</form>
Is there issue in php submission code write on tabs.php page that's why form still submitting process?
javascript
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
add a comment |
0
I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the cnic number is less than 15.
<script>
function validateform()
{
var cnic1 = document.getElementById("cnic1").value;
if (cnic1.length < 15)
{
window.alert("Invalid CNIC");
cnic1.focus();
return false;
}
}
</script>
<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">
<div class="row">
<div class="input-field col s1"></div>
<div class="input-field col s4"><label>CNIC No. </label>
<font style="color: #ff0000">*</font>
</div>
<div class="input-field col s6">
<input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
</div>
</div>
</form>
Is there issue in php submission code write on tabs.php page that's why form still submitting process?
javascript
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
add a comment |
0
0
0
I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the cnic number is less than 15.
<script>
function validateform()
{
var cnic1 = document.getElementById("cnic1").value;
if (cnic1.length < 15)
{
window.alert("Invalid CNIC");
cnic1.focus();
return false;
}
}
</script>
<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">
<div class="row">
<div class="input-field col s1"></div>
<div class="input-field col s4"><label>CNIC No. </label>
<font style="color: #ff0000">*</font>
</div>
<div class="input-field col s6">
<input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
</div>
</div>
</form>
Is there issue in php submission code write on tabs.php page that's why form still submitting process?
javascript
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the cnic number is less than 15.
<script>
function validateform()
{
var cnic1 = document.getElementById("cnic1").value;
if (cnic1.length < 15)
{
window.alert("Invalid CNIC");
cnic1.focus();
return false;
}
}
</script>
<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">
<div class="row">
<div class="input-field col s1"></div>
<div class="input-field col s4"><label>CNIC No. </label>
<font style="color: #ff0000">*</font>
</div>
<div class="input-field col s6">
<input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
</div>
</div>
</form>
Is there issue in php submission code write on tabs.php page that's why form still submitting process?
javascript
javascript
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
edited Nov 15 '18 at 10:12
Marco Bonelli
23.5k116373
23.5k116373
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
asked Nov 15 '18 at 8:03
Ahil KhanAhil Khan
226
226
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
add a comment |
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08
add a comment |
3 Answers
3
active
oldest
votes
2
You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
When selecting only a single element, I'd preferquerySelector, rather than use a method that returns a collection and proceed to select the first element in the collection
– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
|
show 9 more comments
0
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
add a comment |
-1
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314836%2fstop-form-submission-when-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
When selecting only a single element, I'd preferquerySelector, rather than use a method that returns a collection and proceed to select the first element in the collection
– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
|
show 9 more comments
2
You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
When selecting only a single element, I'd preferquerySelector, rather than use a method that returns a collection and proceed to select the first element in the collection
– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
|
show 9 more comments
2
2
2
You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
You don't have to return false to stop the form from being submitted. You need to use the event's preventDefault() method, and submit the form using JS if the data is valid. Like this:
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
I also added the listener using JS just so you can be sure the event parameter is passed to your validation function. Remove the onsubmit="..." from your form.
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
edited Nov 15 '18 at 10:10
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
answered Nov 15 '18 at 8:06
Marco BonelliMarco Bonelli
23.5k116373
23.5k116373
When selecting only a single element, I'd preferquerySelector, rather than use a method that returns a collection and proceed to select the first element in the collection
– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
|
show 9 more comments
When selecting only a single element, I'd preferquerySelector, rather than use a method that returns a collection and proceed to select the first element in the collection
– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
When selecting only a single element, I'd prefer
querySelector, rather than use a method that returns a collection and proceed to select the first element in the collection– CertainPerformance
Nov 15 '18 at 8:10
When selecting only a single element, I'd prefer
querySelector, rather than use a method that returns a collection and proceed to select the first element in the collection– CertainPerformance
Nov 15 '18 at 8:10
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
@CertainPerformance It's the same, and using querySelector is slower and more complicated to write if matching a name.
– Marco Bonelli
Nov 15 '18 at 8:12
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
Form is still submitting if CNIC number is less than 15
– Ahil Khan
Nov 15 '18 at 8:14
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
@AhilKhan did you use JS to add the event listener and removed the onsubmit="..." from the HTML?
– Marco Bonelli
Nov 15 '18 at 8:23
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
where add the event listener line in js code??
– Ahil Khan
Nov 15 '18 at 8:48
|
show 9 more comments
0
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
add a comment |
0
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
add a comment |
0
0
0
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
Call the js function from onchange = "" event, or use any button and call click event. Your js function will work.
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
answered Nov 15 '18 at 8:31
Arnab BanerjeeArnab Banerjee
112
112
add a comment |
add a comment |
-1
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
add a comment |
-1
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
add a comment |
-1
-1
-1
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
return false;
or
event.preventDefault();
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
edited Nov 15 '18 at 9:36
splattne
83.8k45194241
83.8k45194241
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
answered Nov 15 '18 at 8:13
zhe niuzhe niu
1
1
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314836%2fstop-form-submission-when-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use e.stopPropagation(); w3schools.com/jquery/event_stoppropagation.asp
– son pham
Nov 15 '18 at 8:08