I have the following form:
<form id="vintro-upload-form" action="{url}?nexturl={nextUrl}" method="post" enctype="multipart/form-data" >
<input name="file" type="file"/>
<input name="token" type="hidden" value=""/>
<input value="Upload Video File" type="button" name="submit" onClick="checkFile()" class="button" />
</form>
and the following javascript:
<script>
function checkFile(){
var fileVal = document.forms["vintro-upload-form"].elements['file'].value;
//RegEx for valid file name and extensions.
if(fileVal != ""){vintro-upload-form.submit();}
else {alert('Please select the Video file.');}
}
</script>
What works? The fileVal assignment is good. Submit isn't working, when I checked the debugger, it is saying: "vintro is undefined."
What have I tried?
The following examples and code:
http://www.w3schools.com/jsref/met_form_submit.asp
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
document.vintro-upload-form.submit();
document.forms["vintro-upload-form"].submit();
document.getElementById("vintro-upload-form").submit();
changed the dashes/hyphens to underscores
All to no success. There is some jQuery (in another .js file) going on with this form as well, and it functions properly with the hyphenated name.
Why is the submit call not working?
EDIT:
I have tried using document.getElementById('vintro-upload-form').submit(); as suggested in the answers to this question, however, this is still failing. My (Firefox) debugger is saying that it is not a function. Chrome's debugger explained a little bit more: "Uncaught TypeError: Property 'submit' of object # is not a function" (I'm going to Google this in the meantime.)
Since I have less than 100 reputation:
Ok, so it turns out, I was asking the wrong question.
Here's the answer I found:
Submitting Form Via Javascript, form defined in external PHP file
Check the accepted answer as well.
This JavaScript:
document.forms["vintro-upload-form"].elements['file'].value
is looking for the NAME attribute of the form tag:
document.forms[{form_name}].elements[{field_name}].value
You just have an ID. Copy the value of the ID to a NAME and you're done.
However, document.getElementById() is the preferred, modern way of doing this with plain JavaScript.
HOWEVER: You can't have a submit / button named "submit".
When you do and you call the JavaScript submit() function, you get a conflict.
You simply need:document.getElementById('nameofform').submit() is easier to find elements by its id than for the name.
Other way is to get elements by name, you can do it with document.getElementsByName('nameofform')...But that returns an array so you need to iterate that array to find which of those forms is needed to be uploaded. So, I think you should use the id.
The name of your form contains characters that cannot be used in a JavaScript identifier (dashes). Use document.getElementById('vintro-upload-form').submit(); instead.
Related
So I have a form that requires a user to submit their website to a form. Here is the html line:
<input type='url' name='link'>
And I'm using <input type="submit" value="submit" formmethod="post"> to submit the form to a php
And I'm trying to retrieve the values in my php file with:
$link = $_POST['link'];
Why isn't this working? At first I thought it was because I had htmlspecialchars() but it's not coming through without it either. I can't find anything in any google search that even mentions anything related to this kind of problem (with a type="url" form)
What do I need to do to process form data with type of "url" in PHP with a $_POST?
Get your form method to be set to post e.g
<form method=post>,
if you submit the form and in the url in your browser u can see some more inf then be sure 2 check your form method
I think this is wrong,
method="post"
Its only method, not formmethod
Also make sure, you dont have one more for element name with link.
i send an HTML email with a form and a button like this:
<form action="http://myurl/index.php" method="post">
<input type="hidden" name="testing" value="123456">
<button class="btn" type="submit">SEND</button>
</form>
then in my index.php page i read the testing variable, in this way:
echo $_POST['testing'];
but i can't read the variable and give me this:
Notice: Undefined index: testing
there is a way to send a variabile from an html mail to a php page?
Oh. Got that Email Part now.
Most Mail-Programs won't do POST requests, for security/privacy reasons. Use GET here:
in HTML:
SEND
and in PHP:
echo $_GET['testing']
Of course the data is visible in that case - but that's the entire point.
Emails don't play well with a lot of fairly standard html. In this case, I'd use something like this:
Submit
And then style your anchor to look like a button. Then on your php side, use this to make sure the variable gets there:
print_r($_GET);
What happens when you replace:
<button class="btn" type="submit">SEND</button>
With
<input type="submit" value="Send" />
I realize you are probably styling it given that you have a class statement but you can still style an input type="submit" easily enough. I ran into issues posting variables using the object.
Also, FWIW, you don't need to specify the full URL in the action. In fact, you should probably do the following to safeguard your self against XSS attacks:
<form action="<? echo htmlentities('/path/to/index.php'); ?>" method="post">
When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked, it works perfectly in FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.
It's not about sending any random object, but sending a pair as input_name=input_value. The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"
What can I do to fix this problem?
Per the HTML spec, clicking on an IMAGE input will return the parameters:
name.x=x-value and name.y=y-value where "name" is the value of the name attribute
with x-value and y-value corresponding to the click position.
Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:
/^(.*)\.[xy]$/
to search for the IMAGE input keys to determine which IMAGE was clicked.
I tried with this sample:
<form action="#" method="GET">
<input type="text" name="t" value="Text here"><br>
<input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br>
<input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</form>
And I get the following urls:
FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
IE 8: x.html?t=Text+here&b.x=22&b.y=18
IE 7: x.html?t=Text+here&a.x=185&a.y=51
Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#
So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.
The problem was half solved up to now: like here
But it didn't allow to get the value!
The correct answer is:
$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){
$(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />');
});
This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.
I recommend putting it in $(document).ready();
I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9.
My work around was to put each image in its own form and then also use a hidden input to send the needed data.
<table>
<tr>
<td>
<form method="post" class="form_photo">
<input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
<input type="hidden" name="photo" value="nameoftheimage.jpg" />
</form>
<form method="post" class="form_photo">
<input ...>
<input ...>
</form>
<form> ...
</td>
</tr>
Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.
.form_photo { display:inline; }
seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.
Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
i searched again and again but could not find the right answer. here is the situation. i got more than one forms in the same php file and below shows the code.
when i echo as below
echo count($_FILES["fileUploadPath"] );
it shows 0 as the count and
Notice: Undefined index:
addProjectFileUploadPath in C:\wamp...
updated: probelm solved..... error came due to 3rd party jquery plugin called "fileinput"
add enctype="multipart/form-data" to the form
Try looking at the entire array with this:
echo "<pre>".print_r($_FILES,true)."</pre>";
Then use this manual page to let you know what the error numbers mean. That will probably give you a good idea of what is going on.
PHP File Upload Error Codes
Okay, there are a couple of things you need to be aware of.
1) You can have as many forms on a page as you want, but you can only submit one of them. You need to make sure the form you expect is being submitted. I'm assuming you're using the submit button names for doing this. However this can result in problems if someone submits the form by hitting enter in a text entry region, the button won't be submitted. A hidden field would be better as it would always be submitted.
2) There doesn't seem to be a MAX_FELE_SIZE form input anywhere in your file upload form. File uploading will not work without it. You need to put something like <input type="hidden" name="MAX_FILE_SIZE" value="30000" /> before the file inputs on your form.
I had the same problem before and I noticed that It happens when I don't close the tags, so try closing all input tags like this:
<form action='upload.php' method="post" enctype="multipart/form-data">
<!-- at the end of the input add / -->
<input type='file' name='file' />
<input type='submit' name='upload' />
</form>
$('#images_upload_add').click(function(){
$('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());
});
using this code to append file input's does not upload the file in firefox.
also
$('#image_server_add input[type=button]').click(function(){
var select = $(this).siblings('select').find(':selected');
if(select.val()){
$('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
}
})
also does not upload the values to the $_POST
I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit
Why wouldn't these examples correctly upload the form values?
Bottom line the markup on the page was mangled.
The form was in a table based layout, not by my choice, and the form declaration was inside a tr.
I moved the form declaration to a parent td of the form inputs and now it works.
This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.
I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.
Any more notes/conjectures about my findings would be appreciated.
Are you having the same problem if you create a new input rather than cloning an existing one?
Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?
What is the purpose of adding the markup of the selected option to a hidden input?
For fun, have you tried using .clone(true)?
Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.
You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.
Perhaps I'm barking up the wrong tree?
Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.
Then when the button is clicked, populate that element with the right value.
I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.
I got to this section from google searching a similar problem.
To me, I was able to fix it by taking a step back at the problem -
in a example form:
<table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>
This will work in Internet explorer for some reason, but it is actually invalid html.
Move the form tags to outside the table, like so:
<form method="post">
<table>
<tr>some content <input type="text" name="test"> </tr>
</table>
</form>
And it will then work.
The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.