I'm using some javascript to validate a form. It works fine in Firefox, IE10 and Chrome. Is there a way to make this below code work in Safari and IE9? When the donate button is clicked, it should be required to enter a student's name. But in Safari and IE9 the mandatory field is not being recognized, it just takes you right to paypal.
<script>
function validateForm()
{
var x=document.forms["myForm"]["os0"].value;
if (x==null || x=="")
{
alert("Please Enter the Child Your Sponsoring and Click Donate");
return false;
}
}
</script>
<form name="myForm" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post">
<input type="hidden" name="on0" value="Child Sponsored Name" />Please enter the student's First and Last Name Your Sponsoring and click Donate
<input type="text" maxlength="200" name="os0" required/><input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="email#website.com" /><input type="hidden" name="lc" value="US" />
<input type="hidden" name="item_name" value="5k Run Fundraiser" />
<input type="hidden" name="no_note" value="0" />
<input type="hidden" name="cn" value="ADD DONOR NAME" />
<input type="hidden" name="no_shipping" value="2" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted" />
<input type="image" alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" border="0" />
</form>
Try this (not sure why you need form element):
var x = document.getElementsByName("os0")[0].value;
hope this too myt help :
var x=document.myForm.os0.value;
This doesn't answer what your problem is, but it may get you around the problem.
Are you familiar with this jQuery plugin:
http://jqueryvalidation.org/documentation/
To use it, you will need to load both the jQuery library and the jQueryValidation plugin in the head tags of your document:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
</head>
See this demo
Related
How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission
I am trying to dynamically update the amount and currency value fields in the following PayPal Buy Now form based on the radio button selection using the function below. I am unable to get it to pass the currency and amount values to the form.
The form:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" name="f" id="f">
<input name="audio-book" type="radio" class="sum" value="54.95" checked="checked" /> NZ$ 54.95
<input name="audio-book" type="radio" class="sum" value="43.95" /> AU$ 43.95
<input name="audio-book" type="radio" class="sum" value="45.00" /> US$ 45.00
<input name="audio-book" type="radio" class="sum" value="34.95" /> EU€ 34.95
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxxxxxxxxx">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="item_name" value="xxxxxxxxx">
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="currency_code" id="currency_code" value="">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="xxxxx">
<input type="hidden" name="cancel_return" value="xxxxxx">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" class="alignleft wp-image-2884 size-full" src="../uploads/btn_buynow_pp_142x27.png" border="0" name="submit1" id="button" onclick="javascript:doSubmit();" alt="PayPal - The safer...">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
and the function:
<script>
function doSubmit(){
var $cost=0;
var $code="";
var $currency=['NZD', 'AUD', 'USD', 'EUR'];
var parent = document.getElementsByClassName('sum');
for (i = 0; i<parent.length; ++i){
if(parent[i].checked === true){
cost = Number(parent[i].value);
code = currency[i];}
}
document.getElementById('amount').value = cost;
document.getElementById('currency_code').value = code;
document.getElementById('f').submit();
return true;
}
</script>
It seems like everything is fine with the code . The only thing you need to change in the script is the below line :
Currently you have :
code = currency[i];
Change it to :
code = $currency[i];
I just tried it at my end and it worked .
Please have look at my sample fiddle:
http://jsfiddle.net/ghtgggb2/
Couple of things
move the script to the bottom (not sure where it is in your HTML)
move the function to the form for testing onsubmit="return doSubmit()"
Okay here is my issue. I am using custom graphics for my submit/reset form buttons, but as soon as you press reset the form action is committed and I do not want that to happen and I have been searching the internet for a answer without any luck. I am including the form code as well in hopes as I might of just missed something.
<form class="contact" name="con_form" action="../includes/mailer.php">
First Name*: <input type="text" name="first_name" value="" /><br />
Last Name*: <input type="text name="last_name" value="" /><br />
Contact Number*: (<input type="text" name="area_code" value="" size="3" />) <input type="text" name="first_three" value="" size="3" /> <input type="text" name="last_four" value="" size="4" /><br />
Email Address*: <input type="text" name="email" value="" /><br />
I would like to*:
<select>
<option>--- Select One ---</option>
<option>Comment</option>
<option>Suggestion</option>
<option>Inquiry for employment</option>
</select><br />
Comment or Suggestion: <textarea size="1024"></textarea><br /><br />
<input type="image" src="images/sub_idle.gif" onsubmit="../index.php" alt="Submit" /> <input type="image" onclick="this.form.reset()" src="images/res_idle.gif" alt="Reset" />
</form>
input type="image" defines the image as a submit button. If you just want it to be a clickable image that triggers some javascript, there's no need to make it an input at all.
the <input type="image" input is actually a submit button
I would try this as a starting point: (not the best way probably)
<img onclick="this.form.reset();" src="images/res_idle.gif" alt="Reset" />
Don't use input type=image, use an A-tag with a CSS background.
.buttonImage {
background-image:url(/images/sub_idle.gif);
height:20px;
width:60px;
display:block
}
You can change the type to "button" and apply a css class to the button to customize the button.
<input type="button" onclick="this.form.reset()" class="resetbutton" />
I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>
I took this quick script from another post on StackOverflow, but it doesn't seem to work on my form. It just throws an error saying 'object expected'. Can anyone help me fix it.
<html>
<head></head>
<body onLoad="document.forms[0].submit()">
<form name="EPDQForm" method="post" action="mypage.aspx" >
<input name="item" type="hidden" value="data">
</form>
</body>
</html>
EDIT:
This is the exact page code (I removed most of it for displaying on here):
<html>
<head></head>
<body onLoad="document.forms[0].submit()">
<form id="myform" name="myform" method="post" action="https://secure2.mde.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e">
<input name="epdqdata" type="hidden" value="972">
<input name="returnurl" type="hidden" value="http://www.xxxx.co.uk/Secure/EPDQReturn.aspx">
<input name="merchantdisplayname" type="hidden" value="xxxxxx">
<input name="submit" type="hidden" value="purchase">
<input name="shipping" type="hidden" value="0.00">
<input name="baddr1" type="hidden" value="152 Smith St">
<input name="baddr2" type="hidden" value="">
<input name="bcity" type="hidden" value="Manchester">
<input name="bcountry" type="hidden" value="UK">
<input name="bpostalcode" type="hidden" value="M4 6DH">
<input name="email" type="hidden" value="xxxx#xxxx.co.uk">
<input name="saddr1" type="hidden" value="152 Smith St">
<input name="scity" type="hidden" value="Manchester">
<input name="scountyprovince" type="hidden" value="Alderney">
<input name="scountry" type="hidden" value="UK">
<input name="spostalcode" type="hidden" value="M4 5GG">
</form>
</body>
</html>
This code shows the error. And I don't see why. In firefox it says:
document.forms[0].submit is not a function
What happens if you remove the onload attribute from your opening <body> tag and place this code just before your closing </body> tag?
<script>
var frm = document.getElementById('myform');
if (frm) {
frm.submit();
}
</script>
Ok, the problem is in this part : input name="submit" type="hidden" value="purchase".
Submit input has the same name as the form function.
If you replace the name 'submit' by other name (submit1 as example) it should be working as a charm. :-)
Good luck.