Best way to form submit using Javascript - javascript

I have two methods for this -
<body onLoad="document.frmconfirm.submit();">
<form name="frmconfirm" action="https://abc.com/" method="post">
<input type='hidden' name='account_id' value='5715' />
</form>
</body>
and
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>document.subFrm.submit();</script>
I am getting some issue on firefox in second one.
I would love to hear your thoughts and any other full proof approach.
I need to automate this process on a page, so can't use jQuery.

What are "some issues"?
Your two snippets of html/javascript should be pretty much identical in their functionality. The first is probably preferable in any case as the javascript runs when the page fully loads. The second runs some javascript directly as it is parsed, which should work fine as long as, as in your second example, the form has already been parsed.
TL;DR - They're (pretty much) the same.

Try
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>document.getElementById("subFrm").submit();</script>
or
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>window.onload = new function() { document.getElementById("subFrm").submit() };</script>
You could use jQuery to do this btw :)
$(document).ready(function () {
$("#subFrm").submit()
}

Related

Check on/off of checkbox doesn't work anymore

Since many years I have a website running (direct link to the table-page). Now, suddenly, I realise that the checkbox doesn't work anymore as one would expect (same for the "Completeness" button below): once the checkbox for "per capita"-calculation has been checked, it doesn't go off anymore. No idea why that is; really frustrating.
The page has two forms:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.value;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
and
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='on' />
</form>
Looks alright (although perhaps old-style writing) to me.
The "offing" off seems not to work at all. If I put a "alert(document.tableForm.per_capita.value)" in the onChange event, it still says "on".
I would very much appreciate any tip on what I am doing wrong here.
Ok, thanks to AdrianoRepetti's and Manurat's comments above, I realised that I had to work with two different "units": One is the information type="checkbox" is returning ("checked"); the other is how I store the information in a "hidden"-element in another form.
So, I changed the code to reflect this - it now parses the "checked" state of the checkbox over to the "value" part of the hidden element:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.checked;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='' />
</form>
Now, I use the PHP to check if the hidden parameter "per_capita" is "checked" or not.

Using submit with JS does not pass DATA

I'm using (function clicado()):
document.getElementById('enviar').click();
html:
<input type='submit' id='enviar'></div>
I'm trying to pass data to PHP, but a problem is happening, the data simply does not pass.
Have you tried using submit(); and also does not work.
Whhen I click in , work fine, but when I do the JS "clicking for me" ...
I hope the question is not superficial, basically my problem is to pass the data.
Here is the URL:
http://as4.com.br/gateway/index.php
Here is the form:
<form method="POST" action="index.php" id="formcompra" name="formcompra">
<input id="cvv" name='cvv'>
<div class="pagar" ><input type='submit' id='enviar'></div>
</form>
I really want to submit this form with JS.
Looking at the link you provided, the name of your form is formcompra. If you call document.formcompra.submit() this will submit your form.
$("#enviar").click(function(){
$("#formcompra").submit();
});
try something like this

why this dijit.form doesnt submit?

Why this form wont submit?
<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="Cart.php" method="post">
<input type="text" name="searchName"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="searchName" />
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioOne" value="full"/> <label for="radioOne">Full</label>
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="sl" id="radioTwo" value="short"/> <label for="radioTwo">Short</label>
Data Select
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="2">Data1</option>
<option value="1">Data2</option>
</select>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>
Some javascript too:
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit/layout/AccordionContainer");
dojo.require("dijit/layout/BorderContainer");
dojo.require("dijit/layout/ContentPane");
</script>
Maybe its a stupid question, but ive been looking at it several hours and still cant figure it out.
Thanks in advance
I'm not sure what do you meet by won't submit. I moved your code into JS Bin (http://jsbin.com/iziwen/1/edit) and it works fine:
If you experience problems on the server side I suggest you change encType="multipart/form-data" to enctype="application/x-www-form-urlencoded" (or do not use it at all as it is the default value) - you do not need multipart/form-data, you are not sending files (see more here).
If this won't help, please specify won't submit more precisely.
EDIT: I do not use dijit/form/Form submit functionality, I just grab form data and send those via XHR to my web service, but I had a look at how submit functionality works and it seems so you need an <iframe> to use submit functionality. So this is what I changed:
A. Form definition - target:"formSubmitIframe" points to iframe id:
<form
id="myForm"
data-dojo-id="myForm"
data-dojo-type="dijit/form/Form"
data-dojo-props="action:'Cart.php', method:'post', target:'formSubmitIframe'"
>
B. Added iframe:
<iframe name="formSubmitIframe" src="about:blank"></iframe>
Once all works for you add style="display:none;" to iframe to hide it.
See it in action in JS Bin: http://jsbin.com/iziwen/7/edit
N.B.: I do not recommend submitting a form this way. If you do not need to go cross-domain or sending files, simply get form data via var data = dijit.byId("myForm").get("value"), so you will have form data in JSON and then send them up via dojo/xhr or dojo/request (for dojo 1.8+).
Also dojo/xhr is capable to send form just by providing a form id to it - here is a nice example: http://livedocs.dojotoolkit.org/dojo/xhr

Can a script tag at the end of the body tag act on forms?

My website needs to have a form that automatically submits, sending the user (with POST data) to an external website. Previously, I was using HTML like this:
<html>
<head></head>
<body onload="document.forms[0].submit()">
<form name='form1' method='post' action='externalwebsite.com'>
<input type='hidden' name='cartId' value='1337'>
<input type='hidden' name='currency' value='USD'>
<input type='hidden' name='amount' value='9'>
</form>
</body>
</html>
However, this resulted in a long delay between the page loading and the form being submitted, as the onload event fires very late in the page lifecycle.
Javascript libraries have the domready event, to allow code to before the onload event fires, but still at a point where it is safe to manipulate the DOM tree. For instance, with the Mootools library, I could do this:
window.addEvent('domready', function () {
document.forms[0].submit();
});
However, I don't want to include a bulky javascript library for such a simple page. As such, I have the following HTML:
<html>
<head></head>
<body>
<form name='form1' method='post' action='externalwebsite.com'>
<input type='hidden' name='cartId' value='1337'>
<input type='hidden' name='currency' value='USD'>
<input type='hidden' name='amount' value='9'>
</form>
<script type='text/javascript'>document.forms[0].submit()</script>
</body>
</html>
Will this always work, across all browsers? Or should I use a different method?
put the script before closing body tag
<html>
<head></head>
<body>
<form name='form1' method='post' action='externalwebsite.com'>
<input type='hidden' name='cartId' value='1337'>
<input type='hidden' name='currency' value='USD'>
<input type='hidden' name='amount' value='9'>
</form>
<script type='text/javascript'>document.forms[0].submit()</script>
</body>
</html>
Yes, it will work (unless JavaScript is disabled) and will be executed as soon as the HTML is loaded into browser. It will not wait for images, scripts etc. to load, as in case of your onload solution.
The way you have it now, it won't work. You have to have your code before the closing </body> element, or it won't be executed after the page has fully loaded. Once you've done that, then yes, it should work cross-browser.

Voting/rating system: How to fail gracefully when javascript isn't supported/enabled?

I'm implementing a voting system like the one used by stackoverflow. It's working with ajax sending POST request to an url. I'd like a way to fail gracefully when javascript/ajax isn't supported or enabled, a GET like /voteup/id isn't even considered because i'm altering the database.
What's the best solution? I'm either considering a form or simply removing the feature if js isn't enabled.
There are at least three related entries on SO but i can't insert more than one hyperlink
POST with links without JavaScript
Make the basic voting actions mini-forms, then use javascript to disable their posting action.
<form method=post action="hit-url">
<input type=hidden name=vote value="1" />
<input type=submit value="Vote Up" onSubmit="doVote(1);return false;" />
</form>
<form method=post action="hit-url">
<input type=hidden name=vote value="-1" />
<input type=submit value="Vote Down" onSubmit="doVote(-1);return false;" />
</form>
To replace these with links for javascript-enabled users:
<div id="voteupbutton">
<form method=post action="hit-url">
<input type=hidden name=vote value="1" />
<input type=submit value="Vote Up" onSubmit="doVote(1);return false;" />
</form>
</div>
<script>
document.getElementById("voteupbutton").innerHTML="<a href='script:return false' onClick='doVote(1);return false;'>Vote up</a>";
</script>
I haven't tested the above. If you're using jQuery or some other framework, there will be more elegant ways of doing all of this.
The straightforward option is just a regular form POST, even if it is to the URL /voteup/id, and I'm not sure why you can't do that (or even the GET you mentioned).
Put onsubmit="return false" into the tag to prevent POSTing by users who do have JS enabled.
While you can't use links to submit forms, you can certainly use links to trigger database actions if you want to, via the querystring. In no particular scripting language:
<===
if (querystring("v")) then {
v.value.writeToDatabase
}
===>
Vote A, Vote B

Categories