Take input from a form and save locally - javascript

I am working on this simple site, and I want to be able to take the information from these fields in a form, and save them to a plain text file (like on the desktop or something).
Here is the form I have so far:
<form id="mainform" class="pure-form pure-form-aligned">
<fieldset style="padding-top: 12px;">
<div class="pure-control-group">
<input id="service" class="pure-input" type="text" placeholder="Service">
</div>
<div class="pure-control-group">
<input id="username" class="pure-input" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<input id="email" class="pure-input" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<input id="password" class="pure-input" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<input id="vpassword" class="pure-inputs" type="password" placeholder="Verify Password">
</div>
<div class="pure-controls" style="margin-left: 0px;">
<button type="submit" class="pure-button pure-button-primary" id="button1" style="
margin-right: 15px; background-color:#99CCFF;">Submit</button>
<button type="submit" class="pure-button pure-button-primary" id="button2" style="
width: 81px;margin-left: 15px;background-color:#99CCFF;">Clear</button>
</div>
</fieldset>
</form>
I know about $POST for after the submit button is pressed but I figured this would be a bit different since it is going to a file. Probably JS I assume, would that be just like saving to a text file in a Java program?

Related

_self is not working with a href

I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.

How to close a boostrap collapse whenever a user scroll down or coutside the collapse

This is what I'm currently using to trigger it
GET FREE QUOTE
then this is the html code
<div id="demo" class="collapse">
<br><br><br><br><br><br><br><br>
<div class="wrap-type-input">
<form id="get_free_quote" class="contact-form" method="post" action="contact/contact-process.php">
<div class="input-wrap name">
<input type="text" value="" tabindex="1" placeholder="Name (*)" name="name" id="name" required="">
</div>
<div class="input-wrap name">
<input type="text" min="0" value="" accept="*/phone" tabindex="1" placeholder="Phone (*)" name="phone" id="name" required="">
</div>
<div class="input-wrap email">
<input type="email" value="" tabindex="2" placeholder="Email (*)" name="email" id="email" required="">
</div>
<div class="textarea-wrap">
<textarea class="type-input" tabindex="3" placeholder="Items you Need" name="message" id="message-contact" required=""></textarea>
</div>
<div class="subscribe">
<button type="submit" id="submit" class="button" name="submit">Send Message</button>
</div>
</form>
</div>
</div>
I will really be grateful for an answer

AngularJS UI Validate Password Fields

Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...

Bootstrap-validator not displaying errors

I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);

ajax form submision not working at rating

Here the code for review rating. When I submit the form, the data will not be submitted to database. Any help is welcome.
<form id="commentform" method="POST" action="#" class="form form-inline form-contact">
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtTitle">
<label for="email">REVIEW TITLE<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" aria-required="true" tabindex="1" size="30" value="" id="author" name="txtName" required>
<label for="author">NAME<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="email" aria-required="true" tabindex="2" size="30" value="" id="email" name="txtEmail" required>
<label for="email">MAIL<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<input type="text" tabindex="3" size="30" value="" id="url" name="txtContact">
<label for="email">CONTACT<span class="red-clr bold">*</span></label>
</p>
<p class="push-down-20">
<textarea class="input-block-level" tabindex="4" rows="7" cols="70" id="comment" name="txtComment" placeholder="Your Review ..." required></textarea>
</p>
<p class="push-down-20">
<!--<div class="tuto-cnt">-->
<div class="rate-ex2-cnt">
<div id="1" class="rate-btn-1 rate-btn"></div>
<div id="2" class="rate-btn-2 rate-btn"></div>
<div id="3" class="rate-btn-3 rate-btn"></div>
<div id="4" class="rate-btn-4 rate-btn"></div>
<div id="5" class="rate-btn-5 rate-btn"></div>
</div>
<!--</div>-->
</p>
<p>
<input class="btn btn-primary bold" type="submit" tabindex="5" id="rate-btn" name="rate-btn">Submit</button>
</p>
</form>
You should check if the form submitted successsfully first.In the other words, if there's something wrong in the submit button or form definition, background codes will know nothing about what you do! The second step, you said 'the data will not be submitted to database', if the backgound codes already received the data successfully but can't save to database only, I suggest you paste more codes about the saving process, then we can know more about where's the error!

Categories