Javascript Function is not Called onclick() and onsubmit() - javascript

Can anyone tell me why below javascript functions are not calling while clicking the button or submitting the form.
I am not getting wht is the wrong with this code. Please help
<script type="text/javascript">
function confrm()
{
alert("check1");
if(confirm("Are you going to submit this form?")==true)
{
return true;
}
else
{
return false;
}
}
function checkfrm()
{
var selcteddate=document.newrequest.sel.value;
var sdate=new Date(selcteddate);
alert("check 2");
if(document.newrequest.server.value=="select")
{
alert("Select server");
return false;
}
else
{
return true;
}
}
</script>
<form id="newrequest" name="newrequest" method=post action="cgi-bin/newrequest.cgi" onsubmit="return checkfrm();">
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Submit" onclick="return confrm();" />
</td>

You can do it without return. Try this :
<script type="text/javascript">
function confrm(){
alert("check1");
if(confirm("Are you going to submit this form?")==true) {
document.getElementById("newrequest").submit();
}else{
return false;
}
}
</script>
<form id="newrequest" name="newrequest" method="post" action="cgi-bin/newrequest.cgi" onsubmit="checkfrm();">
<td colspan=2>
<input value="Submit" type="input" onclick="confrm();" />
</td>
You can find the guide for onclick event on
http://www.w3schools.com/jsref/event_onclick.asp
and Submit guide on
http://www.w3schools.com/jsref/met_form_submit.asp

Related

How to validate input file type onclick submit using jquery?

In this code I simply want to validate pancard_img. What happens right now if pancard image not empty then it again shows me 'Pancard image should not be empty. If pancard_img have a value. How can I fix this one?
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
if (("#pancard").val() == '') {
$("#err_pan").html("Pancard should not be empty");
} else if (("#pancard_img").val() == '') {
$("#err_pan_img").html("Pancard image should not be empty");
} else {
alert("successful");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="text" name="pancard" id="pancard" />
<div id="err_pan"></div>
<input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" />
<div id="err_pan_img"></div>
<input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" />
</form>
There are few Syntactical mistakes in your code like,
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
if ($("#pancard").val() == '') { // add $
$("#err_pan").html("Pancard image should not be empty");
} else if($("#pancard_img").val() == '') { // add $
$("#err_pan_img").html("Pancard image should not be empty");
} else {
alert("successful"); // You can use alert, echo is for php
}
});
});
Remove the echo from the submit handler and move the e.preventDefault() inside the conditions, so that it doesn't block the form from submitting, when the input has value.
Also you forgot to use $ when selecting the element.
$(document).ready(function() {
$("#submit").click(function(e) {
if ($("#pancard").val() == '') {
e.preventDefault();
$("#err_pan").html("Pancard image should not be empty");
} else if ($("#pancard_img").val() == '') {
e.preventDefault();
$("#err_pan_img").html("Pancard image should not be empty");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="text" name="pancard" id="pancard" />
<div id="err_pan"></div>
<input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" />
<div id="err_pan_img"></div>
<input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" />
</form>

return false but submit

i try two way to solve this problem
<form method="post">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit" onclick="return check();">subscribe</button>
</form>
and other way is
<form method="post" onsubmit="return check();">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
my js is
function check() {
var email = document.getElementById("testId").value;
var exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email)==false){
alert("error");
document.addjoin.email.focus();
return false;
}else{
alert("complete");
return true;
}
}
alert show "error" but submit wrong email.
What did I do wrong?
<form method="post" id="form">
<input type="text" id="testId" name="testId" placeholder="Email" />
<button id="btnValidate" type="submit">subscribe</button>
</form>
<script>
let form = document.querySelector('#form');
form.addEventListener('submit', function(e) {
e.preventDefault();
check();
});
</script>
<script>
function check() {
let email = document.getElementById("testId").value;
let exptext = /^[A-Za-z0-9_\.\-]+#[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(email) === false){
alert("error");
document.addjoin.email.focus();
return false;
} else {
alert("complete");
return true;
}
}
</script>
This should work
You just need to remove the onclick="return check();"
Then you just need to add document.getElementById("btnValidate").onclick = check; to your js and it would work

Javascript form validation alert

Here is the HTML
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit"/>
The javascript
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
What I am trying to do is get the thank you alert to show only if all fields are filled out. Currently, the form catches the missing input but still alerts the thank you message.
Please try this :
function IsEmpty() {
if (document.forms['form'].name.value == "") {
alert("empty");
return false;
}
alert('Thank You, Your order is being processed');
return true;
}
DEMO
Try this
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
<form name="form" action="">
<input name="name" />
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit" />
</form>

How to resolve this conflict with jQuery

Can anyone please help me resolve this conflict with my javascript validation?
The form does not submit. But if I remove onsubmit="return btnSubmitPD_OnClick() it redirect the form correctly. But of course I need that function.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Submit').click(function() {
var emailVal = $('#email').val();
$.post('checkemail.php', {'email' : emailVal}, function(data) {
if(data=='exist') {
alert('in'); return false;
}else{
$('#form1').submit();
}
});
});});
</script>
<script type="text/javascript">
function appIsEmail(str){
var at="#";
var dot=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);
if (str.indexOf(at)==-1) return false;
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr) return false;
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr) return false;
if (str.indexOf(at,(lat+1))!=-1) return false;
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot) return false;
if (str.indexOf(dot,(lat+2))==-1) return false;
if (str.indexOf(" ")!=-1) return false;
return true;
}
function btnSubmitPD_OnClick(){
frmReg = document.getElementById("form1");
if (!appIsEmail(frmReg.email.value)){
alert("Please enter a valid email address!");
frmReg.email.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="view.php" onsubmit="return btnSubmitPD_OnClick()">
<p>
<input type="text" name="email" id="email" />
</p>
<p>
<input type="button" name="Submit" id="Submit" value="Submit" />
</p>
</form>
</body>
</html>
Several Things:
It is better to bind a submit event to your form, rather than a click event on your submit button, this is to cater for cases where users press enter on the email text field:
$('#form1').submit(function() { // change from $('#Submit').click
Then inside the new submit handler, you call call the email validation method:
var emailVal = $('#email').val();
if(btnSubmitPD_OnClick() === false) return false;
Then, to avoid infinite submit loop, you need to change:
else{
$('#form1').submit();
}
to
else{
$('#form1')[0].submit(); // native submit on form element
}
Or as mplungjan noted in his comment, simply change your
<input type="button" name="Submit" id="Submit" value="Submit" />
To use type="submit"
<input type="submit" name="Submit" id="Submit" value="Submit" />
And add
if(btnSubmitPD_OnClick() === false) return false;
Before your call to $.post

alert box not working in jsp

I added a stylish alert box to my page, resource is here . But problem is after clicking ok, confirmsubmit.jsp is not opening. Also in that alert cancel button is not appearing why?
javascript
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = csscody.alert("Confirm submit?")// added csscody here for alert but after clicking ok nothing happens
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;// here cancel button is not coming
}
}
//-->
</script>
</form>
html
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
UPDATE
View below code ,it uses button instead of link
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "si o no compa?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
<input type="text" name="textboxname"/>
<input type="submit" id="btn_submit" onclick="return confirmation()"/>
</form>
You willl have to use confirm instead of alert which will giv eyou both ok and cancel buttons which return true and false respectively. And also take off return from onclick
HTML
<form action = "confirmsubmit.jsp" method = "POST">
<input type = "text" name = "textboxname" />
<input type = "submit" onclick = "confirmation();" />
</form>
Javascript
function confirmation() {
var answer = confirm("Confirm submit?");
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
}

Categories

Resources