Triggering Submit in File Upload with JQuery Form Plugin - javascript

I'm using the JQuery Form Plugin for a file upload.
now, at the moment i'm using a regular submit button, but i'd much rather like to have a div trigger the submit.
I tried this...
$(document).on('click', '#settings_changeprofilepic_dialog1_submit', function(event){
$(document).find('#UploadNewImage').submit();
});
('#settings_changeprofilepic_dialog1_submit' is my new submit div)
('#UploadNewImage' is my form)
But it just won't fire...
Can someone help me with this? I've tried to google this problem, but the terms JQuery, Form, Submit, File Upload, and so on seem too ambiguous to get the answer I'm looking for...

From what you have provided it is a bit difficult to determine the cause of the problem. Lets try some simple debugging to get an idea of what might be happening.
I would probably try logging the form to the console first to make sure jQuery has actually found the form. Just like this: console.log( $(document).find('#UploadNewImage') );
If you're still having trouble it would be great of we could see the code. Give us a link to where it's hosted or use a website like jsbin or jsfiddle.

Related

disable the submit button

I have a contact form on my website that emails me info from interested parties. I don't want to use a captcha for various reasons. I just want to do something simple, like disable the submit button on the form until the user answers a simple question. Hopefully this will keep out some bots at least.
I found this on the web but it does absolutely nothing:
<script>
document.getElementById("Submit").disabled=true;
</script>
Can someone either correct this or give me something better?
First of all make sure that if you are just testing that code that you have it in an onload function as such:
window.onload = function(){
document.getElementById("Submit").disabled=true;
}
Also make sure that the ID is actually Submit and not submit because JavaScript is case-sensitive.
JSFiddle: Example of disabling a button.

Magento CheckOut js validation error

I started to edit a magento template and I stumbled upon an error: if I miss a required field and click the submit button, the "this is a required field" text appears underneath the respective field; but when I recomplete the form and click the 'submit" button for the second time, I realise that it is blocked.
Has anyone gone through the same thing? I don't know javascript at all and I'm not able to do it myself.
Im in a great need of getting this done, so please, lend me a hand.
For anyone else who finds this question: I ran into this issue and after much debugging realised that it was because I had removed scriptaculous/effects.js from the layout of the checkout page.
The form validation JS depends on effects.js, but the code that uses it is inside a try/catch block meaning that you will not get console errors, and instead the form will just fail to revalidate correctly.
Take a look at this link it will give an explanation of the javascript validation in Magento. the thing to look for is the class in the text/select fields if it has required or any of the other ones listed in the link, it will run the validation through those.
http://fishpig.co.uk/magento-tutorials/magento-forms-prototype-javascript-validation

whats the difference between jQuery UI and nyroModal for creating a modal box

I'm totally new to javascript and trying to figure out which jQuery plugin best suits my needs.
I've looked at a few and tried to implement them and basically found that UI plugin works the best but even though you can play about with the theme it doesn't look nice and plain like I want it.
NyroModal on the other hand looks right but I can't get my form to submit when it's inside a modal. I've found out that it might have something to do with using an ajax call but I haven't a foggy idea what thats all about. All I know is my form submits fine using UI but nothing at all happens which I click submit in NyroModal.
So whats the difference? Why does one allow you to submit a form but the other doesn't?
thanks in advance :)

Using Javascript, how can I display form results in a popup window after being submitted?

I'm fairly new to Javascript. I'm trying to write a pretty basic program that will display the results of a form in a popup window after being submitted by the user.
I've got a form with all the relevant IDs. My problem is accessing this form from within the popup window. I've been playing around with window.opener.formid1, window.parent.formid2, document.forms[0] changing values where necessary, trying anything my countless searches have returned, but all I seem to get are "undefined" errors. I tried defining my variables in several different places but after a lot of testing I'm getting nowhere.
I'm aware you can use, for example
var popup = window.open("popup.html")
popup.document.write('')
which works fine but I don't want to overwrite the contents that are already in there and unless I'm mistaken, there isn't a way to append or edit a file.
If someone can offer a solution or any feedback, it'd be much appreciated. Thanks.
Have you tried: popup.document.getElementById('formID').appendChild. I beleive that should work.
If I understand it correctly, you are trying to submit your form and want to display the result in a new pop up.
If you want to submit your form and want to get the response use the AJAX which is again javascript. You can get AJAX examples from google for your assistance.
As you have already mentioned, writing on popup or sending value to the popup (may be through query string) would work after you receive the result from AJAX request.
From the popup, the following should work:
var form = window.opener.document.getElementById('formid1');
// Get data from form here.

jquery change method to trigger hidden file input

I have created a fake file input using an anchor tag and placed a hidden file input beside this, I want to use jquery to add a click event to the anchor tag that triggers the activation of the hidden input box but Im not completely sure how to achieve this, if anyone could give me some advice that would be great.
Here is my current effort http://jsfiddle.net/kyllle/CdXP9/
I guess Im probably way off with this one, would love some advice on how this can be achieved though
Kyle
http://jsfiddle.net/CdXP9/6/
$('#upload').css("visibility", "hidden");
$('#fakeUpload').click(function(e) {
e.preventDefault();
$('#upload').trigger('click');
});
I cannot say for certain that it isn't possible, but js code to automatically upload a file is very much frowned on, and deliberately made difficult. So I think you are probably on a hiding to nothing with this.
Use the click function it will open the browse window- if that's what you want- see http://jsfiddle.net/CdXP9/5/

Categories

Resources