I'm having some problems with AOL and IE 7.
Some members on my site have this setup and I'm having trouble getting some forms to work for them.
The html/javascript is this
<li >Award</li>
<form action="" name="form_user_award_give" method="post">
<input type="hidden" name="action" value="Give Award"/>
</form>
function photo_user_award_give() {
//simple function to submit a form
document.form_user_award_give.submit();
}
I've just taken the main bits just to give you a flavour.
I also have another problem with another button.
here is the code.
<li>
<form action="#edit_box" id="edit_photo_form" method="post">
<a onclick="document.getElementById('edit_photo_form').submit();" style="background-image:url('http://www.ephotozine.com/v5/images/site/pencil.png');" href="javascript:void(0)">Edit</a>
<input type="hidden" name="action" value="Edit"/>
</form>
</li>
I need to keep the elements as they for style are which is why I haven't used a submit button.
Does anyone have any ideas?
Or a place to download AOL 9.0?
Thanks
Richard
Got the answer instead of href="javascript:;" or href="javascipt:void;" use href="#" as the page is refreshing anyway this seems to do the trick. or event #nogo to keep the screen where it is
Related
I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.
I am trying to submit the parent form, using an "onclick" event without specifying the form's id. There is a reason for this. I am using a webfont for a button hence the "span".
My code:
<form action="/Index" method="post"> <p>
<span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
I have also tried:
onclick="this.form.submit();"
This also failed to work.
What is the correct code please?
You can use document.forms[0].submit() if you have only one form in page.
In case if you have multiple forms on the same page then it would submit the first encountered form.
Is there any other forms?
if no, try: 'document.forms[0].submit'
otherwise, add a id to the form
<form id="testForm" action='..'>...</form>
document.getElementById('testForm').submit();
You didn't close your form element.
<form action="/Index" method="post">
<p>
<span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
</form> /*This*/
Should work once you close it.
The below strategy to submit the form would work even if have multiple forms on the same page given that you provide a unique id to each form. The <form> should be provided an id attribute so that specific can be targeted with the given id as below:
<form id="myFormId" action="/Index" method="post">
<p>
<span onclick="document.getElementById('myFormId').submit()" class="fa fa-arrow-circle-right" role="button" style="font-size:50px;cursor:pointer;"></span>
<input type="hidden" name="id" value="10000"/>
</p>
</form>
I've got a form that uses jQuery to set the value of a text field. The form doesn't work when the page is first loaded, but it does work after the refreshing the page To help, describe the problem, I recorded a ~30 second video (hosted on SwfCabin):
Any idea what might be causing this? I'm a jQuery newb and I've no clue!
Here's jQuery code
$(document).ready(function () {
$(".category").each(function () {
$(this).find("a").click(function (event) {
event.preventDefault();
var category = $(this).text();
$("#post_categories").val(category);
});
});
});
And here's the HTML form:
<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post"
method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="OCbmfFY1cNsaa5e+SbvcSrP0ubQTg432ECNGmvaU8bM="
/>
</div>
<p>
<label for="post_title">Title</label>
<input id="post_title" name="post[title]" type="text" />
</p>
<p>
<label for="post_url">Url</label>
<input id="post_url" name="post[url]" type="text" />
</p>
<p>
<label for="post_categories">Pick a category</label>
<input type="text" id="post_categories" />
</p>
<p>Available choices:</p>
<ul>
<li class="category"> programming
</li>
<li class="category"> cats
</li>
<li class="category"> batman
</li>
</ul>
<p>
<input name="commit" type="submit" value="Submit" />
</p>
</form>
Looks fine ,make sure you have included jQuery lib, also you can optimize the code a bit.
$(document).ready(function() {
$('.category a').click(function(event){
event.preventDefault();
var category = $(this).text();
$("#post_categories").val(category);
});
});
Fiddle: http://jsfiddle.net/DGW3Q/
I thought Arun P Johny and Farhan had provided the answer I was looking for, but it turns out I had a different problem. The app I'm writing is Ruby on Rails and I didn't get the memo about how Rails' Turbolinks overrides some jQuery functionality.
For example, by default in Rails 4.0.0, Turbolinks handles executing JavaScript on page load. This means I was trying to use $(document).ready(;, but Turbolinks had hijacked that functionality. For reasons I don't yet fully understand, refreshing re-enabled my jQuery script and then it started working. I guess Turbolinks' version of $(document).ready(; doesn't get reset when the page is refreshed?
As a short term hack, I ended up solving the problem by installing the RubyGem "jquery-turbolinks". At some point I'll need to learn how to use or disable Turbolinks. Maybe I should just learn to use Angular or Ember :) DOM shenanigans are a pain!
Ryan Bates discusses Turbolinks in Episode #290 of Railscases, including how code gets executed at page load.
I have a website where I want people to be able to type something in a text box and get sent to that directory based on what they entered.
Say customer numbers, so we have customer # 155. His invoices are in folder /invoices/155 directory. I want him to be able to type in his customer # and be directed with a button click to his directory with all his invoices.
Now I have coded the below code but it only works when I click on the button with the mouse. In Internet Explorer When I press enter it gives me a bunch of gook in the address bar and doesn't do anything. It looks like this in the address bar:
file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155
Instead of loading the folder /invoices/155/.
<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">
</form>
Can anyone tell me what is wrong with the code and what can I do to fix it? Thanks in advance.
In some browsers the form will be posted when you press enter, eventhough there is no submit button. Use a submit button, and catch the submit, then you handle all cases:
<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>
It won't work, if you use file protocol. Especially in IE. You need a real web server.
And to let a customer type in his on id is extremely insecure. Anyone could type in any id. Use a login.
It is really*** important to sanitize every user input to prevent abuse.
It is a long way to go.
I think you should go for onsubmit on <form>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function handleFormSubmit(form)
{
window.location = form.dir.value + form.userinput.value;
return false;
}
</script>
</head>
<body>
<form onsubmit="return handleFormSubmit(this)">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text">
<input type="submit" value="try me" >
</form>
</body>
</html>
BTW:
Inlining javascript is not so good. Use script tag or external .js-file.
Edit:
Oops! OK, the error was that I wrote this.form.dir but it needed to be this.dir because this already referred to the form, now that the javascript handler was on the form tag (onsubmit="<handler-code>"). That works - http://jsfiddle.net/Q875a/
Edit 2:
Inlining javascript means that you write javascript code in your html tags (form, input,...) in the onXXX attributes - it's not readable. Having your script in a script tag within a handler-function (i.e. handleFormSubmit) makes it much more readable especially if your site gets more and more script in it - see current script and onsubmit-attribute.
Finally, if you want to to take a step further to crossbrowser, powerful javascript development you should take a look at jQuery - it's imho the door to really professional and exiting javascript programming!
JSFiddle to test:
http://jsfiddle.net/yNTK5/
jQuery-links concerning the topic:
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/
I have simple form.
<form target="_blank" action="somescript.php" method="Post" id="simpleForm">
<input type="hidden" name="url" value="http://...">
<input type="hidden" name="code" value="wrxosf">
</form>
...and there are some anchor link
Do it!
It works fine in FireFox or IE, but Google Chrome.
Chrome does once, then link become unclickable.
Also had such problem.
The decision was to add something random to URL each time before submitting.
HTML:
<form action="go.php" method="post" target="_blank" id="go">
...
</form>
JavaScript (jQuery):
$('#go').attr('action','go.php?'+Math.random()*1000).submit();
Forms with target="_blank" submiting only once.
This is webkit & chromium bugs.
I am running Chrome 7.0.5 and also still having this problem. Setting the action to something different each time as suggested above works! :)
This problem was fixed in the latest version of Chrome 5.0.375.55