We Keep Coding

Form inside angular component does not submit

I have a classic html form element which works fine when I insert it into the index.html of an angular application. A click on the button submits the form. If I insert the same form in an angular component html file, it is rendered as well but when I click the button, nothing happens.
<form method="post" action="https://blub.shtml" id="form" name="form" target="_parent">
<input type="hidden" name="data" value="data" />
<input type="submit" value="Send" />
</form>
Why does this happen and how can I fix it?
EDIT: I cant use (ngSubmit) because of the CORS policy of the server.

Try this approach to see if it work
<form method="post" action="https://blub.shtml" id="form" name="form">
<input type="hidden" name="data" value="data" />
<button type="submit"/>Send</button>
</form>

Try this
<form ngNativeValidate (ngSubmit)="onSubmit()" #form="ngForm">
and in onSubimit method you can to whaterver you want.

Why does form action call not keep input file when using back button?

function validate_form()
{
//..... validation and other stuff will go here ...
}
<form name="read" id="read" action="test2.php" method="post" enctype="multipart/form-data" onsubmit="return validate_form();">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file remains.
function validate_form()
{
//..... validation and other stuff will go here ...
document.read.action = "test2.php";
}
<form name="read" id="read" action="" method="post" enctype="multipart/form-data" onsubmit="return validate_form(this);">
<input type="file" name="pac" />
<input type="submit" name="submit" value="Submit" />
</form>
In the above example, if you hit the browser back button, the input file is cleared. Why is that? Is the only way to get around this is to save the input into a cookie or session variable? If so, not sure how to save a file.
I have a reason to use the call from JS. I removed most of the code for the above examples. This is happening under Chrome and Firefox. Didn't test others.

Jquery submit() doesn't pass file data

I have a very simple form.
<form name="text_hero" id="text_hero" action="<?php echo site_url('templates/saveImage/texthero'); ?>" method="post" enctype="multipart/form-data">
<input type="file" name="uploaded_file">
<input type="submit" value"submit file">
</form>
When pressing the submit button the file is uploaded correctly and saves.
When using Jquery to either "click" the submit button or manually submit the form it fails to send the file.
Jquery:
$('#' + FormName).submit();
Can anyone tell me the reason for this?
EDIT
When outputting the php $_FILES var it just outputs Array() with the jquery method but with the button method it outputs the actual file.

About
When you do some upload of files you need put on form this enctype="multipart/form-data"
Example:
<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
To save the tmp_file to some file
you need put some validation but the basic upload some file is this.
move_uploaded_file($_FILES['file']['tmp_name'], 'path/to/file');
I hope it help you.

How to prevent page redirection/refresh after form submit, while preserving file input? Jquery

I have a file upload form as follows:
<form id="upload" action="someurl" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
Problem is that every time I submit the form I will be redirected to the form's action url.
How do I submit this form while still staying on the same page? Using ajax or preventDefault won't work as I will lose the file stream.
Rendy

Provided you have an iframe on your page that's hidden,
<iframe id="hidden-iframe"></iframe>
then add a target to your form:
<form id="upload" action="someurl" method="post" target="hidden-iframe" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
you're done !

Blobstore upload with javascript

This is the minimal declaration for the HTML in order to upload a file in Blobstore in the upload_url. What is required with this solution is required to click the Submit button in order the content to be submitted and get redirected. How can I do the post in the background with javascript or jQuery without losing the enctype?
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="submit" name="submit" value="Submit">
</form>

The jQuery Form plugin allows you to submit multipart forms in the background with Ajax.
Example:
$('#upload_file').submit(function() {
var options = {
clearForm: true // clear all form fields after successful submit
};
$(this).ajaxSubmit(options);
return false;
});
$('[name=submit]').click(function(){
$('#upload_file').submit();
});
Making this work silently requires that you replace your 'submit' input with a 'button' input:
<form id="upload_file" action="{{upload_url}}" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<input type="button" name="submit" value="Submit">
</form>