I want to keep my Javascript validation file attached to my HTML page as I move it into angular.
I have made a JS file called "clientInfoValidation" and it holds the "validateForm" function.
<body>
<h4>Enter Client Information Below</h4>
<div id="inputArea">
<form name="clientinfo" onsubmit="return validateForm()" method="post" #myForm="ngForm" (ngSubmit)="addtoClientDB()">
///code
</body>
angular.json
"scripts": [
"src/assets/Javascripts/clientDateValidation.js",
"src/assets/Javascripts/clientInfoValidation.js"
]
I need help with where to declare and how to reference it so it is appropriately called on submit.
Here are the steps you need to follow:
Put your clientInfoValidation.js file to inside src/assets folder
Import it on html template <script src="assets/clientInfoValidation.js"></script>
Use ngSubmit event in the form tag (instead of the onsubmit you're using now): <form name="clientinfo" (ngSubmit)="onFormSubmit()" method="post" #myForm="ngForm">
In your component's JavaScript file, define onFormSubmit that calls the validateForm function:
function onFormSubmit() {
if (validateForm()) {
// call your addtoClientDB function here
}
}
Hope that is helpful
Related
I am trying to set my form action to another page with a parameter in url using code below:
ui.setFormActionToTargetPage = function () {
$('form').get(0).setAttribute('action', 'myTargetPage.html?id='+id);
};
My html page is like
<form class="form-horizontal row-border" data-validate="parsley" id="validate-form" enctype="multipart/form-data">
...
<button class="btn-default" onclick="ui.setFormActionToTargetPage();">Cancel</button>
...
</form>
However, I did get forwarded to myTargetPage.html but it seems the id parameter is not passed while some form content was passed as parameter 'text'. I verified that when setFormActionToTargetPage is called the url is as expected. However, when it hit the target page, the window.location.href is not correct, which is 'myTargetPage.html?text= some form content'. Anyone know why?
Thanks.
Change the form method to post so the form data doesn't interfere with the querystring. If you have your id value somewhere and it's working already then great, otherwise you can pass it through the button onclick call like this.
<form method="post" class="form-horizontal row-border" data-validate="parsley" id="validate-form" enctype="multipart/form-data">
<button class="btn-default" onclick="ui.setFormActionToTargetPage(123);">Cancel</button>
</form>
ui.setFormActionToTargetPage = function (id) {
$('form').prop('action', 'myTargetPage.html?id='+id);
};
I'm just trying to submit my form using JavaScript. I've broken it down into this basic function:
$(btnSubmit).click(function(event){
event.preventDefault();
$('.form')[0].submit();
});
This is the form (the page name is upcoming_albums.php):
<form class="form" action="upcoming_albums.php" enctype="multipart/form-data" method="post">
All it does is refresh the page. The form does not get submitted.
I think there is a problem with your selector, For submitting form using JavaScript it best practice to use the form name or the unique ID, because there maybe a same class name used other places.
So, try the following code,
<form class="form" id="myform" action="upcoming_albums.php" enctype="multipart/form-data" method="post">
Now, javascript will be something like
$(btnSubmit).click(function(event){
event.preventDefault();
$('#myform').submit();
});
Also please check your console for any other js error, this might help,
Thanks,
I want to modify the file submitted by user on the client side, before it reaches my server. To modify it I want to use Flash applet that would communicate with JavaScript.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="id_file">
<input type="submit" value="Submit">
</form>
Is it possible to do it? If yes, I would appreciate any tips how should it be done :)
Should I convert it to string? Or maybe JS comes with some functions to make such operations easier?
$( "form" ).change(function(x) {
//pass file input to Flash applet
x.preventDefault();
flashApplet.proceed($('#id_file').value);
});
function callback(modified_file) {
// Flash applet has modified the file
// Now submit the form with a new, modified file
$('#id_file').value = modified_file;
trigger_submit();
}
The file can be either a video, an audio or an image.
Don't use a submit button, instead use a normal button disguised to look like a submit button, and then you can check when the button is clicked, do your stuff, then submit the form via javascript by using
document.getElementById("myform").submit();
I would replace your current html with:
<form action="" method="post" enctype="multipart/form-data" id="myform">
<input type="file">
<button id="submit">Submit</button>
</form>
And then js:
document.getElementById('submit').onclick = function() {
//do your flash stuff
};
function callback(){
//here we submit the form
document.getElementById("myform").submit();
// because the file itself has been modified, this is all we need to do.
}
Basically, use a false submit button, to do what you want first.
Normally to change the action attribute of a form in jQuery I would do the following:
<form id="removeLightboxForm" action="">
...
</form>
$('#removeLightboxForm').attr("action", "view/#close");
But I usually use this for when the action attribute is empty on the HTML form tag itself. I'm now trying to use this on a form where the action attribute already contains a default URL and is causing problems.
In this example, the form action is present:
<form id="removeLightboxForm" action="view/">
...
</form>
But when I do this:
$('#removeLightboxForm').attr("action", "view/#close");
I end up with the new URL/action being added to the original URL/action, for example:
<form action="view/view/#close" ...
Is this how it's supposed to work or am I doing something wrong?
I would try clearing it first:
$('#removeLightboxForm').attr("action", "").attr("action", "view/#close");
or
$('#removeLightboxForm').removeAttr("action").attr("action", "view/#close");
This jquery plugin allows you to turn any element into a file input element. http://plugins.jquery.com/project/custom-file
But to actually upload the file, the only documentation i could found is this:
To upload the chosen file to a server you should then attach the input element to a form element
how can i do that?
I think you need to create an html form and append the input to the form, and if you need to submit, you can do it via a submit button or via $.submit
# from http://www.daimi.au.dk/~u061768/file-input.html
<script type="text/javascript">
$(function() {
$('button').button().add('#foo, a').file().choose(function(e, input) {
$(input).appendTo('#TheForm').
attr('name', 'a-name').
attr('id', 'an-id');
});
});
</script>
...
<form method="post" enctype="multipart/form-data" id="TheForm" action="/path/in/your/server/">
<input type="submit" value="send">
</form>
Anyway this is not the best plugin for submiting the files via ajax.
The uploading itself is not of the scope of this plugin. You should see this with your server side technology.