Develop Reference

What's the easiest way to generate forms using laravel and js?

I have form when user can add achievement.
So it looks like:
<form action="{{ action('SettingsController#addAchievementsSettings') }}" method="post" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-6">
<input type="date" placeholder=" " id="date-achievement" name="date_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">What</label>
<div class="col-lg-6">
<input type="text" placeholder=" " id="what-achievement" name="what_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea rows="10" cols="30" class="form-control" id="description_achievement" name="description_achievement"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning">Add one more...</button>
<button type="submit" class="btn btn-success">Save</button>
I want to generate another form if somebody click Add one more. How can I reach this and how to add everything to database? Sorry guys for not more code but I do not have any idea

from your question it seems a proper video / tutorial would help you more than just the answer.
for generation I personally use laravelcollective/html.
a good site with lots of videos explaining almost everything in regards to laravel and building sites with it I recomment the laracasts site.
to learn how to build and process forms with laravel I suggest Laravel 5.4 from scratch
specifically for working with forms: Form request data and form validation

After creating your form and submitting your form , you have to validate your data then you will call your model to insert your date in database, i suggest you eloquent to handle database request if you are using laravel

redirecting a mobirise email form

I'm creating a new website for my company using mobirise. The mobirise templates come with predesigned email forms that were created using formoid. When a user uses the email form to send an email the information is sent to formoid and then formoid sends the information to me at my email address. All of the coding in the email form is behind the scenes, so I can't actually see what it's doing.
On one of my forms I need to have the page redirect to another page where users will be able to upload a file to my server using another script. I have contacted mobirise to ask them if they could tell me how to redirect after the user clicks the submit button, but they said I had to contact formoid. So far I haven't gotten a response back from formoid so I thought I would try to look for a solution on my own.
I have tried adding javascript code to the coding on the page, but as I said, most of the coding of the form is somewhere behind the scenes and I can't figure out exactly which coding is performing the form's submit action.
What I was hoping for is a suggestion about how I could add some additional JavaScript coding that would watch for the submit button in the form being clicked and then redirect the page. I'm not positive this is even possible, but I figured that if anyone would be helpful it would be the people who post solutions here. I'm rather new to JavaScript, so I'm not sure where to start and I don't want to experiment for hours and hours and get frustrated because nothing is working.
So, if anyone can give me an idea here I would greatly appreciate it. Below is the coding for the form in case it helps:
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">Thanks for uploading your audio file!</div>
</div>
<form action="https://mobirise.com/" method="post" data-form-title="FTP Upload">
<input type="hidden" value="NTcF3QgiRzQHgm5xv+UnYlBBGPR27Q6NZwj5EPuecwUNxuL8vndMlaaoM2PpzlkXlNaFBrtr2mU+CfZxfef01mKMpaQkezUMhyWXZgieem0/pt/V/nU0iUetLNqsEpj7" data-form-email="true">
<div class="row row-sm-offset">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-name">Name<span class="form-asterisk">*</span></label>
<input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-3o-name">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-email">Email<span class="form-asterisk">*</span></label>
<input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-3o-email">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-phone">Phone</label>
<input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-3o-phone">
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="form1-3o-message">One or more files are being uploaded to the WORDsmart server. </label>
<textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-3o-message"></textarea>
</div>
<div><button type="submit" class="btn btn-info">CONTACT US</button></div>
</form>

in this case, I would recommend you to use another form. As far as I know form wouldn't work if you would bring any changes to form of Mobirise. Just use another form creator and implement it manually to Mobirise's project after publication to the local folder (the project of Mobirise).
You can read tutorial about publishing here: https://mobirise.com/help/local-host-369.html

Just change the action field in the first line of the form, to the page were you would like to send the data.
The next hidden input line with the public key may be deleted also.

Stop Spam Registration on our Custom Registration Form

We have a custom registration form on our wordpress website. we are using google recaptcha and input Human question field to stop spam registrations but still the spam registrations won't stop.
Could anyone suggest what exactly needs to be done?
The Registration form code is as follows.
The JS code has 2 functions one for Recaptcha and another for Validate the "Question field".
The register submit button is by default disabled and gets enabled only when the recaptcha call backs the function.
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
}
function validateForm() {
var a = document.forms["registerform"]["question"].value;
var b = document.forms["registerform"]["user_login"].value;
var c = document.forms["registerform"]["user_email"].value;
if (a == null || a != "5") {
alert("Bitte fülle alle Felder richtig aus");
return false;
}
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<form name="registerform" onsubmit="return validateForm()" method="post">
<div class="form-group">
<label style="font-size:18px;">Register</label>
</div>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="user_login" class=" form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="user_email" class="form-control" placeholder="E-Mail">
</div>
<br>
<input type="hidden" name="redirect_to" value="Redirect_URL">
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-question-sign"></span></span>
<input type="number" name="question" class="form-control" placeholder="2+3 = ?">
</div>
<br>
<div id="captcha" class="form-group">
<div class="g-recaptcha" data-sitekey="6LdOGg4TAAAAAJsTt_ZGoK67cyF277uIYwWRxJPW" data-callback="recaptchaCallback"></div>
</div>
<div id="pass-info" class="clearfix"></div>
<button class="btn_full" id="submitBtn" disabled>Register</button>
</form>
The whole thing works fine, Recaptcha and Human question field. When we manually test registerform, we can't register without accepting the Recaptcha and inserting exactly the value to process the form.
But this is not preventing automatic spam bots which registers on our site.
Is there any other way through which these spam bots are registering ?
Also we disabled "MEMBERS CAN REGISTER" in the admin dashboard.
Are we doing anything wrong?
Thanks in advance for the feedback and suggestions.

you need to do validate it in the backend, in the front end, validation can be bypassed.
store the ip address for each registration.dont allow registeration from the same ip within some period of time, but user can use some proxy tool which changes the ip address every second.
validate the email, foreach email send the validation email to registered email address, and if the user click on the activation click, activate the account, otherwise no.

You probably forgot the server-side part of recaptcha.
A robot should not be able to pass it multiple times,
See this complete tutorial from google : https://developers.google.com/recaptcha/intro
You must configure a key on the server, as explained, that is secret, and which google will send to you if the captcha is valid.

Toggle password input using a checkbox (not working due to security risks)

I'm trying to get rid of the "put your password in again to confirm it" field in my sign up form. The design pattern I've seen to get around this is a checkbox which will reveal the password to the user - so they can verify it. However, implementing it seems to be a pain.
Here's my relevant html:
<form name="signup">
<div class="form-group">
<input id="usernameInput" class="form-control" placeholder="username">
</div>
<div class="form-group">
<input type="email" id="emailInput" class="form-control" placeholder="email">
</div>
<div class="form-group">
<input type="password" name="passwordInput" class="form-control" placeholder="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="show-pass" value='1' onchange="showPass()"> Show password
</label>
</div>
<button type="submit" class="btn btn-info btn-lg">Sign Up</button>
Back
</form>
And the accompanying javascript:
function showPass() {
document.signup.passwordInput.type=(document.signup.show-pass.value=(document.signup.show-pass.value==1)?'-1':'1')=='1'?'text':'password';
}
However, when I try it in firefox, I get the following console error:
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.
The error is a little cryptic seeing as the issue isn't with having a password field on a non-https website (I had it working before). Is there something I'm missing here?

If you have ever heard about jQuery use it, it will be easirer
$('#id-of-checkbox').change(function(){
if($(this).is(':checked')){
$('.password-fields').attr('type','text');
} else {
$('.password-fields').attr('type','password');
}
});

where is the validation coming from on this file?

I have this link and if you click submit without filling any of the fields you get three validations but i have no js files included so where is this coming from
Here is the all the HTML
<div class="content">
<div class="page row nobor">
<div class="three_col wide row">
<div class="title">
</div>
<div class="column">
<h2>email sign up</h2>
<div class="inner">
<form method="post" action="/signup_complete" id="signup_form">
<p>
stuff
</p>
<p class="row">
<label>First Name <span class="req">*</span></label>
<input type="text" id="first_name" name="first_name" required="true">
</p>
<p class="row">
<label>Last Name <span class="req">*</span></label>
<input type="text" id="last_name" name="last_name" required="true">
</p>
<p class="row">
<label>Email <span class="req">*</span></label>
<input type="text" message="Please provide your email address." required="true" value="" name="email">
</p>
<p class="row nopad nomarg"><input type="submit" value="submit" class="sub_fbut submit" name="submit"></p>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
Basically I need to add more validation to not allow less then 3 letters but i have no idea where this is coming from and how do i alter...ideas?

This is coming from the HTML5 browser capabilities. Meaning this validation only works on modern browsers that support validation attributes such as "required", check out some examples here.
If you want browser compliant validation i suggest this plug in. Just remember people can disable JS so if you have sensitive data validate it server-side.

Remove the required="true" from your <input> tags to get rid of that validation.

if you click submit without filling any of the fields you get three
validations but i have no js files included so where is this coming
from
It looks like you are using HTML5 forms code here.
It uses required="true" or required
HTML5 browsers are interpreting this correctly.
Read more: http://diveintohtml5.ep.io/forms.html#required
Basically I need to add more validation to not allow less then 3
letters but i have no idea where this is coming from and how do i
alter
If you need some simple validation, you could do something like this
$('#first_name').blur(function(){
if($(this).val().length < '3'){
alert('You must enter three characters');
}
});
Example: http://jsfiddle.net/jasongennaro/ZEjEq/
This is just an example. You could do something like this on submit().
Also, you should validate content on the server side, too. Just to be sure!