Combine two field in email field - javascript

laravel
I'm struggling to put the result of two concatme fields in another field input.
I would like to put the results of response in the email field input.
The thing I would like to achieve is to make it easier for the user to log in to the system without putting the whole email address john#box.domain.com.
here is the code so far.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
#include('auth/banner')
<div class="panel panel-default panel-shaded">
<div class="panel-body">
#action('login_form.before')
<form class="form-horizontal margin-top" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="col-md-4 control-label">{{ __('Email Address') }}</label>
<div class="col-md-6">
<!-- SCRIPT -->
<script type="text/javascript">
function concatme()
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
document.getElementById("response").innerText = num1 + '' +num2;
}
</script>
<!-- FIN SCRIPT -->
<!---- INICIO---->
<input type="text" name="num1" class="form-control" id="num1" placeholder="USER">
<input type="text" name="num2" class="form-control" id="num2" value="#box.domain.com" placeholder="Number 2">
<!---FIN-->
<!-- RESUTLADO PREVIEW -->
<p id="response"></p>
<!-- RESULDADO PREVIEW -->
<input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>
#if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
<label for="password" class="col-md-4 control-label">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required>
#if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<label class="checkbox">
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> {{ __('Remember Me') }}
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" onclick="concatme()" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Eventy::filter('auth.password_reset_available', true))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
<p>Hola</p>
#action('login_form.after')
</div>
</div>
</div>
</div>
</div>
#endsection

I think its working but you are not able to see it because you have use form and called javascript function on submit button.
What happens is its sending request to given route and refreshing page thats make paragraph tag to empty again. Remove type submit from submit button and then confirm if its working or not.

Related

Turbolinks loading content before css/images

I'm using Turbolinks in my laravel App, the problem I'm encountering now is when I switch view, the content is loaded before the CSS and images and it causes an awkward display of HTML before quickly switching to full view with is bad for UX. How can I fix this, probably by ensuring turbolinks only switches once it has loaded all CSS and images first?
====EDIT====
I've been able to uncover this much
We are routing from there to the login page:
#extends('./layouts/base')
#section('meta')
#section('title', 'Become a Tuper Seller')
<link rel = "stylesheet" href = " {{ asset('fonts/material-icon/css/material-design-iconic-font.min.css')}} ">
#endsection
#section('body')
<link rel = "stylesheet" href = " {{ mix('css/auth.css')}} ">
<div class = "auth-form">
<div class="main">
<!-- Sign up form -->
<section class="signup">
<div class="container">
<div class="signup-content">
<div class="signup-form">
<h2 class="form-title">Create A Consumer Account</h2>
<form method="POST" class="register-form" id="register-form">
#csrf
<div class="form-group">
<label for="username"><i class="zmdi zmdi-account material-icons-name"></i></label>
<input type="text" name="username" id="name" placeholder="Your Name" value = "{{ old('username')}}"/>
</div>
#error("username")
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="email"><i class="zmdi zmdi-email"></i></label>
<input type="email" name="email" value = "{{ old('email')}}" id="email" placeholder="Your Email"/>
</div>
#error('email')
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="telephone"><i class="zmdi zmdi-phone"></i></label>
<input type="number" value = "{{ old('telephone') }}"name="telephone" id="telephone" placeholder="Telephone"/>
</div>
#error("telephone")
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="password"><i class="zmdi zmdi-lock"></i></label>
<input type="password" name="password" value = "{{ old('password') }}"id="pass" placeholder="Password"/>
</div>
#error('password')
<div class = "alert alert-danger"> {{ $message }}</div>
#enderror
<div class="form-group">
<label for="password_confirmation"><i class="zmdi zmdi-lock-outline"></i></label>
<input type="password" value = "{{ old('password_confirmation')}}" name="password_confirmation" id="re_pass" placeholder="Repeat your password"/>
</div>
<div class="form-group">
<input type="checkbox" name="agree-term" id="agree-term" class="agree-term" />
<label for="agree-term" class="label-agree-term"><span><span></span></span>I agree all statements in Terms of service</label>
</div>
<div class="form-group form-button">
<input type="submit" name="signup" id="signup" class="form-submit" value="Register"/>
</div>
</form>
</div>
<div class="signup-image">
<figure><img src=" {{ asset('img/tuper_logo.jpg')}} " alt="sing up image"></figure>
I want to be a seller
</div>
</div>
</div>
</section>
<!-- Sing in Form -->
</div>
</div>
#endsection
I've noticed that replacing the mix(auth.css) in the login page with inline style tags and pasting the mix file fixes this error but this is not a suitable way of accomplishing this.
Well ive found a pretty neat solution. Since the css lag is caused by the link tag and since it works well when i paste the required css into style tags, i can replace by link tag with
<style>
{{ file_get_contents(asset('css/auth.css'))}}
</style>
This way it dumps the css as content instead of hyper referencing it which erradicates the dumbass delay. Also the mix helper wont work here if mix.version() is set in your webpack.mix.js because of the cache hashing.
But i dont imagine it will be a problem since there will be no cache of the css.

How to automatically submit form when input is inserted?

I want to auto submit my form when value is inserted in the "Thumb_Print_Code" Field. below is my form. I want to do this without clicking on save nutton
Im working on Php Laravel Framework.
<form method="POST" action="{{ route('added') }}" id="myform">
#csrf
<div class="form-group row">
<label for="Thumb_Print_Code" class="col-md-4 col-form-label text-md-right">{{ __('Thumb Print Code') }}</label>
<div class="col-md-6">
<input id="Thumb_Print_Code" type="int" class="form-control #error('Thumb_Print_Code') is-invalid #enderror" name="Thumb_Print_Code" value="{{ old('Thumb_Print_Code') }}" required autocomplete="Thumb_Print_Code">
#error('Thumb_Print_Code')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Save Attendance ') }}
</button>
</div>
</div>
<br>
</div>
</form>
Please let me know how can I achieve my end goals ?

JavaScript get closest class

I want to show reply forms in my comment section based on comment reply button that has been clicked but currently it shows forms of all comments instead of specific comment. The question is
How do I get closest form in order to just show one form at the time?
Code
// this button exist in all comments with same class
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
//reply form DIV
<div class="blog-form mt-6 replyComment" style="display:none">// form here</div>
// New comment form DIV
<div class="blog-form mt-6 originalComment"> //form here </div>
$('.reply').click(function (e) {
e.preventDefault();
$('.replyComment').show();
$('.originalComment').hide();
});
Update
Full commenting code
<div class="blog-comments mt-4">
#include('errors.errors')
#if(isset($post))
#forelse($post->comments as $comment)
<div class="comments-1 w-100">
<div class="comments-photo">
#if(!empty($comment->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $comment->user->avatar }}" alt="{{$comment->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$comment->user->name}}">
#endif
</div>
<div class="comments-info">
<h6> {{$comment->user->name}} <span>{{$comment->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $comment->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $comment->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($comment->replies as $reply)
<div class="comments-1 comments-2 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply->user->avatar }}" alt="{{$reply->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply->user->name}}">
#endif
</div>
<div class="comments-info p-3 bg-light">
<h6> {{$reply->user->name}} <span>{{$reply->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-secondary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $reply->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $reply->id }}" />
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
#forelse($reply->replies as $reply2)
<div class="comments-1 comments-2 ml-5 w-100">
<div class="comments-photo">
#if(!empty($reply->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $reply2->user->avatar }}" alt="{{$reply2->user->name}}">
#else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$reply2->user->name}}">
#endif
</div>
<div class="comments-info bg-light p-3">
<h6> {{$reply2->user->name}} <span>{{$reply2->created_at->format('M d, Y')}}</span></h6>
<p class="mt-1">{!! $reply2->comment !!}</p>
</div>
</div>
#empty
#endforelse
#empty
#endforelse
#empty
<h3>Be the first to leave a comment.</h3>
#endforelse
#else
{{-- reserved for products reviews --}}
#endif
</div>
<div class="blog-form mt-6 originalComment">
<h4 class="mb-3">Post a Comment</h4>
<form method="post" action="{{ route('comments.store') }}">
#csrf
<div class="gray-form row">
<div class="col-md-12">
#if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
#elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
#endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
Minimizing the forms above for better understanding
Structure
<comments>
-reply button
<reply form></reply form>
<comment reply>
-reply button
<reply form></reply form>
<comment reply replies>
<comment reply replies>
</comment reply>
</comments>
<comment form>
</comment form>
It seems that the <div> that you want to show is the element that follows the button's comments-1 ancestor.
Given this, I would use .closest('.comments-1') to select the ancestor, and .next('.replyComment') to select the element that follows.
$('.reply').click(function (e) {
e.preventDefault();
$(".replyComment, .originalComment").hide();
$(this).closest('.comments-1').next('.replyComment').show();
});
Depending on whether there is a form above the button (then it won't work):
function opens(arg) {
var closest = document.getElementsByClassName("blog-form");
closest[arg].style.display = "block";
for(var i = 1; i < closest.length; i++) {
if(i != arg) {
closest[i].style.display = "none";
}
}
}
<button onclick = "opens(0)">Reply</button>
<form class = "blog-form" style = "display: none">
<input>
</form>
<form class = "blog-form" style = "display: none">
<input>
</form>
<button onclick = "opens(1)">Another Reply</button>
In order for this to work, I'm manipulating the CSS display property.

jQuery Cloning and incrementing input, textarea, that has name, id and for

I'm still very new to jQuery, and would need help to how to increment 3 elements in this code.
name, id & for.
The name consist of products[0]category, id consist of checkbox[0], for consist of checkbox[0] which is for labels on the checkbox that id use.
I've tried searching for examples. But all them haven't found any good results that i could learn from unfortunately. So in the codes below, they're not there to increase increment as i have totally no idea what else i can do to increase increment numbering.
$(document).ready(function() {
let $append = $('#append');
// append location's data listing
$append.on('change', '.location', function(){
var value = $(this).val();
$('.location_id').val($('#locations [value="'+value+'"]').data('locationid'));
$('.loc_desc').val($('#locations [value="'+value+'"]').data('locdesc'));
});
// enable checkbox for serialnumbers
$append.on('change','.enable-serial', function(){
let $item = $(this).closest('.product-item');
let $checkbox = $item.find('.enable');
$checkbox.prop('disabled', !this.checked);
});
// ctrl for key in checkbox
$append.on('click', '.keyin-ctrl', function() {
let $container = $(this).closest('.product-item');
let $serial = $container.find('.serial');
$container.find('.display').val(function(i, v) {
return v + $serial.val() + ';\n';
});
$serial.val('').focus();
});
// ctrl for del textarea
$append.on('click', '.undo-ctrl', function() {
let $container = $(this).closest('.product-item');
$container.find('.display').val('');
});
// clone product, increment products[x]var
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var index = $('.product-item').length;
var regex = /^(.+?)(\d+)$/i;
let $product = $append.find('.product-item.template')
.clone()
.show()
.removeClass('template')
.insertAfter('.product-item:last');;
$product.find('span').text('#' + itemNo);
$product.find(':checkbox').prop('checked', false);
$product.find('.enable').prop('disabled', true);
$product.find('input, textarea').val('');
$('#append').append($product);
});
// delete product, but remain original template intact
$('#delete_product').on('click', function(){
var itemNo = $('.product-item').length + 1;
let $product = $append.find('.product-item:last:not(".template")');
$product.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>{{ __('Product Details') }}</h4>
<hr>
<form method="post" action="">
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Product Setting') }}</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">{{ __('Add Product') }} <i class="fas fa-plus-square"></i></button>
<button type="button" id="delete_product" class="btn btn-dark ml-3">{{ __('Delete Last Product') }} <i class="fas fa-minus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item template">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __("Location") }}</label>
<div class="col-sm-2">
<input class="form-control location" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Description") }}</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Seial Number(s)') }}</label>
<div class="col-sm-5">
<input class="form-control enable serial" maxlength="25" placeholder="Key in Serial Number and hit button 'Key In'" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable keyin-ctrl" type="button" disabled>{{ __('Key In') }}</button>
<button class="btn btn-dark enable undo-ctrl" type="button" disabled>{{ __('Del') }}</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial" id="checkbox[0]" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox[0]">{{ __('tick to enable serialnumber')}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<div class="form-group row">
<div class="col-sm-12 ">
#csrf
<button type="submit" class="btn btn-dark float-right ml-4">Next <i class="fas fa-caret-right"></i></button>
<!--<button type="button" class="btn btn-secondary float-right" onclick="history.back()">Previous</button>-->
</div>
</div>
<datalist id="locations">
#foreach($locations as $location)
<option value="{{ $location->loc_name}}" data-locationid="{{ $location->location_id }}" data-locdesc="{{ $location->loc_desc }}"></option>
#endforeach
</datalist>
</form>
</div>
</main>
So how do I actually achieve this to add increment to the NAME, ID and FOR my clones?
From the original template of products[0]variable to products[1]variable, checkbox[0] to checkbox[1]
If you want to increment either an ID, class, etc. you can't use .clone(), like the documentation warns:
Using .clone() has the side-effect of producing elements with
duplicate id attributes, which are supposed to be unique. Where
possible, it is recommended to avoid cloning elements with this
attribute or using class attributes as identifiers instead.
You'll have to do it "manually", following a very simple example below:
$( "#addrow" ).click(function() {
var count = $("#product").children().length;
$("#product").append("<input id='field[" + count + "]' type='text'>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
</div>
<input id="addrow" type="button" value="Add field">

AngularJS Contact Form

I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.
HTML Snippet
<form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
<p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
</div>
<!-- TEL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
<input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
<p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
</div>
<!-- TEXT -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
<textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
<p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">
<!-- <pre>
{{formData}}
</pre> -->
</form>
Controller
.controller('MainCtrl', function($scope, $http) {
this.features = keys;
$scope.submitForm = function(isValid) {
if (isValid) {
$scope.formData = {};
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
}
};
})
The process.php file is still empty since I'm not quite sure what to put here.
Regarding your form submission setup, you cannot put the ng-submit on any input[type="submit"] elements, instead you put ng-click. Also, according to the angular docs, when you have a ng-submit on the form, and an ng-click on any input[type="submit"] elements, the ng-click handlers will get called first, THEN the ng-submit handler will get called (your controller is set up for the opposite order).
But in your case, two submit handlers is unneccessary, as you can do all your validation with angular directives, and just use an ng-click. Theres an example plunker here.
HTML:
<div ng-controller="MainCtrl">
<form name="contactForm" novalidate>
<!-- NAME -->
<div ng-class="{'form-error':contactForm.name.$dirty && contactForm.name.$invalid, 'form-group':true}">
<input type="text" name="name" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required="" />
<div ng-messages="contactForm.name.$error" ng-show="contactForm.name.$dirty" >
<div ng-message="minlength">Name too short</div>
<div ng-message="required">Required Name</div>
</div>
</div>
<!-- EMAIL -->
<div ng-class="{'form-error':contactForm.email.$dirty && contactForm.email.$invalid, 'form-group':true}">
<input type="email" name="email" ng-model="formData.email" placeholder="Email adres" required />
<div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$dirty">
<div ng-message="email">Invalid Email</div>
<div ng-message="required">Required Email</div>
</div>
</div>
<!-- TEL -->
<div ng-class="{'form-error':contactForm.tel.$dirty && contactForm.tel.$invalid, 'form-group':true}">
<input type="text" name="tel" ng-pattern=/\d{3}-\d{3}-\d{4}/ ng-model="formData.tel" placeholder="Telefoonnummer" required />
<div ng-messages="contactForm.tel.$error" ng-show="contactForm.tel.$dirty">
<div ng-message="pattern">Valid form: XXX-XXX-XXXX</div>
<div ng-message="required">Required Phone</div>
</div>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-click="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak" />
</form>
</div>
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.formData = {};
$scope.processForm = function() {
alert('valid form!')
$http({
method : 'POST',
url : 'process.php',
data : $scope.formData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
});
Regarding the submission to your email, the $http service will post your data using the http protocol, so you cannot send it directly to you email, as email does not use the HTTP protocol for communication. You Could send the post data to your server, and have the server send the email (e.g. if you use Node you can use nodemailer package to send the email).
Just copy below code in your angularJs Project it will work fine
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row" style="margin-bottom:15px;">
<div class="col-md-12">
<div class="col-md-offset-1 col-md-6" id="box">
<h2 class="colr">Contact Us!</h2>
<hr>
<form class="form-horizontal" name="contactForm" ng-submit="submitContactForm(ContactDetails)" novalidate>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.first_name.$invalid && !contactForm.first_name.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="Name" ng-model="ContactDetails.FirstName" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.first_name.$invalid && !contactForm.first_name.$pristine" class="help-block">Username is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" ng-model="ContactDetails.Email" class="form-control" type="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
</div>
<span ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block"> Enter a valid email.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.phone.$invalid && !contactForm.phone.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" ng-model="ContactDetails.PhoneNumber" name="phone" ng-maxlength="10" ng-minlength="10" placeholder="9845640899" required>
</div>
<span ng-show="contactForm.phone.$invalid && !contactForm.phone.$pristine">Phone Number is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" ng-model="ContactDetails.Subject" placeholder="Enter Subject" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.subject.$invalid && !contactForm.subject.$pristine" class="help-block">Subject is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">
<div class="col-md-12 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" ng-model="ContactDetails.Comment" rows="6" name="comment" placeholder="Message" ng-maxlength="255" ng-minlength="10" required></textarea>
</div>
<span ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block"> Enter a Message.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-warning pull-right" ng-disabled="contactForm.$invalid">Send<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

Categories