Input method WYSIWYG editor not storing values in mysql database? - javascript

I am using WYSIWYG editor to input job description in my portal but it is not storing the values in to the databe
here is my code
<form class="form-horizontal" role="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-group">
<label class="control-label col-sm-2" for="jtitle">Job Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="jtitle" name="jtitle" placeholder="Enter job title">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="duration">Job Duration</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="duration" name="duration" placeholder="Enter duration">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="budget">Budget</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Budget" name="budget" placeholder="Enter Budget">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="keyskills">Key Skills</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="keyskills" name="keyskills"placeholder="Enter Skills">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="jobdescription">Job Description</label>
<div class="col-sm-10">
<input type="textarea" rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description">
<script type="text/javascript">
CKEDITOR.replace( 'jobdescription' );
</script>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="edate">Expiry Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="edate" name="edate" placeholder="Click to enter expiry date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="cdexmin">Candidate Experience Minimum</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="cdexmin" name="cdexmin" placeholder="Enter Minimum Experience">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="cdexmax">Candidate Experience Maximum</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="cdexmax" name="cdexmax" placeholder="Enter Maximum Experience">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submit" class="btn btn-default">Post Job</button>
</div>
</div>
</form>
<?php
if(isset($_POST['submit'])) {
try {
// Establish server connection and select database
$username=$_SESSION['username'];
$stmt = $db->prepare("SELECT * FROM employer
INNER JOIN company ON employer.cid= company.cid
WHERE employer.username='$username' ");
$stmt->execute();
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$cid=$row['cid'];
$eid=$row['eid'];
$jtitle=$_POST['jtitle'];
$duration=$_POST['duration'];
$budget=$_POST['budget'];
$keyskills=$_POST['keyskills'];
$jobdescription=$_POST['jobdescription'];
$edate=$_POST['edate'];
$cdexmin=$_POST['cdexmin'];
$cdexmax=$_POST['cdexmax'];
$stmt = $db->prepare("INSERT INTO
job(cid,eid,jtitle,duration,budget,
keyskills,jdesc,edate,
cdexmin,cdexmax)
values('$cid','$eid','$jtitle','$duration','$budget',
'$keyskills','$jobdescription','$edate',
'$cdexmin','$cdexmax') ");
$stmt->execute();
$result="Successfully Job Posted to view your Job It should be activated by Admin";
header("Location:/emprdash?success=1");
} catch(PDOException $e){
echo "Error occurs:". $e->getMessage();
}
}
?>
All values are entering but job description only not updating i downloaded ckeditor and also uploaded the files in to the server and i attached javascript ckeditor.js in my page but is not updating the values in to the form is there any errors or what can i do for this

Gowri, There is no textarea type available in input tag so please change Following code
<input type="textarea" rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description">
to
<textarea rows="1000" class="form-control" id="jobdescription" name="jobdescription" placeholder="Enter Job Description"></textarea>

Related

Serialize a form in order to send it via Ajax

I want to send a form via Ajax, not via a submit button.
I defined the form as follows in the below code excerpt, and later I defined the jQuery function to trap the CREATE BUTTON action.
When I debug this I get that
console.log($('#customer_form').serialize()); does not throw anything.
Is this the right way of serializing a form?
Do the buttons need to be inside the <form></form> element?
Here is the used code:
HTML:
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>
JavaScript:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
You just forgot to add the name attribute to your inputs:
<input name="nameofInput" .... />
-------^
See the below snippet:
$(document).ready(function(){
$('#create').click(function(event) {
console.log('foo');
alert($('#customer_form').serialize());
event.preventDefault();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">
<div class="form-group">
<label class="col-sm-4 control-label" for="name">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
<small id="name_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_1">Address</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
<small id="address_line_1_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="address_line_2"></label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
<small id="address_line_2_help" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="town">Town</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
<small id="town_help" class="form-text text-muted"></small>
</div>
</div>
<button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>
</form>

populate a form from backend with angularjs

I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope

checkbox and ineger variable doesn't send any data to phpMyAdmin database

I'm not sure if I actually have problem with checkbox form or age, height and weight which i put it in int as variable on phpMyAdmin. Because after I click signup, it just write error upside the form. So I really confuse where is my error
<?php
session_start();
if(isset($_SESSION['user'])!="")
{
header("Location: home.php");
}
include_once 'dbconnect.php';
if(isset($_POST['signup']))
{
$username = mysql_real_escape_string($_POST['username']);
$email = mysql_real_escape_string($_POST['email']);
$upass = md5(mysql_real_escape_string($_POST['password']));
$age = $_POST['age'];
$disease=$_POST['disease'];
$weight = $_POST['weight'];
$heigth = $_POST['height'];
$dis="";
$flag=0;
foreach($disease as $entry){
$dis .= $entry."|";
$flag=1;
}
if($flag==1){
$dis=rtrim($dis);
}
// Insert data into mysql
$sql="INSERT INTO users(username,email,password, age, disease, weight, heigth) VALUES('$username','$email','$upass', '$age', '$dis', '$weight', '$heigth')";
$result=mysql_query($sql);
// if successfully insert data into database, displays message "Successful".
if($result){
echo "Successful";
echo "<BR>";
echo "<a href='P.SIGNUP.php'>Back to main page</a>";
}
else {
echo "ERROR"; }
}
?>
<form name=register method="post" class="form-horizontal" role="form" onSubmit="return validatePwd()">
<div class="form-group">
<div class="form-group">
<label for="disease" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<h1>Register</h1>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="username" placeholder="User Name" class="required" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="6-12 character" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password2" placeholder="6-12 character" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Someone#example.com" class="email required" />
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" name="age" min="45" max="55" step="1" value="45" />
</div>
</div>
<div class="form-group">
<label for="disease" class="col-sm-2 control-label">Disease</label>
<div class="col-sm-10">
<input type="checkbox" name="disease[]" value="obesity" />Obesity<br/>
<input type="checkbox" name="disease[]" value="diabetes" />Diabetes<br/><br/>
<b>Cancer</b><br>
<input type="checkbox" name="disease[]" value="coloncancer" />Colon Cancer<br/>
<input type="checkbox" name="disease[]" value="kidneyCancer" />Kidney Cancer<br/>
<input type="checkbox" name="disease[]" value="breastCancer" />Breast Cancer<br/><br/>
<input type="checkbox" name="disease[]" value="cardio" />Cardio Disease<br/>
</div>
</div>
<div class="form-group">
<label for="weight" class="col-sm-2 control-label">Weight</label>
<div class="col-sm-10">
<input type="number" name="weight" min="30" max="180" step="10" />kg
</div>
</div>
<div class="form-group">
<label for="height" class="col-sm-2 control-label">Height</label>
<div class="col-sm-10">
<input type="number" name="height" min="100" max="200" step="10" />cm
</div>
</div>
</div>
<div class="form-group">
<label for="disease" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" name="signup"> SIGNUP </button>
</div>
</div>
</form>

Best way to get all required inputs

I have form, where exist few required fields Example
<div class="form-group">
<label class="col-md-3 control-label" for="mpassword">Password<span class="required"> * </span></label>
<div class="col-md-3">
<input type="password" id="mpassword" name="mpassword" class="form-control" placeholder="Enter password"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="memail">Email <span class="required">* </span></label>
<div class="col-md-3">
<input type="email" id="memail" name="memail" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mname">Full name<span class="required">* </span></label>
<div class="col-md-3">
<input type="text" id="mname" name="mname" class="form-control" placeholder="Enter name" value="MyName"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="mname">Nick name</label>
<div class="col-md-3">
<input type="text" id="mname" name="mname" class="form-control" placeholder="Enter nickname"/>
</div>
</div>
Problem, i don't know what is correct way to get all required fields as they don't have required attribute or class. Only labels have required class, which means "this input is required"
Just target the labels, and then get the inputs based on the for attribute
$('label:has(.required)').map(function() {
return $('#' + $(this).attr('for'));
});
Note that two of the form elements have the same name ?
$('.required').next().find('input').each(function() {
// handle elements
});

Tab Validation not happening for Dropdownlist only

I have written some validations for my fields to happen on tab out.The validations work for all the input fields but the dropdown fields dont get valdated.
My HTML is as shown
<head>
<title>CREATE PROVIDER</title>
</head>
<body>
<div class="container">
<h1 class="col-sm-offset-2">Enter Provider Details:</h1><br />
<form class="form-horizontal" role="form" id="ProviderDetailsForm">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value: FirstName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">LAST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Enter the Last Name" id="LastName" data-bind="value: LastName" onkeypress="return onlyAlphabets(event);">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_LastName">Enter the last name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Certification" data-bind="value:SelectedCertification,options: Certification, optionsCaption: 'Select a Certification'">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-bind="value: ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
<button type="reset" class="btn btn-primary col-sm-1">Reset</button>
</div>
</form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>
The JS script is
$("#FirstName").blur(function () {
if ($(this).val().trim().length == 0) {
$(this).addClass('borderclass');
$("#Err_FirstName").show();
}
else {
$("#Err_FirstName").hide();
$(this).removeClass('borderclass');
}
});
//Scripts for the Certification
$("#Certification option:selected").blur(function () {
if ($('#Certification :selected').text() == "Select a Certification")
alert("Please choose a Certification");
});
//Scripts for the Specialization
$("#Specialization option:selected").blur(function () {
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Please choose a Specialization");
});
I have also attached an image
Could you please guide me in the right direction.Thanks.
I have also included the following jquery files in my solution if that helps
jquery.2.1.3.min.js and jquery-ui-1.11.2.js
Check this : http://jsfiddle.net/4vsr04o9/
$("#Specialization").blur(function () {
//alert("hello");
if ($('#Specialization :selected').text() == "Select a Specialization")
alert("Select a Specialization");
});
<div class="form-group">
<label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
<div class="col-sm-6">
<select class="form-control" id="Specialization" data-bind="value: Specialization">
<option>Select a Specialization</option>
<option>Hello World</option>
</select>
</div>
</div>

Categories