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;
}
Related
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>
I have a html page with a table and a form in each row. When i klick on the row it should open a detailpage, but when I click in the form this should not be triggered.
My row looks like this:
<tr onclick="window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
<form method="post">
<input type="number" name="size" value="1">
<input type="submit" onsubmit="return confirm('Are you sure?');">
</form>
</td></tr>
So it should work like this: if I klick in the size-field, or on the submit-button, the detail-page should not be called.
I found out that one can use event.stopPropagation() for this, but I cannot find out how to do it with plain javascript although it seems that there should be an easy solution
Try
<tr onclick="window.parent.location.href='details.php?id=123';">
<td><img /></td>
<td>text</td>
<td>price<br>
<form method="post" onsubmit="return confirm('Are you sure?');">
<input type="number" name="size" value="1" onclick="event.stopPropagation()">
<input type="submit" onclick="event.stopPropagation()">
</form>
</td>
</tr>
Note: Remove the onsubmit from input element and add it to form element. Thank you #epascarello for the correction.
Here is the solution
<tr onclick="var x = event.clientX;var y = event.clientY;if(document.elementFromPoint(x, y).tagName.toLowerCase()!='input'){window.parent.location.href='details.php?id=123'; }"><td><img /></td><td>text</td><td>price<br>
<form method="post">
<input type="number" name="size" value="1">
<input type="submit" onclick="return confirm('Are you sure?');">
</form>
</td>
</tr>
I just ran into this issue myself and this post helped me: How to stop propagating event from parent div to child div
So you'll want to set something up like this:
var parent = document.getElementsByClassName("parent")[0];
var child = document.getElementsByClassName("child")[0];
parent.addEventListener("click", function(e) {
alert("you clicked parent");
if (e.target !== this) {
return;
}
e.stopPropagation();
// parent.style.color = "green";
});
child.addEventListener("click", function(e) {
alert("you clicked child");
if (e.target !== this) {
return;
}
e.stopPropagation();
});
.parent {
width: 500px;
height: 500px;
background-color: red;
}
.child {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="parent">
<div class="child">
</div>
</div>
In your case, maybe try including a script with functions to call for the onclick element properties for better readability:
<tr onclick="changeLocation(e, 'details.php?id=123')"><td><img /></td><td>text</td><td>price<br>
<form method="post">
<input type="number" name="size" value="1">
<input type="submit" onclick="return confirm('Are you sure?');">
</form>
</td></tr>
<script>
function changeLocation(e, reference) {
if (e.target !== this) {
return;
}
e.stopPropagation();
window.parent.location.href=reference;
}
</script>
Or even better a propagation event function:
<tr onclick="stopProp(this); window.parent.location.href='details.php?id=123';"><td><img /></td><td>text</td><td>price<br>
<form method="post">
<input type="number" name="size" value="1">
<input type="submit" onclick="stopProp(this); return confirm('Are you sure?');">
</form>
</td></tr>
<script>
function stopProp(e) {
if (e.target !== this) {
return;
}
e.stopPropagation();
}
</script>
Thank you all - I used the solution of sanketd617 and it worked fine - sorry for the error with the onsubmit - in my file it is in the -tag - I typed it and did not copy/paste the code, since my code is a bit more complicated.
I also tried the code of Aricha but it did not work for me - it still did execute the detail-page, but maybe I made a mistake there too. I tried similar solutions before, but it never worked for me.
But I did not find the really simple solution with onclick="event.stopPropagation()" in the onclick of the input-elements. So thank you very much
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
}
Good evening, i have a HTML form that contains a submit button that does something other than executing the action of the form, i want these submit button to do an action first then do the action of the form, that button do a nice jquery slideUp() but when i embed it in a form it does the action of the form and neglect the slideUp() behavior, what are the possible ways to let that button do the slideUp() first before submitting the form?
here's the form:
<form action="AddNewCar" method="get">
<table BORDER=2 BORDERCOLOR=YELLOW width="300px">
<tr>
<td>Description: <input type="text" name="desc" /></td>
<td>Quantity:<input type="text" name="qunt" /></td>
<td>Price: <input type="text" name="price" /></td>
</tr>
<tr>
<td>CC.No: <input type="text" name="cc" /></td>
<td>Engine: <input type="text" name="engine" /></td>
<td>Cylinder.No: <input type="text" name="cylinder" /></td>
</tr>
<tr>
<td>Max-speed: <input type="text" name="speed" /></td>
<td>Petrol-type: <input type="text" name="ptr-type" /></td>
<td>Petrol-capacity: <input type="text" name="ptr-cpcty" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" class="btn1" value="Add" onclick="addNewCar()" /></td>
</tr>
</table>
</form>
and here's the script is supposed to execute before anything else:
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
$(".btn1").click(function() {
$('#toggleText').slideUp();
});
</SCRIPT>
$(".btn1").on('click', function(e) {
e.preventDefault()
var self = this;
$('#toggleText').slideUp('fast', function() {
self.form.submit();
});
});
You should put the slide up in a method and call it on submit
<form action="AddNewCar" onsubmit="slideupmethod" method="get">
function slideupmethod(){
$('#toggleText').slideUp();
}
You can create a submit button, which uses onclick to fire off a function, and then submit your form. For example.
The html button for submit
<input type="button" value="Submit Order" class="btn_submit" onclick="submitOrder()" />
your javascript function
//function called when submit button pressed
function submitOrder() {
//perform client side form validation and other things
//submit the form
$('#yourFormId').submit();
}
Alternatively, using the button you currently have. You can prevent the form from submitting when the button is pressed, perform the required actions, and then submit the form.
javascript
$('form').submit(function(evt){
//prevent form from submitting
evt.preventDefault();
//do required actions
//submit form
$('form').submit();
});
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()"