Javascript: unable to submit form - javascript

I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>

document.forms[0].elements["LoginButton"].click();
worked for me.

Related

JavaScript function return not staying in browser

I am trying to create a very simple HTML site for my co-workers to use for calculating cellular phone pricing based on a formula. I have a form with user inputs to declare the full price of the phone, amount of down payment, etc. Basically everything seems to be working, however the returned answer from my formula in my JavaScript function only displays on the screen for a fraction of a second and the JavaScript seems to reload. Have I unintentionally caused a loop?
I am very new to JavaScript please let me know if I am leaving out any pertinent information to helping to solve this issue. I will include my code below.
<body>
<div id="container">
<form id ="formula">
<fieldset>
<legend> Finance Formula</legend>
<div id="label">
<label for="fullPrice">Full Price:</label>
<br />
<br />
<label for="downPay">Down Payment:</label>
<br />
<br />
<label for="discount">Discount:</label>
</div>
<div id="input">
<input type="text" id="fullPrice" name="fullPrice" />
<br />
<br />
<input type="text" id="downPay" name="downPay" />
<br />
<br />
<input type="text" id="discount" name="discount" />
</div>
</fieldset>
<input type="submit" id="submit" name="submit" onclick="financed();"/>
</form>
</div>
<div class="resultsBox">
<p id="result"></p>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
console.log("The Total Amount Paid for Phone is:" +(((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24);
};
</script>
</body>
</html>
I have also tried this script instead which is what I found when researching online.
<script type="text/javascript" language="javascript" charset="utf-8">
function financed(){
var fullPrice = document.getElementById('fullPrice').value;
var downPay = document.getElementById('downPay').value;
var discount = document.getElementById('discount').value;
document.getElementById('result').innerHTML = (((parseInt(fullPrice) - parseInt(downPay)) / 24) - parseInt(discount)) * 24;
};
</script>
Basically the end result I am looking for is the answer for the equation within the function to "print" onto the browser and stay there.
HTML elements have default behaviors when they're used-- forms, for instance, will refresh the page on submit. Fortunately, there is a preventDefault method that will stop this behavior. You can read more about it here and here.
You just need to add an event listener to your submit tag, like this:
document.getElementById("submit").addEventListener("submit", function(event){
event.preventDefault();
}
Normally form submit will navigate to the action attribute url, if there is no action attribute, navigate to same page. if you want to avoid this default behaviour you have to modify the tag or submit button like mentioned below.
<form id ="formula" action="javascript:void(0)">
or
<input type="button" id="submit" name="submit" value="clickme" onclick="financed();"/>
It is because your submit input reloads the page by default. Try removing the onClick from submit and calling this instead:
document.getElementById("submit").addEventListener("click", function(event){
event.preventDefault(); // preventing the default submit action
financed();
});

Validate html5 form before calling php function?

I currently have a html5 form with a basic text-area inside of it, when you hit the submit button a php script is called that sends the data to the database.
However, before the PHP script is called, I would like to run some validation on the form (checking if it is null etc...) before the PHP is called, preferably in javascript.
Is there a way I can do this?
Thanks.
Html5 form:
<form action="submit.php" method="POST">
<tr>
<td id="textBox-back">
<textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>
<input id="submit" value="" name="submit" type="submit"/>
</td>
</form>
<script language="javascript">
function validate(){
//Code of validation
return false;
}
</script>
<form action="submit.php" method="POST" onsubmit="return validate();">
<tr>
<td id="textBox-back">
<textarea id="rage-box" type="text" name="rage" cols="40" rows="5" maxlength="160"> </textarea>
<input id="submit" value="" name="submit" type="submit"/>
</td>
</form>
You need to add an onclick on your submit or form.
var sub = document.getElementById('submit');
var tex = document.getElementById('rage-box');
sub.onclick = function(e){
if(tex.value == ''){
//stopping it from being sent
e.preventDefault();
alert('make sure everything is filled out');
}
}
If you add the event on your form you need to:
Give an id to your form
Get your form and add the form.onsubmit = function(){};
Then just copy the code inside the anonymous function.

Get value of form text field with without submitting the form

I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>

Form with two submit buttons doing two different things

I have a form that I have two buttons on. One button should take the user to one php script and the other button would take the user two a different php script. However for some reason the buttons aren't doing anything. Here is the code.
<script language="Javascript">
function OnButton1()
{
document.contactform.action = "../scripts/email-info.php"
// document.Form1.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.contactform.action = "../scripts/email-info2.php"
//document.contactform.target = "_blank"; // Open in a new window
document.contactform.submit(); // Submit the page
return true;
}
</script
Then here is the actual form code:
<form id="contact-form" name="contactform" method="post">
<fieldset>
<div id="holder">
<div id="formLeft">
<div class="txtlabel">Name* </div><div class="input-bg"><input type="text"
name="name" id="name" required></div>
</div>
</div>
<div id="msgbox">
<div class="txtlabel">Tell Us About Your Business Needs</div>
<div class="message-bg">
<textarea name="message" id="message" rows="9" cols="56" required></textarea><input
name="formpage" type="hidden" value="<?=$pagename;?>" />
</div></div><div style="clear:both"></div><br /><br />
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
<input src="/submitbtn.jpg"
name="submit" value="Download Now" class="submit-button2" onclick="OnButton2();" />
</fieldset>
</form>
I've removed some of the submission fields to make it more easily viewable. But I get nothing when I click either button...Any thoughts??
problem is in input:
<input src="/submitbtn.jpg"
name="submit" value="View Now" class="submit-button" onclick="OnButton1();"/>
When you have a form:
document.contactform.submit
Javascript returns the input with name submit, not the submit function.
You could change the name of the input:
<input src="/submitbtn.jpg"
name="yourName" value="View Now" class="submit-button" onclick="OnButton1();"/>
Also, your inputs are not buttons, check this.
Update
This question mentions HTML5 formaction attribute:
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
I'm surprised no one mentioned formaction. It is a legal attribute (in HTML5) for the input and button tag in submit/image state and can be used to send form data to a different action page. http://mdn.beonex.com/en/HTML/Element/input.html (it is also valid in button too).
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
In case you need to support IE9-, you simply can polyfill this, using webshims.
<script src="webshims/polyfiller.js"></script>
<script>
webshims.polyfill('forms');
</script>
<!-- now it also works with IE8/9 and other legacy browsers -->
<form action=#">
<buton formaction="script-1.php">submit one</button>
<buton formaction="script-2.php">submit two</button>
</form>
The reference to your form is
document.forms.contactform
and not
document.contactform
So, for example, the submit button should be:
document.forms.contactform.submit();
// ^^^^^
The same correction should be applied to other references.

Form submit problem using JavaScript in Internet Explorer 6

I have just done the code for submit the form using JavaScript.
It works in all browsers except in Internet Explorer 6.
I have pasted my HTML form and JavaScript code below.
Can you please find what's the problem with it?
JavaScript:
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
}
</script>
HTML Code:
<form name="del_form" id="del_form" method="post">
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
Function Call Code:::
<p class="video">
<a href="javascript:void(0)" onclick="dodelete('<?php echo $row['image_id']?>')">
<img src="<?php echo $cfg->admin_image_path; ?>/delete_icon1.gif" border="0" alt="Delete"/>
</a>
</p>
What is returned by:
document.getElementById('image_id')
It returns one INPUT element of collection of elements?
Try to replace:
document.getElementById('image_id').value=image_id;
with:
document.del_form.image_id.value=image_id;
OnSubmit call for javascript would help.
<form name="del_form" id="del_form" onsubmit="dodelete(value);" >
<input type="hidden" name="do" id="do" value="delete" />
<input type="hidden" name="image_id" id="image_id" />
</form>
There are two things I'd like to try, I'm not sure why or when this doesn't work it seems random, first try to set a timeout for the submit :
document.doSubmit = function() {
document.del_form.submit();
}
setTimeout("document.doSubmit();", 100);
Sometimes, just return something after the click works :
<input type="hidden" name="image_id" id="image_id" onclick="submitFormFunction(); return false;” />
What happens if you replace:
document.del_form.submit();
with:
document.getElementById('del_form').submit()
Try to move method='POST' to the beginning of form element definition.
I mean -- method attribute should be the first attribute of form element.
If I remember well, this fixed some problems with submitting forms on IE6.
I have edited your code a little bit.
<script type="text/javascript" language="javascript">
function dodelete(image_id)
{
if (confirm("Are you sure want to delete this image?"))
{
document.getElementById('image_id').value=image_id;
document.del_form.submit();
}
return false;
}
</script>
and the HTML with some test Image ID and it works in IE6
<form name="del_form" id="del_form" method="post" onSubmit="return(dodelete('2'));">
<input name="do" id="do" value="delete" />
<input name="image_id" id="image_id" />
<input type="submit" value="Submit">
</form>
Let's try again :).
What happen after replacing:
onclick="dodelete('<?php echo $row['image_id']?>')">
with:
onclick="dodelete('<?php echo $row['image_id']?>'); return false;">
What exactly doesn't work with your code? Throw JS error, there is no server request, values in request are empty?
And (maybe the most important question) -- where is action attribute for your del_form form?
replace
<a href="javascript:void(0)"
with
<a href="#"
IE have problem with that for the dom that fires the JS submit.

Categories

Resources