I have different forms on single template and when user clicks on a button of 1st form(for eg. Continue button) it has to go to the next form and so on. Can we store all this different forms data in to a single collection?
If yes how can we achieve that? can anyone help me .Thanks in advance.
Sample code.
<template name="forms">
<div class="step1">
<form class="form1">
----//Code goes here//
</form>
</div>
<div class="step2">
<form class="form2">
-----//code goes here//
</form>
</div>
</template>
Try setting an id to your form and handling it in events:
<form id="form1" class="form1">
// Form1 code
</form>
<form id="form2" class="form2">
// Form2 code
</form>
and then
Template.foo.events({
'submit #form1': function(event, template){
//Handle submit
},
'submit #form2': function(event, template){
//Handle submit
}
});
It could technically work with the class by calling submit .form1 and submit .form2.
Also, as mentioned in the comments, aldeed:autoform is a very good package for that.
Related
I'm creating a login form and in that if any input is wrong then i want to stay on the same page and notify the client to enter the correct input
I want to stay on this page http://localhost:8080/loginpage/ but after every click i'm redirected to http://localhost:8080/loginpage/?UserName=UserName&pword=&ConfirmPassword=&Email=Email&FirstName=First+Name&LastName=Last+Name&cars=male&Signup=Signup .
I have written a code for this but it does not seem to work.
if(t!==0)
{
var er="Email-id already exists";
window.location.reload(false);
document.getElementById("nemail").value=er;
document.getElementById("username").value=username;
document.getElementById("pword").value="";
document.getElementById("confpwd").value="";
document.getElementById("fname").value=fname;
document.getElementById("lname").value=lname;
document.getElementById("gender").value=gender;
}
I have tried to use several other methods like
window.location.replace('/loginpage/');
window.location.href="/loginpage/index.html";
But none of them works.
Please help!
There are two ways to prevent a form to submit.
Set form onsubmit="return false".
Register a submit event on a from. In the callback call event.preventDefault();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>1 way to prevent form to submit via onclick attribute</h2>
<form action="#submit-from-1-way" onsubmit="return validate(this)"><!--set onsubmit="return false"-->
<input name="value"/>
<button type="submit">Submit</button>
</form>
<h2>2 way to prevent form to submit via submit event</h2>
<form id="form" action="#submit-from-2-way"><!--set onsubmit="return false"-->
<input name="value"/>
<button type="submit">Submit</button>
</form>
<script>
console.log(location.href+'#'+location.hash+'?'+location.search);
function validate(form) {
return $(form).find('input').val();
}
$('#form').submit(function (e) {
if (!validate(this)) e.preventDefault();
});
</script>
You can use preventDefault() on the click event for a given html object. This will prevent the browser from taking the default action on a specific HTML object.
For example to prevent actoin on a link:
<body>
Click Me
<script>
function dontGo(event) {
event.preventDefault();
}
document.getElementById("clickMe").addEventListener("click",dontGo);
</script>
</body>
I have the following html form:
<form id="editForm" method="post" action="/food/update" enctype="multipart/form-data">
<div class="form-group">
<input type="text" name="title" class="form-control">
</div>
<div class="form-group">
<button id="submitEdit" type="submit" name="submit" value="Änderungen speichern">Submit</button>
</div>
</form>
The challenge is to disable the button when the user clicks the submit button to prevent a duplicate http request. Look at my js code.
$(document).ready(function(){
$(document).on("click", "#submitEdit", function () {
$('form#editForm').submit();
$('#submitEdit').attr('disabled', true);
$('#submitEdit').html('Saving...');
});
});
It works fine on the desktop, but not in web view. In the web view application I click the button, the button text changes to "Saving..." and nothing happens. The form isn't send.
I already cleared cache on my mobile before testing.
Thank you!
Just remove this line of code
//$('form#editForm').submit();
$(document).ready(function(){
$(document).on("click", "#submitEdit", function () {
$('#submitEdit').attr('disabled', true);
$('#submitEdit').html('Saving...');
});
});
I need help in order to validate our form to be submitted via google recaptcha, I have successfully implemented the code however the form still allows submission without the recaptcha, how do I make it required field? not very good with java script here, any assistance is greatly appreciated
also if an error message would pop up so that asking people to complete recaptcha that would be great, thanks a lot
CSS
<script src='https://www.google.com/recaptcha/api.js'></script>
Html
<div class="form">
%form_errors%
<div align="right"><p><strong>* Denotes mandatory field</strong></p></div>
<fieldset>
<legend>Your enquiry details</legend>
<div class="form-row">
%question_label_746942_q7%
%question_field_746942_q7%
</div>
</fieldset>
<div class="g-recaptcha" data-sitekey="google site key"></div>
<div class="form-row-submit" align="right">
%submit_button%
</div>
</div>
You can by default set the submit button to disabled and only enable it on the callback function from reCAPTCHA.
Check this: https://developers.google.com/recaptcha/docs/display
Make sure to validate the form on the server side too.
UPDATE
Add this in your :
<script>
function enableBtn(){
document.getElementById("submit_details").disabled = false;
}
</script>
And then call the above function in the reCAPTCHA div in your form as follows:
<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="enableBtn"></div>
<button type="submit" id="submit_details" disabled>Send</button>
This will have the submit button disabled when the page loads so the user won't be able to submit the form. The button is enabled only after the user passes the "I'm not a robot" test.
Again, remember to validate the form data on the server side.
<form action="" method="post" onsubmit="return validateRecaptcha();">
</form>
<script>
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("You need to fill the captcha");
return false;
} else {
alert("validated");
return true;
}
}
It should be <button type="submit" id="submit_details" disabled>Send</button>
Not if="submit_details"
The function is using getElementById("submit_details"), so it is looking for an ID of "submit_details" in order to remove the disabled condition of the button by setting disabled = false instead of disabled = true which is the default condition that is set inline in the <button> tag.
I'd like to display a form containing validation and a submit button.
I'm new with Angular, and I'm not intireli sure how to get started.
- I'd like to get a direction of what to do or perhaps some initial
indication, of what Controller to use.
JS:
myApp.controller('jsonCtrl', function($scope, $http) {
$http.get('form.json').success(function(result) {
});
HTML:
<form ng-controller="jsonCtrl">
<fieldset>
<div demo-directive ng-repeat="field in fields">
</div>
</fieldset>
</form>
Plunker
I'd like to display a form containing validation and a submit button.
You just need to write simple HTML for this
now, as I'm new with Angular, I apologise about that, I'd like to get a direction of what to do or perhaps some initial indication, of what Controller to use
Generally people bind a specific section to a specific controller and, obviously that is going to be the case for you.
In the controller you'll have two methods which will address to submit and validate buttons.
<my-form>
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div my-directive ng-repeat="field in fields">
</div>
</fieldset>
<button type = "button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit"> Submit </button>
</form>
</my-form>
Now, the main div or body etc. which is parent for the code written above and is linked to a specific controller will have two functions to address to onValidate() & submitForm()
How can I submit a single form while having different forms on a single page?
FORM 1:
<form action="../../../../../xyz/services/xyzOperation" method="post" enctype="multipart/form-data" target="upload_target" class='form-horizontal page formm' id='uploadForm' style="margin-bottom: -1px;">
FORM 2:
<form action="../../../../../xyz/services/create" method="post" enctype="multipart/form-data" target="final_target" class='form-horizontal page formFinal' id='finalForm'>
JS CODE
document.forms["uploadForm"].submit();
I am using the above statement to submit the first form but surprisingly it also submits the second form..
Please help me, as this issue is now becoming so irritating to me.
I have also used the following code but of no avail
document.getElementById("uploadForm").submit();
THANKS
You can try this...
function submitForm(){
document.formName.action="actionName";
document.formName.submit();
}
<form method="post" name="formName" enctype="multipart/form-data">
....
<input type="button" onclick="submitForm()"/>
<form>
Form submissions use the name not the id attribute to identify unique elements. Add
name = "uploadForm"
name = "finalForm"
to their respective elements.
<form>
<input type="submit" name="action" value="UPDATE"/>
<input type="submit" name="action" value="DELETE"/>
</form>
and use $_GET['action'] or $_POST['action'] (depending if you use get or post for form).
if($_POST['action'] == 'DELETE'){
//.....
} elseif($_POST['action'] == 'UPDATE'){
//.....
}
If you assign each form with an element id, then you will be able to manipulate which form to upload as per your script. Id enables DOM to specifically pick the exact form and execute the process. For example
<form id="form1"> blah blah </form>
<form id="form2"> blah blah </form>
assign name to form tag,
<form name="frm1" action="form action"></form>
<form name="frm2" action="form action"></form>
to submit first form
document.frm1.submit();
to submit second form
document.frm2.submit();
I have tried all above mentioned answers but I was unable to succeed, but after that I removed the action attribute of the forms and then used the following code at the time of submission of each form
document.uploadFormName.action="../../../../../xyz/services/abc/fileUpload";
document.uploadFormName.submit();
Then it was not submitting all the forms on the page.
It is a kind of work around but a good one ;).