I am trying to build a simple form for sending a newsletter:
<form method="post" id="newsletter_form" action="">
<label for="subject">Newsletter Subject:</label><br/>
<input type="text" name="subject" class="textField large" id="subject" /><br/><br/>
<label for="contents">Newsletter Contents:</label><br/>
<textarea class="textField" rows="6" cols="40" name="contents" id="contents"></textarea>
</form>
And then two buttons, one of them sets the action to a preview page, and target to _blank, to open in a new tab, and then the other button sets another action, and removes the target, so that it submits normally and sends out the newsletter. However, hitting the preview button only works once in Chrome/Safari.
I have searched, and found out that this is a bug in Chrome and Safari. However, I am trying to bypass this by creating another form using jQuery, with a different ID, removing the first form, and making the preview submit that second form. This still doesn't work. It works for IE and Firefox, just not in Webkit based browsers.
Is there any way to get around this?
This seems to work for webkit. Not sure how it will work for IE.
$("#newsletter_form").submit(function(){
$("#newsletter_form").submit();
});
Related
If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks
In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!
As I'm working on a mobile version of our company website I ran into, what I believe is, an issue with the BlackBerry 10 browser. (I'm using the Q10, version 10.1.0.4181)
I'm using jQuery to bind to the submit event on a form to do an AJAX call, so I have a preventDefault, but it seems that BB10 seems to ignore this when using the SUBMIT button the browser provides.
It works fine when pressing the enter key or pressing the submit button of the form, but when I press the Submit button which is at the bottom of my browser (alongside with the previous/next buttons) it ignores the preventDefault (and return false) and still continues on submitting the form.
I've set up a jsfiddle which demonstrates this:
http://jsfiddle.net/e4AHZ/4/
The code I'm using to bind is:
$(function () {
$(document).on('submit', 'form', function (e) {
e.preventDefault();
alert('done!');
return false; // as final resort, no luck =(
});
});
Anyone else who had this issue? Is there a possible fix/workaround?
Thanks!
I have worked around this by adding action="javascript:void(0);" to you form (see updated fiddle http://jsfiddle.net/e4AHZ/11/).
I do not know if this is good enough but action="javascript:void(0);" is in fact part of a solution given to a similar question.
<form method="post" action="javascript:void(0);">
<input type="text" name="field1" value="some msg" />
<input type="text" name="field2" value="some msg" />
<input type="submit" />
</form>
You can also set the action to "javascript:ajaxfunction();" where "ajaxfunction()" is the function you want to call to submit the form:
$('form').attr("action","javascript:ajaxfunction();");
This should allow you to take advantage of that submit button.
How to send enter from javascript to site?
What I real need is to send text to site like filehippo.com in search box, and press enter to search for those text.
So piece of code from site is:
<div id="searchbox">
<form name="f" action="/search">
<input style="color: #999" type="text" id="q" name="q" maxlength="150" value="Search..." onfocus="javascript:clearInputValue('q', 'Search...')" onblur="javascript:setDefaultIfEmpty('q', 'Search...')">
<input type="submit" id="search-submit" value="GO" onclick="javascript:submitQuery('q', 'Search...')">
</form></div>
And my simple code look like this:
javascript: document.getElementById('q').focus();document.getElementById('q').value='Winrar';document.getElementById('f').item(0).click();
And those script just put focus on search box and send text to them, but I need also to do automatically search (send enter), how to do that?
document.getElementById('f').item(0).click(); -> dont work
What I need is to simulate click of mouse, by enter, cause can't send click to element that work properly.
Is it possible to send enter with text?
Use document.f.submit(); to submit the form.
The problem is that there are multiple forms named 'f'
javascript:document.f[0].submit();
So the fully functional line would be:
javascript:document.getElementById('q').value='Winrar';document.f[0].submit();
Use onkeypress attribute of input element.
I'm trying to add attachment upload for my typo3 extension, and since the normal file-input
doesn't work with the design. I decided to add a text-input, to display the value, and a
button-input, to fire up the file-inputs click event. This works FF and IE without any Problems,
but when I try this on Safari the file-inputs click event doesn't work (others do!!!).
<form action=""
name="attachmentPostForm"
method="post"
onSubmit="createAttachmentPostAction(${uid});"
enctype="multipart/form-data"
target="attachementupload_target">
<input type=file
name="leadimagefile"
accept="image/gif,image/jpeg"
onChange="document.getElementById('ImageFakeFile').value = this.value"
id=imageTrueFile style="display:none">
<input type=text id=ImageFakeFile readonly>
<input type = button value="browse" onClick="document.getElementById('imageTrueFile').click()">
<input type="submit" value="upload" />
</form>
Is there another way to achieve the effect, or do i have to use the "normal" file-input on this case?
It's doesn't work because your input has style="display:none", change it to visibility: hidden and it will work. I also recommend to check https://stackoverflow.com/a/3030174/967358
I'm using jquery mobile 1.0 alpha 4.1 to build a login form.
The login form submits just fine the first time when I load it from:
http://m.myapp.local/
the form action is the following:
<form action="http://m.myapp.local/default/login" method="post">
this works fine the first login attempt, but when the login fails, we return to the following URL (this is jquery mobile doing this):
http://m.myapp.local/#default/login
Now when I try to login again / submit the form again nothing happens and I can debug to find the error. It says:
Javascript console: Uncaught TypeError: Cannot call method '_trigger' of undefined
When I debug even further, I see that jquery mobile is trying to submit to the following url:
http://m.myapp.local/default/logindefault/login
instead of
http://m.myapp.local/default/login
of course, that url does not exist which causes the error. Question is, how can I prevent jq mobile from behaving this way?
Full form:
<div data-role="content" data-theme="c">
<form action="http://m.myapp.local/default/login" method="post">
<div data-role="fieldcontain" class="center">
<input placeholder="Shop Name" id="login_sitename" type="text" value="" name="sitename" />
<input placeholder="Email" id="login_username" type="text" value="" name="username" />
<input placeholder="Password" id="login_password" type="password" name="password" />
</div>
<button type="submit" data-theme="b">Log in</button>
</form>
</div>
a strange thing I've noticed is that when I remove the hash tag from the url and submit the form again, it all works, so it definitely has something to do with that.
BUT, when I remove the hash tag, it also stops using transitions, the back button is gone as well and the jquery mobile "loading" dialog is also gone...
seems like it's a jquery bug. When using alpha 2, it works...
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
You might try diabling AJAX for form posting. I had the same issues on my site:
http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
You can try this in the submission link:
data-ajax="false"
Try using a "%23" (without the quotes) in place of the # symbol. So if the URL reads
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
replace it as
http://jquerymobile.com/demos/1.0a4.1/%23docs/forms/forms-sample.html
Hope this helps!