I have a PHP contact form, with a simple submit button. What i want to do is once the user has clicked submit, add a function which greys out all text boxes within the form.
Or the form disappears altogether so i can place a label on the page to say its been completed. Is there anyway to go about this without the use of javascript or jquery?
Currently the code for the submit button is:
<input type="submit" value=" Continue " style="width:200px;height:40px">
which uses the PHP post method.
Upon submission, the values should be posted to the PHP script. You can then implement a method of checking if the user's value has been accepted.
At the top of your code, implement the method that is being used to save the input:
<?php
$form_submit_success = false;
//Your input processing code here.
$form_submit_success = true; //Set this variable to true if form data was accepted.
if($form_submit_success) {
//Message to inform the user that form submission was a success.
} else {
?>
<!-- HTML Form Code here -->
<?php
}
?>
Related
I am using Chronoform V5 for my Joomla site. I have created a Multi Page form wherein a user will fill in each page and click next to proceed and at the end the form will be finally submitted and some results will be displayed based on the input. This part works fine.
Now I have a dropdown in first page. If a user selects e.g, option 'a' and clicks 'next page' button i want to hide a dropdown in the second page. In case the user selects option 'b' in the first page this dropdown in second page should be visible.
Any idea how to achieve this?
I would use a Custom code action to check the submitted value and use CSS to show or hide the value:
<?php
$display = 'block';
if ( $form->data['var_name'] == 'xxx' ) {
$display = 'none';
}
$style = "#some_id { display: '{$display}'; }";
$jdoc = \JFactory::getDocument();
$jdoc->addStyleDeclaration($style);
?>
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
I am trying to do userLogin through a webservice. The project is using Bootstrap for css and angular in the backend.
I am having a login Screen with a hidden div that is shoown when user click login button.Its a animated login icon.
Everything is working fine.I just want to make the background that is whole page including the userId, password uneditable as well as signin button unclickable.
When you hit the login button you can make the input(s) and button(s) disabled to make sure they remain unchanged.
When you get a result from your REST call you can re-enable them all.
You probably already have a variable $scope.loginIn on your controller scope since you are showing an animated login icon while login. If you don't, add it to your login function, something like :
$scope.login = function(...) {
$scope.loginIn = true;
loginService.login(...).finally() {
$scope.loginIn = false;
}
}
then just use it on your input and buttons to disable them :
<div class="login">
<input enable="!loginIn">...</input>
<button enable="!loginIn">...</button>
</div>
(That might be off the context, if you give me some code I could probably be more accurate in my answer)
I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing.
I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc.
How do I do in order to always be in edit mode where the user never needs to enable editing in order to start editing the values?
Possibly try adding shown=true in your html:
<form editable-form shown="true">
I had this same problem. Even when trying to $show() the form again at the end of my onaftersave function it still wouldn't work. I suspect the visibility is being hidden after the onaftersave function runs but I didn't actually check if that's the case. Here's how I got around it:
$scope.$watch('yourFormName.$visible', function() {
$scope.yourFormName.$show();
});
Now whenever the form visibility changes to hidden, it will just show it again regardless of when it changed.
If your form is already open, and you just want to keep it open after submitting, you can do this:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onaftersave="keepFormOpen()">
and the function keepFormOpen() would look something like this:
$scope.keepFormOpen = function() {
return "fake error message";
}
What this does is essentially gives the form a fake error message after you have already saved your data. This fake error message will interrupt the forms closing process, but since it was called after you already saved your data, it won't affect the previous submit.
To really keep open the form we can do the following:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onhide="MyForm.$show()">
hi i am making a form with a confirm page where I would like to display what was input from the form and give the user a chance to check it before sending it in.
I have successfully done this by saving the form elements in the session:
$this->Session->write('Visitor.confirm', $this->data);
and get it by:
<? $fields = $this->Session->read('Visitor.confirm')?>
<?php echo $fields['Visitor']['v_firstname']; ?>
<?php echo $this->Form->hidden('v_firstname', array('value'=> $fields['Visitor']['v_firstname']));?>
....for each field. but i cannot get the fields to send as a new form? there must be a simpler way!
many thx
Is the 'confirm' button a submit button within your form with all your hidden fields? Or do you have it as a good old fashioned link, and hoping that it submits your hidden form data?
Is there a reason why you would not grab the values out of the session on the page after confirmation, as opposed to resubmitting everything in a hidden form?
you don't have to post the form again. When user clicks confirm, and a confirm() action is called, you just have to save what's in $this->Session->read('Visitor.confirm');