HTML upload file small manipulation - javascript

When I use this code on IE8, the file is sent through the HTTP request fine:
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
but when I add another intermediate button, 'Add file', as you can see below instead of pressing the 'browse' button itself, the file isn't sent to the server side, why??
<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input id="fileChooser" type="file" name="datafile" size="40">
</p>
<button onclick="document.getElementById('fileChooser').click()">Add File</button>
<div>
<input type="submit" value="Send">
</div>
</form>

Change the event handler:
<button onclick="document.getElementById('fileChooser').click(); return false">Add File</button>
Your button was acting as a "select" element. You could also make it work by explicitly setting the button type, I think:
<button onclick="document.getElementById('fileChooser').click()" type='button'>Add File</button>
Now, this works in Chrome, maybe Safari, and you say now that it works in IE8 as far as getting the file chooser up. It won't work in Firefox, however, because Firefox appears to be more strict about what you can do to file inputs.

Have the real input of type file hidden by setting its opacity to 0 then put the fake button on top of it, with smaller z-index value. This way when clicking the fake button, user will actually click the real button underneath and you will achieve the visual effect you desire.

OK read some articles. Apparently that's just impossible.
I hope that HTML5 and IE9 will improve the customization of the annoying upload button, in many aspects.

Related

How to submit data to another form?

I have one form on one page and another on another website. How do i submit the data filled out on the first form to the other?
This is the code i have.
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Comments: <input type="text" name="comments"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="http://www.example.com/formresult.asp")>Submit to another Form</button>
</form>
Ok so i want my users to fill out one form, but have the option to send to another form.
The reason i need this because i have different HELP DESK support teams. INSTEAD of a number of different contact forms on a lot of html pages in my directory, i want to just have the option to send to anyone of my HELP DESK support team from one form. ALL THE FORMS are the same, the PHP files are the same. The EMAIL addresses are the only thing different for each team member.
The OPTION to send to a URL is also helpful. I read it is called 'An absolute URL ' and 'A relative URL' as Attribute Values, but i think i am coding it wrong, it will not work for me.
type="submit" formaction="http://www.example.com/form.php")>Submit to another Form
If i can get some help by an example on the code i will need to do both of these actions - i can start to test my new gaming clan website live.
Thanks in advance
Please advise
Try this you have to change the attributes for action tag on each button click. I have change submit type in to button and placed a hidden input type as submit. hope this help you to move on.
<form action="/action_page.php" method="get" id="myForm">
First name:
<input type="text" name="fname">
<br>
Last name:
<input type="text" name="lname">
<br>
Comments:
<input type="text" name="comments">
<br>
<input type="submit" name="sub" id="sub" style="display:none;">
<button type="button" onClick="javascript:document.getElementById('myForm').setAttribute('action','action_page.php'); javascript:document.getElementById('sub').click();">Submit</button>
<br>
<button type="button" onClick="javascript:document.getElementById('myForm').setAttribute('action','http://www.example.com/formresult.asp'); javascript:document.getElementById('sub').click();">Submit to another Form</button>
<br>
</form>
I think your problem is in the
<form action="/action_page.php" method="get">
You should target it to your php like this:
<form action="/http://www.example.com/formresult.asp" method="get">
Then on the receiver file you should type the handling of the results

lose focus() on input

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fiction()
{
shohai.javat.focus();
}
</script>
</head>
<body>
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button onclick="fiction()">Aceptar</button>
</form>
</body>
</html>
thank you for answer me.
im traying to focus the javat input, it works but instantly loose his position. Why?
i searched in the web whit bad luck.
Well, it seems to me that when you press the "Aceptar" button, the input does focus, but the form also submits, effectively reloading the page, and giving the impression that the focus is lost. This is because a <button> tag without any type attribute will default to submit. So, simply add a type="button" to the tag, so it is <button type="button">.
The full code with that change:
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button type="button" onclick="fiction()">Aceptar</button>
</form>
And like other users said, it is not very clear what you want to do. Do you want "Aceptar" to... submit the form or just focus the input? You can't submit and focus at the same time (WELL, you can, but submitting a form reloads the whole page). And it'd also be a better idea to identify your elements via DOM methods, I didn't even know you could just do shohai.javat, to be honest.

Restore Default Form Submit thru Button/type='submit' behaviour

I have a button in the jquery mobile form, which defines the post action attributes.
<form id="form1" enctype="multipart/form-data" data-ajax="false" method="POST" target="uploadTarget" action="https://graph.facebook.com/me/photos?access_token="...">
<input id="source" name="source" type="file">
<input id="message" name="message" type="text">
<button id="upload" type="submit" name="upload">Upload Photo</button>
</form>
The post method on the form is not called when I click on the styled button.
The method 'post' is called on the form if I use data-role="none"
<button data-role="none" id="upload" type="submit" name="upload">Upload Photo</button>
But the button obviously loses the mobile styles.
I have data-ajax="false" at the form level as shown (thanks to CBroe!) , but that does not help.
Is there any option to get the jquery mobile styles on buttons, but leave the default Form events and submit/post behavior.
I have already tried to data-ajax="false", but that does not help.
Where did you put that – on the button element, or on the form element? (It’s supposed to be set on the form.)
The problem was the mobile css file. I was using an older version. after including the latest version :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.min.css" />
It seems to work.

safari and fileupload form doesnt work

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

does the submit button have to be contained in the form

I want my submit button to be positioned somewhere that outside my form element? Do I have any options? With the exception of jquery.
Thanks,
rodchar
Another approach to this is merely to set the form attribute on the button:
<form id="first">
<input type="submit" form="second" value="Submit Second" />
</form>
<form id="second">
<input type="submit" form="first" value="Submit First" />
</form>
Fiddle: http://jsfiddle.net/52wgc2ym/
Original Answer
The natural behavior of a submit button is to submit the nearest form up its hierarchy. The only other way to get a button to submit a form which it doesn't reside in is to use JavaScript (which is what jQuery is, basically).
If necessary, you could reposition the submit button so that it appears as though it's not in the form visually when the page is rendered. You would do this using CSS, which may give the desired result(s).
The submit button needs to be inside the form, yes.
It seems strange to me to want it any other way, anyway. What would be the point if the input controls were in one place on the page, and the submit button was waaay over there somewhere else?
Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc). You could also write JavaScript that will trigger the form submission and tie it to another element.
This is a common situation. I think this will do it (haven't tested it):
<form id="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
I'm not sure if you need that last <form>. I seem to remember browsers ignoring events if the button wasn't in a form.
Inputs of type submit only make sense as children of <form> elements. But using CSS I'm sure you can position it wherever you like. Remember form elements are "invisible" so just expand the tags around more of your content and you're covered. Here's the documentation on forms for HTML4, it's still appropriate.
This is the another type of answer getting more clear view from egrunin answer
<form id="form1" name="form1" action="someAction.cgi" method="GET">
<!-- other fields go here -->
</form>
<form id="form2" name="form2" action="someOtherAction.cgi" method="GET">
<!-- other fields go here -->
</form>
Calling by form id:
<form>
<input value="Form One" type="button"
onclick="document.getElementById('form1').submit();"/>
<input value="Form Two" type="button"
onclick="document.getElementById('form2').submit();"/>
</form>
or Calling by form name:
<form>
<input value="Form One" type="button"
onclick="document.form1.submit();"/>
<input value="Form Two" type="button"
onclick="document.form2.submit();"/>
</form>

Categories