How to Reset form Data in Meteor JS? - meteor

I need to know about to reset form data in meteor.I am using router package.Whenever clicks submit button then if data saved successfully to reset form and show the same form like save and add another else not saved successfully to show user entered data like no need to reset.
Here i am using Router.go("tempatename");.The tempatename is form template.
Use Router.go("tempatename") means renders again same page but not clear the data.Why it's not clear the data i don't know.So please suggest me what to for this or Is there any alternate?
Thanks in Advance.

If you go to the same route with Iron Router I think that you are not going anywhere as the route is already loaded! (it does not trigger a page refresh)
But you could do a simple form reset with jQuery after submitting the data:
//submit your data
....
//reset the form
$('.my-form').reset();

Related

Reset input fields after submission

I'm working on an asp.net core project. I have some issues with the reset button. when I enter data which is already saved. The error message is shown as I given. After this reset button is not working.
I suggest after the submit, to either reset them with javascript, either if you use a post back, redirect to the same page (without post back this time).
For example this core redirects to him self, and the form is clear now.
Response.Redirect(HttpContext.Current.Request.RawUrl);
Or you can use this javascript code together and avoid the post back
OnClientClick="return (confirm('Clear Form ?') && this.form.reset(),false)"
Your question is very unclear, but it sounds like what you're talking about is actually the client-side validation. Once validation has been activated (by entering something into a field), validation will remain active. If you then clear that field (using the reset button, for example) and it's required, you'll still have a message saying the field is required, because it is, and it's now empty. If you want to clear all these validation messages, as well, then you need to do something like:
$('[type=reset]').on('click', function () {
let validator = $(this).closest('form').validate();
validator.resetForm();
});

How can I re-insert the values on a form, after a user clicks to edit something?

I have a single template that's wired up to show a post if the current user has a post in the collection. If not, it automatically shows a form.
Now I want to add an EDIT functionality. When the user clicks on the Edit button, it
Saves the post text in a variable.
Deletes the post from the collection, thus the template reactively reveals the form again.
Up to this part it all works. How can I then add the text that I just saved in a variable, into the "input" element of the form?
jQuery works for this on the console, but I don't know where to put it in my code.
On Discover Meteor, they use the Router to set the context. I'd like to try my idea with jQuery, if possible.
Thank you. Any suggestions are welcome.
You could keep your post in a session variable and in the edit click handler, set the session variable to the one you're currently viewing.
In the form inputs, you can set the value attributes to their corresponding post values.
ex: <input name="title" value="{{post.title}}" />
and in your template helper
Template.form.helpers({
post: function() {
return Session.get('post')
}
})

Stopping a user getting to the second page of a form

I'm creating a form that a user has to completely fill out before they are able to register for a website. What i'm trying to counter is if the user gets to url of the second page by accident. I've tried using if(!isPostBack) and then inside the if statement redirecting them to the first page but that only works the first time, and the user can never hit the second page that displays their details when they click on the submit button because the second page is now a post back. Any help would be greatly appreciated!
There are several ways of doing this. You could use Session to store user progress. Also, if you have a long multi-page form you could have a master table for your form in the database that tracks user progress (column named ProgressPage, for example).

Submit form to both code behind and third party url?

I have a legacy app that I need to change to accommodate a new payment processor.
The app is Asp.Net.
Without reconstructing the app (not in the budget) I need to take the final form and save information from it in the code behind, like it currently does, then I need to submit that same form to a third party url. Ideally as one button push to the end user.
I'm drawing a complete blank on a way to do this. Any suggestions?
Forgot to mention that JQuery and javascript are both valid tools for a solution.
You could create a javascript function that's bound to the form submit button's click event, or the form's submit event. The function will need to prevent the default form submission from firing. Use jQuery to serialize the form data, and create a synchronous AJAX request to submit the data to the third party. After the ajax submission has completed, you can trigger the form submission to the code-behind. If the ajax fails to submit properly, you can optionally abort the form submission to the code-behind.
You may need to account for XSS security, so look into cross-origin resource sharing and the Access-Control-Allow-Origin header.
Another option would be to have the code-behind behave as an http client and submit the form data to the third party.
so currently it's saving the results via code? Well, you could hack it by putting some javascript on the page that read's the forms values and posts them (eg with jquery), before doing you actual asp post.
edit (something like this might help (in some cases):
//change the action of the form (you could just change in code or this
$('#myform').attr('action','http://newpaymentproc.com/me/');
//override the default submit
$('#myformsubmitbutton').click(function(){
//extract the form data somehow (depends on form)
var formObj;
$.each($('#myform').find('input').serializeArray(), function(i, field) {
formObj[field.name] = field.value;
});
//post to old place
$.post('/old_current.asp', formObj).then(
//after posting to old place and getting response...
//submit form to new payment processor
$('#myform').submit()
);
// Cancel the actual form submit click to give time for post
return false;
});
Another way would be to have the legacy code (after submission) spit out a form with the data in it and some javascript to trigger submit on page load.
After the original process has completed, just take the submitted form data and push it to whichever URL you're working with. It requires minimal modification on the original app.
I have no code to go on, so I have no code to give. Hope that helps!

Using Mooncake Template

Here is the Mooncake template link: Mooncake template. Has anyone ever used it? I'm trying to apply this template to my ASP.NET website, using ASP.NET controls, but I have some problems about this.
First, in the Forget password menu, when a user clicks the Reset button, it will post back to the server and do some validations. If it doesn't pass the validations, the form will be displayed again with error messages. The problem is when the page reloads, it changes back to the default view, which is Login menu, so I have to change to Forget password menu to see the error messages. How can I make it display Forget password menu directly?
The second thing is how can I apply table format to my grid view? The column of a table in this template can be sorted without posting back by clicking on the header.
Any of your help will be highly appreciated. Thanks in advance :)

Resources