Javascript automatic form submission - javascript

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.

Related

Submit a POST Form that is in iframe in other domain name

Assuming that website1.com/page_1.php has a form like this :
<form action="http://www.website1.com/action" method="post" id="myForm">
<input type="hidden" name="_token" value="sdfddgfg">
<input type="hidden" name="category_id" value="1">
<input type="submit" class="btn send" value="Send">
</form>
And website2.com/page_2.php has iframe like that :
<iframe src="http://www.website1.com/page_1.php"></iframe>
Using JQuery or JS ,How can I submit the form with id myForm without click when visiting website2.com/page_2.php?.
You could do something like this just in the HTML of your iframe (you don't need to do anything on the "parent" window:
<html>
<head>
</head>
<body>
<form action="https://www.yoursite.com/" method="post" id="myForm">
<input type="hidden" name="_token" value="sdfddgfg">
<input type="hidden" name="category_id" value="1">
<input type="submit" class="btn send" value="Send">
</form>
<script>
(function() {
document.getElementById('myForm').submit()
})();
</script>
</body>
</html>

submit a form in jQuery [duplicate]

This question already has answers here:
Submit a form using jQuery [closed]
(22 answers)
Closed 8 years ago.
I have a form like this
<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
buy Now
</div>
</form>
and I want to submit the form using jquery by taking the id. So can someone kindly tell me how to do this?
Update
You can see with each link I have the id. I just want to pass this id to the form action.
Try to use the .submit() function to manually trigger the form's submission,
$('#add-to-cart').submit();
You can use the .submit() function to submit your form through id's ..
you need to try like this. otherwise you cant get result.
<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="">
buy Now
</div>
<div>
buy Now
</div>
<div>
buy Now
</div>
</form>
<script>
$('.buy-now-button').click(function(){
$('[name="id"]').val($(this).attr("id"));
$('#add-to-cart').submit();
});
</script>
As mentioned in this SO article, you can post back the value of a button if you give your submit button a name property (and obviously, a value to post).
From the linked question (with corrected code snippet):
<input type="submit" name="respond" value="Confirm" class="btn_confirm" />
<input type="submit" name="respond" value="Ignore" class="btn_ignore" />
The "response" value that will be posted back to the server will contain either "Ignore" or "Confirm", depending on which button was clicked.
I would suggest adding these attributes so the form submission will send back the value you want, and no custom code or custom event is required. That should keep it easier to understand.
<form id="add-to-cart" action="test.php" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
buy Now
</div>
<div>`enter code here`
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
buy Now
</div>
<input type="hidden" name="currentId" id="currentId" >
</form>
<script>
$( ".buy-now-button" ).click(function() {
$( "#currentId" ).val(this.id);
$( "#add-to-cart" ).submit();
});
</script>
Your can get the current id from $_POST['currentId']
As you have several inputs with the same name, your form looks more like three forms.
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
<button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
<button type="submit">buy Now</button>
</form>
Now if you want to submit your form(s) via ajax, you can do something like:
$(".add-to-cart").on("submit", function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: $(this).attr("action"),
method: "POST",
data: $(this).serialize()
});
});
UPDATE:
But unless you want a fallback in case javascript is deactivated, you don't need any form:
buy Now
buy Now
buy Now
JavaScript:
$(".buy-now-button").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: "http://example.com/add_to_form",
method: "POST",
data: {id: $(this).attr("id")}
});
});

Form Validation Javascript

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

onBlur attribute is not working with a condition

I am trying to style a search box with the onFocus and onBlur attributes, but i don't get the expected result. Here is my HTML code
<form action="index.php" method="post" class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20"
type="text" size="30" value="Search..."
onblur="if(this.value=='') {this.value='Search...'; this.className='search-default';}
elseif(this.value!='' && this.value!='Search...') {this.className='search-userinput';}"
onfocus="if(this.value=='Search...') {this.value=''; this.className='search-userinput';}
else {this.className='search-userinput';}" class="search-userinput">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="task" value="search">
</form>
If I don't set a condition for the onBlur attribute, then the onFocus bit works, but I need both to work. What solutions do I have?
this will work:
<script>
function setb(obj)
{
if(obj.value=='')
{obj.value='Search...'; obj.className='search-default';}
else if(obj.value!='' && obj.value!='Search...')
obj.className='search-userinput';
}
function setf(obj)
{
if(obj.value=='Search...')
{obj.value=''; obj.className='search-userinput';}
else
obj.className='search-userinput';
}
</script>
<form action="index.php" method="post" class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20"
type="text" size="30" value="Search..."
onblur="setb(this)"
onfocus="setf(this)" class="search-userinput">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="task" value="search">
</form>
and we dont have elseif ! that's else if.

HTML - I cannot write in some textboxes shown dynamically by javascript in internet explorer

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>

Categories