Javascript confirm box - javascript

i try to use confirm box but it does not work after 'OK' pressing
this is my confirm box
<script language="JavaScript">
{literal}
function confirmBox()
{
var where_to= confirm("Silmek istediğinizden emin misiniz?");
if (where_to== true)
return true;
else{
alert("Silme işleminden vazgeçtiniz yönlendiriliyorsunuz");
return false;
}
}
{/literal}
</script>
<form name="removeFortune" method="post" action="#">
<table border="0" name="tableArticle">
{foreach from=$articles value=article}
<tr>
<td><input type="checkbox" name="checkArticle[]" value="{$article.id}" /></td>
<td>{$article.title}</td>
</tr>
{/foreach}
</table>
<input type="submit" onclick="confirmBox()" name="removeArticle" value="Sil" />
<br /><br />
{$deleteMessage}
</form>

If you want it to submit after pressing OK, you need to change 1 simple thing. Add a return
onclick="return confirmBox()"
Although I would say:
onsubmit="return confirmBox()"

Related

Javascript Form Validation, multiple functions on a single button not working correctly

I'm working on a form validation project that requires multiple input fields connected to a single submit button. I more or less figured the button out, but I'm having an issue getting the functions themselves to work properly. I currently only have three of the eleven fields typed up for testing, but what the page should do is let you know which fields are invalid when there is nothing filled out in them (changing text/background colors, message below, etc).
The issue I'm having is that when the requirements for the first field (Gift Card Number) are met, it acts as though there isn't any issues anywhere, regardless of whether or not the other input fields (First name, Last name) have been filled. They all seem to function correctly if none of the fields are filled, but my concern is that the functions seem to be firing in order and first one to work negates all the ones after (for example, Gift Card prevents First and Last, First prevents Last, etc).
Any ideas where I've gone wrong here? I'll include my html and my javascript. (Yes, I know the html is a bit ugly, I plan to move the material over to a div table later, just trying to get it to function for now) Any help appreciated as always!
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<table>
<tbody>
<tr id="rONE">
<td><h4>Gift Card Amount</h4>
<form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
<input type="text" name="giftInput">
<h5 id="giftMessage"></h5></td>
<input type="submit" value="Submit" style="display:none" />
<td></td>
</tr>
</form>
<tr id="rTWO-1">
<td><h4>Recipient's name</h4>
</td>
<td> </td>
</tr>
<tr id="rTWO-2">
<td>
<form name="firstForm" onsubmit="return validateRecipient()" method="post">
<input type="text" name="firstInput">
<br>
<h4>First</h4>
</form>
</td>
<td><form name="lastForm" method="post">
<input type="text" name="lastInput">
<br>
<h4>Last</h4></td>
</form>
</tr>
<tr>
<td><h5 id="recipientMessage"></h5></td></td>
<td> </td>
</tr>
</tbody>
</table>
<button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>
</body>
<footer>
<script src="Form Validation.js"></script>
</footer>
</html>
Javascript
document.getElementById('btn').addEventListener('click', function(){
validateGiftCard();
validateRecipient();
});
function validateGiftCard() {
valid = true;
if ( document.giftForm.giftInput.value == "" )
{
giftMessage.innerHTML = "This field is required";
document.getElementById("rONE").style.backgroundColor="#fff7f7"
valid = false;
}
return valid;
}
function validateRecipient() {
valid = true;
if ( document.firstForm.firstInput.value == "" )
{
recipientMessage.innerHTML = "This field is required";
document.getElementById("rTWO-1").style.backgroundColor="#fff7f7"
document.getElementById("rTWO-2").style.backgroundColor="#fff7f7"
valid = false;
}
return valid;
}
document.getElementById('btn').addEventListener('click', function(e) {
var v1 = validateGiftCard();
var v2 = validateRecipient();
console.log(v1, v2);
if (!v1 || !v2)
e.preventDefault();
});
function validateGiftCard() {
valid = true;
if (document.giftForm.giftInput.value == "") {
giftMessage.innerHTML = "This field is required";
document.getElementById("rONE").style.backgroundColor = "#fff7f7"
valid = false;
}
return valid;
}
function validateRecipient() {
valid = true;
if (document.firstForm.firstInput.value == "") {
recipientMessage.innerHTML = "This field is required";
document.getElementById("rTWO-1").style.backgroundColor = "#fff7f7"
document.getElementById("rTWO-2").style.backgroundColor = "#fff7f7"
valid = false;
}
return valid;
}
<table>
<tbody>
<tr id="rONE">
<td>
<h4>Gift Card Amount</h4>
<form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
<input type="text" name="giftInput">
<h5 id="giftMessage"></h5>
</form>
</td>
<input type="submit" value="Submit" style="display:none" />
<td></td>
</tr>
<tr id="rTWO-1">
<td>
<h4>Recipient's name</h4>
</td>
<td> </td>
</tr>
<tr id="rTWO-2">
<td>
<form name="firstForm" onsubmit="return validateRecipient()" method="post">
<input type="text" name="firstInput">
<br>
<h4>First</h4>
</form>
</td>
<td>
<form name="lastForm" method="post">
<input type="text" name="lastInput">
<br>
<h4>Last</h4>
</form>
</td>
</tr>
<tr>
<td>
<h5 id="recipientMessage"></h5>
</td>
<td> </td>
</tr>
</tbody>
</table>
<button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>

javascript validation empty field with error messages

Can any one please tell me the wrong of this code, I just want to j=give an error message when the first_name is empty.
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name==="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
HTML
<form name="myForm" action="../controller/users.php" method="POST"
enctype="multipart/form-data" >
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
First of all i need to know whether you downloaded jquery file from ,if not do it first.. else jquery wont work.. follow this link http://code.jquery.com/jquery-1.11.1.min.js, save this file in the folder where is your code is...name of the file i used is 'jquery-1.11.1.min.js'
then there was some more mistakes in your code. you need to give a submit button first with the id 'submit', which you used in your script's 3rd line, then need to close form tag..
correct code is..
<html><script src="jquery-1.11.1.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name=="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
<body>
<form name="myForm" action="../controller/users.php" method="POST" enctype="multipart/form-data">
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>
try to learn basics first.. Accept my answer if it helps.. :)

Check box validation code?

I am experimenting with a form that has a text field and a check box. I am a designer and not a developer. I have successfully gotten the text box to Validate, but I have pasted in code for the checkbox, which for some reason either cancels out the validation or returns an error at the paypal server. Can anyone suggest a few lines of code to validate the checkbox "terms"? The textbox is called "os0"
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="myForm" onSubmit="return validateForm()" >
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="AXNKKDCZLVHM4">
<table width="100%" border="0">
<tr>
<th scope="row"><input type="hidden" name="on0" value="Your RCEH Account Number:" />
Your RCEH Account Number:
</th>
<td>
<input type="text" name="os0" maxlength="200" />
</td>
</tr>
<tr>
<th scope="row"> </th>
<td><label>
<input type="checkbox" name="terms" id="terms" />
Agree to terms and conditions</label>
</td>
</tr>
</table>
<input type=submit value="Proceed to secure server">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<script>
function validateForm() {
var x=document.forms["myForm"]["os0"].value;
if (x==null || x==""){
alert("RCEH account number must be filled out");
return false;
}
}
</script>
Assuming that you only want your checkbox to be checked, below there is the code you need, and this is a working JSFiddle.
function validateForm() {
var form = document.getElementById("myForm"); //get the form element via ID
if (form.os0.value == "")
{
alert("RCEH account number must be filled out");
return false;
}
if (!form.terms.checked) { // checks if the checkbox called "terms" is checked; if it is not, alerts a message and return false
alert("Terms must be read and approved");
return false;
}
return true; //if everything is okay, return true and submit the form
}

Validate input form with Javascript

Is there something I'm doing wrong that stops the form validating? I can't seem to get it to validate when the checkbox is not clicked.
Your help will be appreciated.
<html>
<head>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( document.application-form.terms.checked == false ){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onsubmit="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>
Input button doesn't have onsubmit event, use onclick instead. There were also other problems such as bad selection etc. , which are solved. See below
See a working demo here http://jsfiddle.net/ZHfX7/
<html>
<head>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" id="terms" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" onclick="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( !document.getElementById('terms').checked){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</html>
The onsubmit should be part of the <form> tag, not <input>.
<form id="application-form" name="application-form" method="post" action="" onsubmit="return validateTerms();">
You cannot use application-form inline in your document.application-form.terms. as its not a legal js identifier due to the hyphen.
Either give the checkbox an ID;
<input type="checkbox" name="terms" value="terms" id="terms" />
then reference it with
if (document.getElementById("terms").checked = ....
or use [] notation;
document.forms['application-form'].terms ...
application-form is not a valid name
onsubmit is not valid on input, moved to form
try -
<html>
<head>
<script type="text/javascript">
function validateTerms(){
if (document.application.terms.checked){
alert ( "Please accept the terms" );
return false;
}
return true;
}
</script>
</head>
<body>
<form id="application" name="application" method="post" action="" onsubmit="return validateTerms()"><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the Terms *</b>. </p>
<input type="submit" value="Submit Application" >
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>

validation not working still submitting the form

Now here is another problem..
my code:
<script type="text/javascript">
function validate_form ()
{
if ( document.myform.tele_caller.value == "" )
{
alert ( "Please insert the Name" );
return false;
}
else
{
return true;
}
}
</script>
and the form-
<form action="telecallerinfo.php?action=modify&id=<?php echo $id;?>" method="post" enctype="multipart/form-data" name="myform"
onsubmit="return validate_form ( );">
<table class="panel1">
<tr>
<td align="center">Caller Name:
<input name="tele_caller" type="text" size="15" value="<?php echo $tele_caller?>" /></td>
</tr>
<tr>
<td align="right">
<input name="submit" id="submit" type="image" src="images/submit.gif" width="60" onclick="this.form.submit();"/>
<img src="images/cancel.gif" height="25" width="70"/>
</td>
</tr>
</table>
</form>
now the validation is called and the alert box is also being displayed but the form is still being submitted. where is the mistake?
You're manually calling the submit() here:
onclick="this.form.submit();"
Just remove that onclick handler, there's no need for that handler, it'll happen automatically since it's inside the <form>.
Here's the comparison: your current code, with onclick (still submitting) vs. your code with onclick removed (only submitting when valid).
Remove onclick="this.form.submit(); from the input-submit tag.
Try to use input with type submit and no onclick event
<input type="submit" id="submit"/>
and you can put image in css
input#submit {
background-image: images/submit.gif;
width: 60px;
}

Categories