Post form via javascript? - javascript

I'm working on my first php project and I appear to have hit a milesone, I'm trying to get my form to post via javascript so that the webpage does not have to refresh but I cannot see to get it to work, any help appreciated :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", {
message: message,
}
{
return false;
}
}
</script>
<form><input type="text" name="message"><input type=BUTTON value="Submit" onClick="say()"></form>

Seems like you haven't closed properly curly braces and there is no need for return false as you already use type="button" on form. See below code :
function say(){
var theusername = $("#message").val();
$.post("q3/say.php", { message: theusername }, function ( data ) {
// populate data here
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="message">
<input type=BUTTON value="Submit" onClick="say()">
</form>
You might need to read this POST. The callback function is optional in case you want to populate or doing something after request being made

Related

Javascript function does not wait for the callback function to complete

I have an online platform for which I want every HTML form submitted by users to be digitally signed using Digital Signature Token.
I am testing an API(Javscript API + .exe (that need to be installed at the users' machine)).
The code goes like this
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sign Form Page</title>
<script type="text/javascript" src="docsign.js"></script>
</head>
<body>
<script type="text/javascript">
var DocSignObj = _docSignObj;
var myCallbackFun;
$(function(){
//This lets the API know that SignData() function needs to call
//myCallbackFun function after its job is done
DocSignObj._initialize(myCallbackFun);
});
function sign(form){
//does some stuff like serializing form data etc
var formData =serialize(form);
//This function is exposed by the API.
//It opens the dialog box to get Digital Certificate Details from
//user,
//validates the details and
//then generates the Digital Signature which is returned in the
//callback
//function
DocSignObj.SignData(formData);
}
function submitForm(){
//Once this function is called it should wait till myCallbackFun does
//its job.
sign(form);
//The following line of code is executed immediately instead leaving
//DIG_SIG element as empty
document.FORM_TO_BE_SIGNED.submit();
}
function myCallbackFun(result){
var digitalSignature = result.sig;
document.getElementById("DIG_SIG").value = digitalSignature;
}
</script>
<form id="FORM_TO_BE_SIGNED" action="" method="">
<input type="hidden" id ="DIG_SIG" value="" />
<input type="text" id="data" /></br>
<input type="submit"
value="Sign Form Data" onclick="submitForm()" />
</form>
</body>
</html>
What happens is that the
document.FORM_TO_BE_SIGNED.submit();
line executes immediately after the
sign(form);
and the form gets submitted without signing.
You have lots of errors among passing some undefined form to sign( form ), serializing a form without using name="" for your inputs etc...
Instead of counting your errors, here's how I'd do it... hopefully you'll find all the comments in the below example clear enough, but for further question feel free to ask so I can improve:
// Let's say it does this...
var DocSignObj = {
data: {
sig: "sig_012345679abcd_sig" // Some digital signature
},
SignData: function(serializedForm) {
this.data.serializedForm = serializedForm;
return this.data;
},
_initialize: function(cb) {
return cb(this.data);
}
};
// Now...
function myCallbackFun(result) {
// DIGITALLY SIGN BY API CALLBACK
$("#DIG_SIG").val(result.sig);
}
function sign(form) {
// does some stuff like serializing form data etc
DocSignObj.SignData($(form).serialize());
// presumably it checks if the "sig_***_sig"
// from the serialized string is valid at submit-time.
}
function submitForm(event) {
// 1 DON'T SUBMIT YET
event.preventDefault();
// 2 SIGN IT
var signedData = sign(this); // where `this` is the $form
// 3 SUBMIT FORM
// $(this).submit(); // TODO: uncomment this line to submit form!
console.log("SUBMITTED!!! %o", DocSignObj.data);
}
jQuery(function($) {
//This lets the API know that SignData() function needs to call
//myCallbackFun function after its job is done
DocSignObj._initialize(myCallbackFun);
$("#FORM_TO_BE_SIGNED").on("submit", submitForm);
});
<form id="FORM_TO_BE_SIGNED" action="" method="">
<input name="sign" type="text" id="DIG_SIG" disabled> (the hidden one... just to test if SIG is being added)<br>
<input name="data" type="text" id="data" value="Name Surname"><br>
<input type="submit" value="Sign Form Data">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Comparing html text inputs and redirecting to another page using Javascript

I am brand new to Javascript and am just using it to make a simple website for fun. I have tried searching the web but am still stuck, so if you could help me or redirect me towards other help, that would be great.
I am trying to use Javascript to send a user to another html page in my site if their input matches my criteria. So I wanted to use an if/else statement to do this: if the text input equals ODQHVHMJKD, it would send them to page3.html. However when I try this on the browser, nothing happens--it just takes me to an identical page with ?codebox1=f&button1=Submit at the end of the address.
Here is my script section:
<script type="text/javascript">
function testResults (form) {
if (form.codebox1.value == ODQHVHMJKD) {
window.location.pathname = 'page3.html';
}
else {
window.alert("Try again!");
}
};
</script>
Here are my form elements:
<form name="form1" method="GET">
<input name="codebox1" type="text" />
<input name="button1" type="submit" value="Submit" onClick="testResults(this.form)"/>
</form>
Can you help me so that I can get this to work? It's more than likely I've done everything completely wrong--any help is appreciated!
Try this,
function testResults (form) {
if (form.codebox1.value == "ODQHVHMJKD") {
window.location = 'page3.html';
}
else {
window.alert("Try again!");
}
return false;
};
You need to prevent the default action of the form. In the submit event, call e.preventDefault(); or return false In addition, you need quotation marks around ODQHVHMJKD
Js Fiddle: http://jsfiddle.net/prankol57/Ht45t/
Maybe this can help you.
<form name="form" onsubmit="Results()">
<input type="text" name="fname" id="val">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function Results() {
var val = document.getElementById('val').value;
if (val == "ODQHVHMJKD") {
window.location = 'page3.html';
} else {
window.alert("Try again!");
}
};
</script>

Using results from a post request in a javascript variable

I have a very basic question (I'm sure) - I have an Zoho application and I'm using their REST API to recover a single result from a table.
I want to use that result in a javascript variable - the form request is here:
<form id="Latest" method="POST" action="https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
I can auto submit the form using this
<script type="text/javascript">
document.getElementById("Latest").submit();
</script>
Which recovers a the result - but I want to assign this result to a javascript variable and use it in a following piece of code (within the same frame).
I am new to this, so please be gentle! Any help appreciated.
This is easily done with jQuery:
<form id="Latest">
<input type="hidden" name ="authtoken" value="**********************">
<input type="hidden" name ="scope" id="scope" value="creatorapi">
<input type="submit" value="View Records">
</form>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('#Latest').submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
var url = "https://creator.zoho.com/api/xml/my-company-culture/view/PageFeed_Report";
// Get some values from elements on the page:
var $form = $( this );
var authtokenData = $('#authtoken').attr('value');
var scopeData = $('#scope').attr('value');
// Send the data using post
var posting = $.post( url,
{
authtoken: authtokenData,
scope: scopeData
}
);
// Put the results in a div
posting.done(function( data ) {
// empty results div
$("#result").empty()
// write POST result to results div
$("#result").append("<p>" + data + "</p>);
});
});
</script>

Serialize with javascript (jquery) to new window

I’m trying to submit a form to with javascript (jquery) to another page that export the result to excel. Below is the code I use to send form data a page and return the results to a div on the same page.
<script type="text/javascript">
function get3() {
$.post('chartprojecttype.php',
$('form[name="reportform"]').serialize(),
function (output) {
$('#info').html(output).show();
});
}
</script>
I tried to modify it like this,
<script type="text/javascript">
function get4() {
$.post('openticketsexcel.php',
{
document.getElementById(‘reportform’).submit();
});
</script>
But it does not work. I have another way to do this and have to different pages that export it in different format.
<input type="image" name="excel" onclick="submitForm('openticketsexcel.php')" value="Export To Excel" src="../pix/excel.png" class="submit_button"><input type="image" name="word" onclick="submitForm('openticketsword.php')" value="Export To Word" src="../pix/word.png"class="submit_button">
and
<script type="text/javascript">
function submitForm(action)
{
document.getElementById('reportform').action = action;
document.getElementById('reportform').submit();
}
</script>
This works but only in IE. Chrome and FireFox can used the first code that returns the submitted data but not the code that submits it to the export pages. Any ideas?
You have MANY issues
1) input type=image is a submit button. Do NOT submit in the onclick of the submit button since you will actually interfere with the event
2) why would you need to submit a form after you post the form to the server? If you need the server to return a word or excel, you need to GET (I GET below by chaning location) or POST a form - but not using $.post since the browser needs to open the file, you cannot ajax word or excel
You likely just want this:
<button class="button" id="excel"><img
alt="Export To Excel" src="../pix/excel.png"/></button>
<button class="button" id="word"><img
alt="Export To Word" src="../pix/word.png"/></button>
using
$(function() {
$(".button").on("click",function(e) {
e.preventDefault();
location="opentickets"+this.id+".php?"+$('form[name="reportform"]').serialize();
});
});
The simpler solution is just
<form action="export.php" target="_blank">
<input type="submit" name="exportformat" value="Excel" />
<input type="submit" name="exportformat" value="Word" />
</form>
and have the php sort things out
You forgot the function and an ending curly brace, and your single quotes were curly instead of straight. Try this:
<script type="text/javascript">
function get4() {
$.post('openticketsexcel.php', function() {
document.getElementById('reportform').submit();
});
}
</script>
jQuery post should be like this
$.post( "some/url", function( data ) {
// code goes here
});
REFERENCE
http://api.jquery.com/jQuery.post/

How to grab the onSubmit event for a form?

I want to know how to grab the onsubmit event from a form to do some form validation, because I don't have access to it directly. (I am writing a Wordpress plugin for comments, so don't have direct access to the form tag or the submit button.)
I got so frustrated trying to do this for my plugin that I have written a Hello World version below. I want it to show the 'Hello World' alert when I load the page, and the "form submitted" alert when I click on the submit button. Instead, it shows both pop ups when the page loads.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h2>Test</h2>
<form action="#" method="post" id="commentform">
<p><input type="text" name="author" id="author" size="22" tabindex="1" />
<label for="author"><small>Name (required)</small></label></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
</form>
<script type="text/JavaScript">
<!--
alert("Hello world");
var formCheck = document.getElementById("commentform");
formCheck.onSubmit = doMapping();
function doMapping() {
alert("form submitted");
return false;
}
-->
</script>
</body>
</html>
Change this:
formCheck.onSubmit = doMapping()
to this:
formCheck.onSubmit = doMapping
When you add parenthesis to the end of a function you execute that function. When you assign a function (or pass it as a parameter to another function) you need to omit the parenthesis as that is the way to retrieve a function pointer in JavaScript.
Edit: You will also need to move the declaration of the doMapping function above the assignment of that function to the onsubmit event like this (good catch tvanfosson!):
function doMapping() {
alert("form submitted");
return false;
}
formCheck.onSubmit = doMapping();
However if the doMapping function is not used elsewhere you can declare the doMapping function as an anonymous function like this:
formCheck.onSubmit = function() {
alert("form submitted");
return false;
}
which seems a bit cleaner to me.
Using jQuery.
$(document).ready( function() {
$('#commentform').submit( function() {
alert('form submitted');
return false;
});
});
Thank you! Actually I solved it another way, using both Andrew's suggestion and the window.onload event - I think the problem was partly because the element hadn't actually loaded.
window.onload = function(){
if (document.getElementById("commentform")){
document.getElementById("commentform").onsubmit = doMapping;
}
}
function doMapping(){
alert("form submitted");
return false;
}

Categories