javascript function is not a function - javascript

This is the javascript code im using.
<script language="javascript" type="text/javascript">
function cancelevent()
{
input_box=confirm("Are you sure you want to cancel?");
if (input_box==true) {
document.cancelevent.submit();
} else {
}
}
</script>
This is the form thats being submitted:
<form name=cancelevent method="post" action="whor.php">
<input type="hidden" name="owner" value="owner">
Cancel
</form>
I have this form on 2 different pages. One page it works, the other, i get this error
Error: document.cancelevent.submit is not a function
Ive literally copy and pasted the code from the working page to the 2nd page....no idea what is going on or why it would do this.

I think the problem is that the HTML form and the javascript function have the same name!

Put an id on your form
<form id="cancelEventForm" name=cancelevent method="post" action="whor.php">
And use
document.getElementById('cancelEventForm').submit();

Related

preventDefualts doesn't allow form submit in Invisible ReCaptcha

Recently i was trying to use Google's invisible ReCaptcha, so i've copied the same example as Google mentioned in their official documentation; but the form doesn't submit, and we cant proceed to next page(form action page).
Client snippet:
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("myform").submit();
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("Please enter your name.");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
</head>
<body>
<form id='myform' method="post" action="test.php">
Name: (required) <input id="field" name="field">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="mysitekeyxXX"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>onload();</script>
</body>
</html>
Server snippet (test.php):
var_dump($_POST['g-recaptcha-response']);
there is other code for google's verification process but it doesn't get into this page anyway (the action page)
I'm not sure if you have copied everything 1:1 or Google did some docs update but this function is a bit different from reCAPTCHA's one click here:
function onSubmit(token) {
document.getElementById("myform").submit(); // <- this
}
and it won't work because you have a button with ID "submit".
<button id='submit'>submit</button>
To make it submit correctly you have to rename button's id to something else.
Also event.preventDefault() prevents of executing default form submit so you should leave it as it is. After fixing this name problem it will work perfectly!

submit a form without using a submit button

I am trying to submit this for without using a submit button. Here I have used javascript and once the form has submitted user should be directed to the B.php.
html code
<form id="jsform" action="B.php" method="POST" target="_blank">
<input type="hidden" value="test" name="title"/>
</form>
java-script code
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
These 2 code lines run separately but not running together. Any mistakes have I done.
In javascript you can do this:
window.onload=function() {
document.getElementById("jsform").submit(); // using ID
}
And with jQuery
$(function() {
$("#jsform").submit(); // using ID
});
I write my comment as an actual answer this time.
Drop target="_blank" and it should work just fine. Otherwise your browser might see it as a popup.
Also make sure your JS is run after your form.
Use form name to submit
document.myform.submit();

Input with submit wont execute If/else statement

This looks very simple but I cant get it working. Im not experianced in web design but here is the following:
I am trying to make input bar(like search box) that when entered specific text it redirects you to other page or makes somethign else.
Here is what I have so far.
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input id="search" type="text"/>
<button onclick="return abc()">test</button>
</form>
<script>
function abc() {
var textt = document.getElementById("search");
if (textt.value == "test") {
window.location.assign("http://www.google.com")
}
}
</script>
</body>
</html>
http://jsfiddle.net/uvnyd8vz/1/
this just refreshes page and thats it. Any ideas? thanks!
Compare the value as string
Like
textt.value =="test";
Also inside the function write
event.preventDefault();
This will stop the submit action of submit button
Also specify the else condition i.e.
else{return false;}
Adding event.preventDefault(); to function fixed my problem! thanks

JavaScript not working inside iframe in Firefox

I am using an iframe that loads a page with a form. The form action is overridden using javascript. The javascript form action is working in IE and Chrome. But in Firefox the javascript is not working and the form is getting submitted to http://example.com/index.php
The code is given below:
<script language='Javascript' type='text/JavaScript'>
function submitFunction() {
document.Insert.action = 'http://example.com/page2.php';
return true;
}
</script>
<FORM ACTION='http://example.com/index.php' METHOD='POST' ENCTYPE='x-www-form-urlencoded' name='Insert' id='Insert' autocomplete='off' onsubmit='return(submitFunction())'>
<input name='num' SIZE='45' MAXLENGTH='45'>
<input name='Submit' type='submit'/>
</FORM>
Thanks in advance.
Change
document.Insert.action = 'http://example.com/page2.php';
to
document.getElementById('Insert').action = 'http://example.com/page2.php';
But it seems a little strange to change the action URL of the form in the onsubmit. You could as well have it defined from the start.

How to change the value of textbox when form is submitted?

I have a form which has fields pre-filled with a default value, like this:
<input type=text name=first value="First Name" class="unfilled" />
When the textbox is clicked, the class unfilled is removed from the textbox, and the textbox is made blank so the user can type in his/her own info.
The problem is that when the form is submitted, its getting submitted with these default values, which is messing up the server side validation. How can I do it so that when the form is submitted, all the fields which have a default value are made blank, so the server side validation would throw the error: 'Please fill in this field'?
I'm trying the following code which isn't working:
$("#myForm").submit(function()
{
$(".unfilled").val('');
}
);
This does make the fields blank, but the server still receives them with their previous default values.
I think you simply have a syntax error. You're missing the closing parenthesis on your submit method.
I just whipped this up and it works fine
<!DOCTYPE html>
<html>
<body>
<?php
var_dump($_POST);
?>
<form action="test.php" method="post">
<input type="text" name="first" value="First Name" class="unfilled">
<input type="submit">
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('form').submit(function() {
$('.unfilled').val('');
});
});
</script>
</body>
</html>
You need to stop the form execution first, change the values, and then manually submit the form.
$("#myForm").submit(function(e)
{
// Stop the form submit
e.preventDefault();
$(".unfilled").val('');
$(this).submit();
}
You have to return true; if you want the form to submit, or false, if you don't.
The problem with this approach is that the fields will 'blink' before posting the values, thus creating a bit of unprofessional feel.
It is better to use hidden values and set them in submit() event.
I think you need the .click() function of JQuery.
Example:
$(function () { // shorthand for document.ready
$('.unfilled').click(function () {
$(this)
.val('')
.removeClass('unfilled');
})
});
UPDATE
Sorry, i missunderstand you, thought you need a feature like a placeholder.
Of couse you can do it with return false;, but this cancel the submitting. Or like GreenWebDev says to use e.preventDefault();.

Categories

Resources