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>
Related
I have a view with a form in it:
<form asp-controller="UrlP" asp-action="RegisterInput" method="post">
Url: <input asp-for="Url" />
<br />
<button type="submit">Go!</button>
and, on the same view, I have a result from the previous submission:
#if (!string.IsNullOrEmpty(Model.Result))
{
<div class="result">The result is: #Model.Result</div>
}
How can I make the div above (class 'result') disappear as soon a the user starts typing in the form?
To give some context, the app is a single page where you provide a url and you get a result below and I would like to clear the result as soon as a new url is entered.
Since you are using ASP.net Core, it can be handled from the Action and Model State
So after the post, just clear your ModelState and return view like :
ModelState.Clear();
return View(<some View>);
Here's one way.
window.onload = function () {
// attach onkeypress event handler to all text inputs
document.querySelectorAll('form [type=text]').forEach(function (input) {
input.onkeypress = hideResult;
});
};
function hideResult () {
var result = document.querySelector('.result');
// remove result if it exist
if (result) {
result.parentNode.removeChild(result);
}
}
<div class="result">The result is: #Model.Result</div>
<form>
<input type="text" value=""><br>
<input type="text" value="">
</form>
I want to manage a form only with javascript, but the eventlistener doesn't worked for me. What's wrong?
My form:
<script src="init.js"></script>
<div id="search_box">
<form id="search_form">
<input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
<input type="button" value=● id="searchsign">
</form>
</div>
<script src="search.js"></script>
In init.js file:
"use strict";
function $(selector){
return document.querySelector(selector);
}
function $$(selector){
return document.querySelectorAll(selector);
}
in search.js file:
$('#searchsign').addEventListener('click', search);
$('#search_form').addEventListener('submit', search);
function search(){
console.info('search function OK');
var searchvalue = $("#searchbox").value;
var google = "https://www.google.hu/search?site=&source=hp&q=";
window.location = google + searchvalue;
}
The form's submit event will go to the form's action (no action = the current URL) and reload the page.
If you're handling it with JavaScript, accept the event argument and call preventDefault on it to prevent the default behavior:
function search(e) {
e.preventDefault();
// ...
}
I would also suggest either not making your functions globals, or giving search a different name to avoid conflicts in the global namespace.
Side note: You need to URI-encode query string arguments, so change your location assignment to use encodeURIComponent:
window.location = google + encodeURIComponent(searchvalue);
Working copy on JSBin (Since Stack Snippets work in frames that don't allow us to move off to Google)
Source of working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="search_box">
<form id="search_form">
<input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
<input type="button" value=● id="searchsign">
</form>
</div>
<script>
"use strict";
(function() { // Scoping function to avoid globals
function $(selector) {
return document.querySelector(selector);
}
function $$(selector) {
return document.querySelectorAll(selector);
}
$('#searchsign').addEventListener('click', search);
$('#search_form').addEventListener('submit', search);
function search(e) {
e.preventDefault();
console.info('search function OK');
var searchvalue = $("#searchbox").value;
var google = "https://www.google.hu/search?site=&source=hp&q=";
window.location = google + encodeURIComponent(searchvalue);
}
})();
</script>
</body>
</html>
Code looks fine to me here
The results aren't going to show because google does not allow itself to be iframed, but you can see your console logs are printing just fine.
If you are not seeing the same results as above in your code, then I'm guessing there is an issue with the order or manner in which you are including your files.
.
If you want to trigger submit event, do not add click event listener to submit button, instead change its type to submit.
Do not forget to add e.preventDefault() in submit function to prevent default submit behaviour and page reloading
"use strict";
function $(selector) {
return document.querySelector(selector);
}
function $$(selector) {
return document.querySelectorAll(selector);
}
$('#search_form').addEventListener('submit', search);
function search(e) {
e.preventDefault();
console.info('search function OK');
var searchvalue = $("#searchbox").value;
var google = "https://www.google.hu/search?site=&source=hp&q=";
window.location = google + searchvalue;
}
<script src="init.js"></script>
<div id="search_box">
<form id="search_form">
<input type="search" name="search" autofocus placeholder="Google search" id="searchbox">
<input type="submit" value=● id="searchsign">
</form>
</div>
<script src="search.js"></script>
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
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>
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;
}