I designed a form as follows:
User Name: _______________
Password: _______________
Login
I also use jQuery Form Plugin to submit the form to the server side.
It will return if the server script finds some errors. The data returned by server is in JSON format. I would like to know how I can reset the user name + password when I know the username/password is invalid in a decent way.
In other words, I can manually use jQuery to empty the username/password field if the returned result indicates a failure. In fact, I am looking for a decent way built in Form Plugin or sth else that can do this part me for automatically. The only thing I have to do is to set a flag so that if the submission is failed, then the form will be resetted.
Thank you
You cam simply do:
$('#form_id').reset();
I don't think you need a plugin for such simple task. You simply call above code based on the response.
Run this.form.reset() when a form button (e.g. Reset) is being pressed.
e.g.
<form>
...
<input type="button" value="Reset!" onclick="this.form.reset();">
</form>
Related
I have a Groovy project (vanilla; no Grails) with an index.gsp that takes form input from the user and sends it in a POST request to a Groovy script. The form is set up like this:
<form action="somewhere" method="POST" enctype="multipart/form-data">
// some other inputs
<input type="submit"/>
</form>
Is there any way (ideally not using Javascript) to dynamically load content on the same page after the user submits? Redirecting to another GSP might also work. Just something simple, like a string containing whatever the user typed. It seems like Grails has plenty of options, but unfortunately I can't use it.
As you mentioned, Grails is capable of doing what you need without any complex code. Since you can't use it, you will have to use JQuery(Javascript) to make an AJAX call. AJAX is the he only way that I know to achive that.
Just make an AJAX call to your groovy script. JQuery.ajax has a success function to be called if the request succeeds. You can use it to update a hidden dive after the form. This success function has the data returned from the server as an argument, that data could be the string containing whatever the user typed. In that case just add the data to the hidden div and then make that div visible.
function onSucceed(data) {
$('#hiddenDivToUpdate').text(data);
$('#hiddenDivToUpdate').show();
}
You can learn about JQuery.ajax() in this link AJAX
Recently i am started tuning our products to IE compatability. Now i am facing a weird problem in IE alone.
My form url is something like this https://x.com/formurl/dynamicvalue
and my form element is
<form action="" method='post'>
...
</form>
some values the dynamicvalue holds are ( Alphanumeric characters )
plan
plan2
1234443
544
Except IE every other browsers sending the actions to https://x.com/formurl/dynamicvalue
IE form action is sending to https://x.com/formurl
I don't know why this is happening, I can replace the document.URL to post the Form back to solve the problem. Still, i want to what's the reason for IE to remove that dynamicvalue
I am testing in IE-9
Kindly someone teach me.
Thanks in advance.
I have also discovered this bug in Internet Explorer 11 when reading the action attribute of a form with action set to the empty string.
<form action="" method="post"></form>
If one reads the form.action attribute in javascript and the current URL does not contain a trailing slash, the last part of the URL will be removed. I.e., if the location is example.com/xxx/yyy, form.action=="example.com/xxx, while if location is example.com/xxx/yyy/, form.action=="example.com/xxx/yyy/.
However, if the form is posted by clicking a submit button, it is posted to the correct URL, i.e., example.com/xxx/yyy or example.com/xxx/yyy/.
I overcame this by using jQuery's attr function to check if action="" in the HTML and then I use location.href instead.
if($(form).attr('action') === '') return location.href else return $(form).attr('action')
(Why would someone do this? I am intercepting the form submit and using ajax to send the data. To do this, I need to know where the form wants to submit)
I am not 100% sure if this is as big an issue has I seem to think it is right now but I think I may of found an issue or at else an hole within the Inspect Element viewer within Chrome.
I was using (I have now changed my settings) hidden ID's to set a number of defaults, one was users levels, another was to make the user active by default.
However when I view these ID's within the inspect Element view and then changed the values, submitting the form would submit the NEW value to the server and not the value I had given it.
For Example:
I had something like the following within my code,
<input type="hidden" name="data[user][level][id]" value="1" id="MyID">
I then changed it within the Inspect view to,
<input type="hidden" name="data[user][level][id]" value="2" id="MyID">
Then I submitted the form and was surprised that the NEW value was submitted, I was always under the inpresion that hidden ID's where not changeable and the browser should only submit the default values held within.
I have now changed this to letting the database default to a basic user and then I can change the users setting has I want to. But in some cases this may not be an option, so I was hoping for an answer or some feedback about how to make this more safe.
Am I just a bit slow, are there better methods (different ones) to passing 'hidden' data from forms to the server?
I was thinking about maybe using JQuery to add the needed hidden fields to the forms once the user had selected / submitted the form, but i am not sure if this is 100% safe or even if its a good idea.
Any ideas / feedback are very welcome.....
Many Thanks,
Glenn.
I had the same problem passing the database data into a modal,the solution i know is to use jquery ajax to get the informations from the database requesting a file,adding them into variables and compare the variables
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
I used this code sample to do it.
Of course there are a few modifications to be done depending on your script
I found a better way of doing this, at lest in CakePHP. The CakePHP framework has inbuilt security calls. These in-built functions when added give you all sorts of stuff but the main reason I used them was to stop this sort of form tampering.
I am not 100% sure how it does this, but it adds a token to all forms and it checks to see if the form being submitted is right? Again not sure how the token works.
But here is the code I used ::
public function beforeFilter() {
$this->Auth->allow('index', 'SystemAccess');
$this->Security->blackHoleCallback = 'blackhole';
}
public function blackhole($type) {
$this->Auth->logout();
$this->Session->setFlash('Sorry a security issue has been detected, please try again or contact us for support.', 'default', array(), 'bad');
$this->redirect($this->Auth->redirect('/'));
}
Now I will add that the call the Auth logout I added to this for extra added security, as the user maybe have logged in on a system and it just not be them that is trying to do things that they should not.
Hope that helps others out!
But this is only a fix for when CakePHP is in use. I would take it that other frameworks would have their options but if your only using basic HTML? or a CMS like Drupal again there might be in built security.
Many Thanks
Glenn.
The only safe and best solution that I found for this issue is to check on the server side whether the user_id sent with the form is the same user_id logged in with or not.
Although using jquery is good idea, but, did not work with my case as am using data: $(this).serialize(),
However here's my code on the server side (Note, am using Laravel 5.4, but am sure it won't matter with your case)
if ($request->user_id != Auth::user()->id)
return json_encode("F**K YOU ! Don't Play Smart -_- !");
else
raw_material_category::create($request->all());
Hope this helped ;)
I am working on existing code that uses CGI::FormBuilder, and I've gone through all of the documentation to see how this might work, and I'm not 100% convinced that it will. The code has several free-form fields and 3 buttons: Update, Cancel and Test. The test button sends an email using settings entered into the fields.
In the JS for the form, I use an ajax call when "Test" is clicked so that the perl code in the form executes. The update and cancel buttons return like the form is supposed to when it is submitted. The reason for this is that when the test email is sent, I don't want the user to be taken to a returned page, but remain on the form with the values intact, so that if the values are correct, the user does not have to re-enter them when they want to update the actual values (which updates the values in my DB). Apparently, since the form isn't being "submitted," the values that it attempts to use on this "test" are the values loaded into the form with the page opens - it isn't using the values the user input before hitting the test button. Is there a way to make this happen?
Long question short: with CGI::FormBuilder, can I get the values currently in the fields via PERL without submitting the page? Thanks!
Short answer: yes.
Medium answer: Yes. You can use javascript in the page to send information to your server side application.
Long answer:
You seem to have some confusion about how server and client side code interact with webpages. This is pretty common. Many people expect their to be some kind of communication between the rendered page and the program that generated it. AJAX and related technologies blur the lines here and make things more confusing.
Here's a timeline of a simple, old-school CGI form:
Client requests page. Server receives page request. Server dispatches
to CGI script.
Server executes CGI script.
Server sends result of CGI script to client.
Client renders script results.
User fills out form.
User clicks "Submit". Client requests page with parameter information (details vary with type of request, form configuration).'
Server receives page request.
Server dispatches to CGI script.
Server executes CGI script. Server sends result of CGI script to client.
Client renders script results.
Each message from the Client is handled separately.
AJAX lets you send messages to the server and get the response without clearing the currently loaded page.
So, just throw some javascript code into the html, and set up an onModify handler that will make an AJAX request and pass data back to the server. The AJAX request is just another HTTP request, just like those above, but it runs in the backgound. All you need to do is catch the submitted data and respond. Your javascript needs to catch the response and do something with it.
Answer to the short question is "No".
Answer to the long question is "Yes".
All you need to have two "Submit" buttons: "Submit" and "Test".
The submit by Test will send form to the CGI and CGI will only validate the fields' values and render same form with same values back and message if there is an error in fields.
I have created a login form with a remember me checkbox. I have set cookie if the user checks the remember me link. I read the cookie the next time user opens the page. I am able to populate the username field but I'm unable to populate the password field. Is there any way to populate it?
You have to set "true" to the propertie "renderPassword" like:
$password = new Zend_Form_Element_Password('senha');
$password->renderPassword = true;
$password->setValue("Senha");
You should never pre-populate the password field. You would be taking the user's password and putting it in plain text in the value attribute of the element. Here is an example of implementing remember me functionality in Zend Framework. It may not be 100% current, but its a decent jumping off point.
Although I would recommend against this but you can do this in the following way
<script>
$(document).ready(function(){$('#id_of_the_password_field').val('<?php echo $variable_containing_password;?>');});
</script>