I am using four input fields. After completing all the fields, the entered data will pass to the lower text area. How can it possible?
Please help me.
My view page is
<div class="controls">
<label class="fieldname">name</label>
<input type="text" id="name" name="name" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="housename">housename</label>
<input type="text" id="house number" name="house number" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="horizontal-form">
<div class="control-group">
<label class="control-label" for="firstName"></label>
</div>
<div class="controls">
<label class="fieldname">Street</label>
<input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="fieldname">city</label>
<input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="control-group">
<label class="control-label">Contact Address<span class="required">*</span></label>
<div class="controls">
<textarea rows="3" name="address" class="span5 m-wrap" title=" Address"></textarea>
</div>
</div>
Use this code:
name
<div class="controls">
<label class="housename">housename</label>
<input type="text" id="house_number" name="house_number" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="fieldname">Street</label>
<input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="fieldname">city</label>
<input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="control-group">
<label class="control-label">Contact Address<span class="required">*</span></label>
<div class="controls">
<textarea rows="3" id="address" name="address" class="span5 m-wrap" title=" Address"></textarea>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('input').on('change,function(){
var name = $('#name').val();
var house_number = $('#house_number').val(); // you need to change the id and name attributes for housename.
var street = $('#street').val();
var city = $('#city').val();
var data = name+","+house_number+","+street+","+city;
$("#address").html(data); // please add id attribute for textarea
});
</script>
Here is the complete code, which worked for me
<div class="controls">
<label class="fieldname">name</label>
<input type="text" id="name" name="name" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="housename">housename</label>
<input type="text" id="house_number" name="house_number" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="fieldname">Street</label>
<input type="text" id="street" name="street" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="controls">
<label class="fieldname">city</label>
<input type="text" id="city" name="city" class="m-wrap span4 horizontal-form" placeholder="">
</div>
<div class="control-group">
<label class="control-label">Contact Address<span class="required">*</span></label>
<div class="controls">
<textarea rows="3" id="address" name="address" class="span5 m-wrap" title=" Address"></textarea>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("input").on('change',function(){
var name = $('#name').val();
var house_number = $('#house_number').val(); // you need to change the id and name attributes for housename.
var street = $('#street').val();
var city = $('#city').val();
var data = name+","+house_number+","+street+","+city;
$("#address").html(data); // please add id attribute for textarea
});
</script>
Related
I have two problems.
1. Problem: When I add my selection to the razor page all required fields validation from the model do not work anymore.
Validation from model without selection
No Validation when I add my selection
When dropdown are in the Razor html no validation works and it crashes with NULL Values which I want to prevent. Like it is without select options.
Why is that?
2. Problem: When I select a customer from my drop down (CustomerDropDown.CusId) I would like to fill the ID into my ID field of contacts (contacts.CustomerId). How can I reach the selected value from dropdown and post it to my contact contacts.CustomerId?
== c# code ==
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc.Rendering;
using WorkCollaboration.Data;
using WorkCollaboration.Models;
namespace WorkCollaboration.Pages.Contacts
{
public class CreateModel : PageModel
{
private readonly WorkCollaboration.Data.WorkCollaborationContext _context;
public CreateModel(WorkCollaboration.Data.WorkCollaborationContext context)
{
_context = context;
}
public async Task<IActionResult> OnGetAsync()
{
CustomerDropDownDisp = await _context.CustomerDropDown.ToListAsync(); // Added for DropDown
SupplierDropDownDisp = await _context.SupplierDropDown.ToListAsync(); // Added for DropDown
return Page();
}
[BindProperty]
public Contact Contact { get; set; }
public IEnumerable<CustomerDropDown> CustomerDropDownDisp { get; set; }
public IEnumerable<SupplierDropDown> SupplierDropDownDisp { get; set; }
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details, see https://aka.ms/RazorPagesCRUD.
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.Contact.Add(Contact);
await _context.SaveChangesAsync();
return RedirectToPage("/ContactsOverview/Index");
}
}
}
== Razor Page Code ==
#page
#using WorkCollaboration.Models
#model WorkCollaboration.Pages.Contacts.CreateModel
#{
ViewData["Title"] = "Create";
ViewData["RandomId"] = Guid.NewGuid().GetHashCode();
}
<h1>Create</h1>
<h4>Contact</h4>
<p>
<a asp-page="/ContactsOverview/Index">Back to Index</a>
</p>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='#ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="#(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="#(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { #class = "form-group" })
<div class="form-group">
#Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
Back to List
</div>
</form>
</div>
</div>
Thank you for your help on how to get selected value (dropdown) to the corresponding contacts Id field.
Here is a demo:
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='#ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="#(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="#(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { #class = "form-group" })
<div class="form-group">
#Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
Back to List
</div>
</form>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>
$("#CusId").on("change", function () {
$("#Contact_CustomerId").val($("#SupId").val());
});
$("#SupId").on("change", function () {
$("#Contact_SupplierId").val($("#SupId").val());
});
</script>
result:
Hello and good day everyone, I am having a problem in ajax. I have a variable named fd that contains object. But i cant find a way to put it together with other variable in "data:". I just want to pass the data of fd and also the other variables from other inputs of my form. Thank you very much.
$('#register_btn').click(function(e) {
var fd = new FormData();
var files = $('#image')[0].files[0];
fd.append('image',files);
var val1 = $('#email').val();
var val2 = $('#firstname').val();
var val3 = $('#middlename').val();
var val4 = $('#lastname').val();
var val5 = $('#emp_status').val();
var val6 = $('input[name=date_hired]').val();
var val7 = $('#account_type').val();
var val8 = $('#notes').val();
var val9 = $('#position').val();
var val10 = $('#cp_number').val();
var val11 = $('#tel_number').val();
var val12 = $('#address').val();
$.ajax({
type: 'POST',
url: 'process/add_employee_process.php',
contentType: false,
cache: false,
processData:false,
data: {email: val1, firstname: val2, middlename: val3, lastname: val4, emp_status: val5, date_hired: val6, account_type: val7, notes: val8, position: val9, cp_number: val10, tel_number: val11, address: val12,fd},
success:function(html) {
if(html=="Failed"){
$("#gifcheckmark").attr('src','../campfire.gif');
$("#gifcheckmark").css('display','inline');
$("#gifcheckmark").css('width','inline');
$("#notif_message").text("Failed");
$("#register_btn").css('display','none');
$("#decline_btn").css('display','none');
}
else{
$("#notif_message").text("Success");
$("#gifcheckmark").css('display','inline');
$("#gifcheckmark").css('width','inline');
$("#register_btn").css('display','none');
$("#decline_btn").css('display','none');
setInterval(successGif, 1600);
$('#qr').load('../phpqrcode/index.php');
$('#qr').show();
}
}
});
});
This is the form
<form role="form" style="width: 100%;">
<div class="box-body">
<div class="box-header with-border col-xs-12">
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group col-md-3">
<label for="">Email </label>
<input type="email" id="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group col-md-3">
<label for="">Firstname </label>
<input type="text" id="firstname" class="form-control" id="" placeholder="Firstname">
</div>
<div class="form-group col-md-3">
<label for="">Middlename </label>
<input type="text" id="middlename" class="form-control" id="" placeholder="Middlename">
</div>
<div class="form-group col-md-3">
<label for="">Lastname </label>
<input type="text" id="lastname" class="form-control" id="" placeholder="Lastname">
</div>
<div class="form-group col-md-3">
<label for="">Employee Status </label>
<input type="text" id="emp_status" class="form-control" id="" placeholder="Employee Status">
</div>
<div class="form-group col-md-3">
<label for="">Date Hired </label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="date_hired" class="form-control pull-right" id="datepicker">
</div>
</div>
<div class="form-group col-md-3">
<label for="">Account Type </label>
<input type="text" id="account_type" class="form-control" id="" placeholder="Account Type">
</div>
<div class="form-group col-md-3">
<label for="">Notes </label>
<input type="text" id="notes" class="form-control" id="" placeholder="Notes">
</div>
<div class="form-group col-md-3">
<label for="">Positions </label>
<input type="text" id="position" class="form-control" id="" placeholder="Positions">
</div>
<div class="form-group col-md-3">
<label for="">Cellphone Number </label>
<input type="text" id="cp_number" class="form-control" id="" placeholder="Cellphone Number">
</div>
<div class="form-group col-md-3">
<label for="">Telephone Number </label>
<input type="text" id="tel_number" class="form-control" id="" placeholder="Telephone Number">
</div>
<div class="form-group col-md-3">
<label for="">Address </label>
<input type="text" id="address" class="form-control" id="" placeholder="Address">
</div>
<div class="form-group col-xs-12">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" id="image" name="image">
</div>
</div>
<!-- /.box-body -->
<div class="col-xs-2">
<center><button type="button" id="confirm_btn" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
Submit
</button></center>
</div>
</form>
This is the add_employee_process.php
$db = mysqli_connect('localhost', 'root','','cjwebsolutions');
$image = $_FILES['image']['name'];
$target = "image/".basename($image);
if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
$msg = "Image uploaded successfully";
}else{
$msg = "Failed to upload image";
}
$emp_id = make_emp_id($_POST['date_hired']);
$_POST['emp_id'] = $emp_id;
// Required field names
$required_fields = array('email','firstname','middlename','lastname', 'emp_status', 'date_hired','account_type','notes','position','cp_number','tel_number','address','emp_id');
$data_insert_fields = array('email','firstname','middlename','lastname', 'emp_status', 'date_hired','account_type','notes','position','cp_number','tel_number','address','emp_id');
if (check_empty_fields($required_fields)) {
echo "Failed";
}
else
{
data_insert($data_insert_fields,"cj_accounts");
}
I set up square connect api and my form submits just fine. My problem is I am trying to submit the payment and also email additional information to myself. If everything gets filled out then the code works perfectly but When I call requestCardNonce(event); it only requires the fields to generate the Nonce to be filled in and not the rest of the fields even tho I have them as required. If i remove requestCardNonce(event); all fields are required like they should be. Is there a way i can get validation on all of my fields to work with square connect api?
<form id="nonce-form" action="include/process-card.php" method="post">
<div class="sec1crt-frmlft">
<div class="form-container">
<div class="form-top">
<div class="form-toplft">
<center><img src="images/hdng-icon1.png" class="hdng-icon"></center>
</div>
<div class="form-toprgt">
<p class="txt2-chk">Billing Information</p>
</div>
</div>
<div class="form-content1">
<div class="frmelements">
<label for="FirstName">First Name<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon1.png"></center>
</div>
<input type="text" name="FirstName" class="ft-input" autocomplete="off" id="FirstName" required/>
</div>
</div>
<div class="frmelements">
<label for="LastName">Last Name<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon1.png"></center>
</div>
<input type="text" name="LastName" class="ft-input" autocomplete="off" id="LastName" required/>
</div>
</div>
<div class="frmelements">
<label for="Email">Email <span>*</span> </label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon3.png"></center>
</div>
<input type="text" name="Email" class="ft-input" autocomplete="off" id="Email"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" required/>
</div>
</div>
<div class="frmelements">
<label for="Address">Address<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon5.png"></center>
</div>
<input type="text" name="Address" class="ft-input" autocomplete="off" id="Address" required/>
</div>
</div>
<div class="frmelements short1">
<label for="State">State<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon7.png"></center>
</div>
<select name="State" class="ft-input" id="State" class="required" required>
<option value="" onclick="" selected="">Select State</option>
<option value="AL" onclick="">REMOVED TO SHOR</option>
</select>
</div>
</div>
<div class="frmelements short2">
<label for="City">City<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon6.png"></center>
</div>
<input type="text" name="City" class="ft-input" autocomplete="off" id="City" required/>
</div>
</div>
<div class="frmelements short1">
<label for="sq-postal-code">Zip Code <span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon8.png"></center>
</div>
<input type="text" name="sq-postal-code" class="ft-input" autocomplete="off" id="sq-postal-code"
pattern="^\d{5}(?:[-\s]\d{4})?$" required/>
</div>
</div>
<div class="frmelements short2">
<label for="Phone">Phone Number <span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon4.png"></center>
</div>
<input type="text" name="Phone" class="ft-input" autocomplete="off" id="Phone"
pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" required/>
</div>
</div>
</div>
</div>
</div>
<div class="sec1crt-frmrgt">
<div class="form-container">
<div class="form-top">
<div class="form-toplft">
<center><img src="images/hdng-icon2.png" class="hdng-icon"></center>
</div>
<div class="form-toprgt">
<p class="txt2-chk">Payment Information</p>
</div>
</div>
<div class="form-content2">
<div class="lwrform">
<div style="display:block;" id="cardDiv">
<div class="clearall"></div>
<img src="images/cards.png" class="cards">
<div class="clearall"></div>
<div class="frmelements short1">
<label for="sq-amount">Payment Amount<span>*</span></label>
<div class="field">
<div class="icon-box">
<center><img src="images/frmicon9.png"></center>
</div>
<input data-threeds="pan" type="text" maxlength="16" id="sq-amount" name="sq-amount" class="ft-input"
pattern="^[+-]?[0-9]{1,3}(?:,?[0-9]{3})*(?:\.[0-9]{2})?$" required>
</div>
</div>
<div class="frmelements">
<label for="sq-card-number">Card Number<span>*</span></label>
<div class="field">
<input data-threeds="pan" type="text" maxlength="16" id="sq-card-number" name="sq-card-number" class="ft-input noicon"
pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" required>
</div>
</div>
<div class="frmelements short1">
<label for="sq-expiration-date">Expiration Date<span>*</span></label>
<div class="field">
<input data-threeds="pan" type="text" id="sq-expiration-date" name="sq-expiration-date" class="ft-input noicon" required>
</div>
</div>
</div>
<div class="frmelements short2">
<label for="sq-cvv">CVV<span>*</span></label>
<div class="field">
<input type="text" class="ft-input noicon" name="sq-cvv" id="sq-cvv" maxlength="4"
pattern="^[0-9]{3,4}$" required>
</div>
</div>
<div class="frmelements short2">
<p class="txt4-chk">What is this?</p>
</div>
</div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="card-nonce" name="nonce">
</div>
<div class="clearall"></div>
<div class="frmelements btn-element">
<input type="submit" value="" id="sq-creditcard" onclick="requestCardNonce(event)"
class="button-credit-card">
</div>
<center><img src="images/postal-crt.png" class="postal-crt"></center>
</div>
</div>
</div>
</form>
this is the html part when i add more email id's only first email is being validated and rest of emails treat as normal even if they are not in proper
<form action="<?php echo base_url()?>index.php/EMail/show_email">
<div class="form-group">
<label for="exampleInputEmail1">To :</label>
<input type="email" name="toa[]" ng-model="to" placeholder="To" class=" tagsinput" value="ss" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Subject :</label>
<input type="text" class="form-control" ng-model="sub" name="suba" id="exampleInputEmail1" placeholder="Subject">
<div>{{sub}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">CC :</label>
<input type="text" class="form-control" ng-model="to" name="cca" id="exampleInputEmail1" placeholder="CC">
<div>{{to}}</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">BCC:</label>
<input type="text" class="form-control" name="bcca" id="exampleInputEmail1" placeholder="BCC">
</div>
<div class="form-group ">
<label for="ccomment" class="control-label">Message</label>
<textarea class="form-control " id="ccomment" name="msg" required></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<input type="submit" onclick="mail()" class="btn btn-primary" value="Send"/>
<button type="submit" class="btn btn-Success">Draft</button>
</form>
this is my controller and "toa "is that field which i mentioned in the image
function show_email(){
$this->form_validation->set_rules("toa[]","To","valid_email");
$this->form_validation->set_rules("cca","CC ","valid_email");
$this->form_validation->set_rules("suba","Subject","required");
$this->form_validation->set_rules("bcca","bcc","valid_email");
$this->form_validation->set_rules("msg","Message","required");
if($this->form_validation->run()==FALSE){
$data["title"]="EMail";
$this->load->view('header',$data);
$this->load->view('sidebar');
$this->load->view('Mail/mail');
}else{
//finish
$ccdata=$this->input->post("cca");
$bccdata=$this->input->post("bcca");
$sub=$this->input->post("suba");
$ms=$this->input->post("msg");
$dataa["username"]="MyProject";
$dataa["msg"]=$ms;
$msg=$this->load->view('Email_Temp/mail',$dataa,TRUE);
$todata=explode(",",$data);
print_r($todata[0]);
//$this->SendEmail($todata,$ccdata,$bccdata,$msg,$sub);
}
}
[Image] this is the field (to) that i want to validate
Hello everyone i want to add ckeditor in my view which has multiple divs. How can i do that by adding this ckeditor code:
<title>A Simple Page with CKEditor</title>
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
And this is my view
#extends('sadmin.main-template')
#section('title', 'Super admin Dashboard')
#section('title', 'Add Plan')
#section('content')
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 right-sidebar admin-client add-client">
#include('partials.errors')
<form action="{{url('sadmin/add_plan')}}" class="toggle-disabled" method="post">
{!! csrf_field() !!}
<h3 class="title">Add a plan</h3>
<div class="form-group">
<label >You Can Create Your Plan Here</label>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 left-client-title">
<div class="form-group">
<label class="form-label name">
<span class="form-name">Name</span>
<input type="text" class="form-control" id="name" name="name" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
<div class="form-group">
<label class="form-label name">
<span class="form-name">Price</span>
<input type="text" class="form-control" id="name" name="price" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-client-title">
<div class="form-group">
<label class="form-label name">
<span class="form-name">Allowed Users</span>
<input type="text" class="form-control" id="name" name="allowed_users" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
<div class="form-group">
<label class="form-label name">
<span class="form-name">Can Trail</span>
<input type="text" class="form-control" id="canTrail" name="can_trail" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
</div>
<div class="form-group">
<label class="form-label name">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 left-client-title">
<span class="form-name">Trail Duration</span>
<input type="text" class="form-control" id="password" name="trail_duration" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
<div class="form-group">
<label class="form-label name">
<span class="form-name">Detail 1</span>
<input type="text" class="form-control" id="passwordConfirmation" name="detail1" placeholder="" data-validation="custom" data-validation="required">
</label>
</div>
</div>
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-client-title">
<label class="form-label name">
<span class="form-name">Detail 2</span>
<input type="text" class="form-control" id="phoneNumber" name="detail2" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
<div class="form-group">
<label class="form-label name">
<span class="form-name">Staff Profiles</span>
<input type="text" class="form-control" id="planName" name="staff_profiles" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 left-client-title">
<div class="form-group">
<label class="form-label name">
<span class="form-name">Space Management</span>
<input type="text" class="form-control" id="planPrice" name="space_management" placeholder="" data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$">
</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-client-title">
<div class="form-group">
<label class="form-label name">
<span class="form-name">Currency Unit</span>
<input type="text" class="form-control" id="allowedUsers" name="currency_unit" placeholder=""data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$" >
</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-client-title">
<div class="form-group">
<label class="form-label name">
<span class="form-name">Location charges</span>
<input type="text" class="form-control" id="allowedUsers" name="location_charges" placeholder=""data-validation="custom" data-validation-regexp="^([A-Za-z ]+)$" >
</label>
</div>
</div>
</div>
<p> </p>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<div align="center">
<button type="submit" class="btn btn-success" style="padding-left:90px; padding-right:90px;"><strong>Submit</strong></button>
</div>
</div>
</div>
</section>
</div>
#endsection
How i can apply ckeditor code in each div any help would be appreciated.