Add another ckeditor in codeigniter using add button on the page - javascript

I want to add another ckeditor whenever you click the add button another text field with ckeditor will be added. When click it added new field already but i cannot type on the new field with ckeditor. Here's my code:
* View *
<div id="addanother">
<?php echo $this->ckeditor->editor("textheading_lead[]",""); ?>
<br>
<div class="form-group">
<label for="sel1">小見出し</label>
<select class="form-control" name="subheading[]">
<option value="">監修 one</option>
<option value="">監修 two</option>
<option value="">監修 three</option>
<option value="">監修 four</option>
</select>
</div>
<input type="text" class="form-control" name="subheading_text[]">
</div>
<div id="addnewdiv"></div>
<a href="" class="btn btn-info addfields" >+</a>
* javascript *
$('.addfields').on('click', addfields);
function addfields(e) {
var new_input = $('#addanother').html();
var aaa = new_input + '<br>';
$('#addnewdiv').append(new_input);
e.preventDefault();
}
* Controller *
public function add_special(){
$this->load->library('ckeditor');
$this->load->library('ckfinder');
$this->ckeditor->basePath = base_url().'asset/ckeditor/';
$this->ckeditor->config['language'] = 'en';
$this->ckeditor->config['width'] = '730px';
$this->ckeditor->config['height'] = '300px';
$this->ckfinder->SetupCKEditor($this->ckeditor,'../../asset/ckfinder/');
$this->load->view('common/header');
$this->load->view('admin/special/add_special');
$this->load->view('common/footer');
}
link of CKEditor package
https://ckeditor.com/ckeditor-4/download/

Unfortunately ckeditor plugin used to create dynamic id for editor panel. While appending div, plugin finds duplicate editor instances with same id textheading_lead[] and it was throwing error in your case. Here i made some alterations and will work for you.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<head>
<title>How to Integrate CKeditor in Codeigniter using Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/ckfinder/ckfinder.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="<?php echo base_url(); ?>/Test57619322/here">
<div class="row">
<div class="col-lg-12">
<div id="addanother">
<br>
<?php echo $this->ckeditor->editor("textheading_lead[0]",""); ?>
<br>
<div class="form-group">
<label for="sel1">小見出し</label>
<select class="form-control" name="subheading[]">
<option value="">監修 one</option>
<option value="">監修 two</option>
<option value="">監修 three</option>
<option value="">監修 four</option>
</select>
</div>
<input type="text" class="form-control" name="subheading_text[]">
</div>
<div id="addnewdiv"></div>
</div>
</div>
<div class="row" style="margin-top:20px;">
<div class="col-lg-12">
<a href="" class="btn btn-info addfields" >+ Add Fields</a>
<input type="submit" name="submitBtn" value="Submit" class="btn btn-success">
</div>
</div>
</form>
</div>
<script type="text/javascript">
$('.addfields').on('click', addfields);
var i=0;
function addfields(e) {
e.preventDefault();
var copy = $('#addanother').clone();
var oneplus=i+1;
$(copy).find('div#cke_textheading_lead\\[0\\]').remove();
$(copy).find('script').remove();
$(copy).find('textarea[name=textheading_lead\\[0\\]]').attr('name', 'textheading_lead['+oneplus+']');
$('#addnewdiv').append($(copy).html()+ '<br>');
CKEDITOR.replace('textheading_lead['+oneplus+']');
i++;
}
</script>
</body>
</html>
You can receive response in your controller like $_POST["textheading_lead"] or Codeigniter post method and as usual it gets as an array.

Related

add country code in the dropdown of intl-country-code dropdown in jquery

I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />

Items disappearing when adding input from HTML textfield to HTML Select/Option List

Been on this issue for more than a day now. I'm trying to add items to a HTML Select/Option list from a HTML text field using JavaScript. However, the items are added and disappearing in a split second. Please can some one help.
You can have a look at the FULL source code below:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="CSS/mainoperations.css">
</head>
<body>
<div class="header">
</div>
<div id="container">
<div id="leftcolumn">
<ul>
<h1>PartsCribber</h1>
<li><a class="active" href="mainoperations.php">Main Operations</a></li>
<li>Profile Settings</li>
<li>Change Password</li>
<li>Student Cart</li>
<li>Student Possession</li>
<li>Update Inventory</li>
<li>Log Out</li>
</ul>
</div>
<div id="rightcolumn">
<form>
<div class="title">
<h3>
<?php echo "View/Edit Profile"; ?>
</h3>
</div>
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success">
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<?php include('errors.php'); ?>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue()" >Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>
<script>
function insertValue()
{
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}
</script>
</div>
<div style="clear: both;" > </div>
</div>
</body>
</html>
The function I've been starring at:
function insertValue()
{
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}
The related HTML code for the text input and the options listbox:
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue()" >Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
Simple add:
onclick="insertValue(); return false;"
Actually, since your insertValue function returns false, you could actually do
onclick="return insertValue()"
This will prevent your form from submitting and reloading (and therefor emptying the select when reloading the page). See amended snippet below:
function insertValue() {
var select = document.getElementById("myselect"),
txtVal = document.getElementById("barcode").value,
newOption = document.createElement("OPTION"),
newOptionVal = document.createTextNode(txtVal);
newOption.appendChild(newOptionVal);
select.insertBefore(newOption,select.firstChild);
return false;
}
<form>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button class="btn" onclick="insertValue(); return false;">Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>
Personally I would write your code slightly differently to make it clearer and not use the onclick:
var select = document.getElementById("myselect");
var add = document.getElementById("add-barcode");
var barcode = document.getElementById("barcode");
add.addEventListener('click', function( event ){
event.preventDefault();
var option = document.createElement( 'option' );
option.textContent = barcode.value;
select.insertBefore( option, select.childNodes[ 0 ] );
});
<form>
<div class="input-group">
<label>Barcode:</label>
<input type="text" id="barcode">
</div>
<div class="input-group">
<button id="add-barcode" class="btn">Enter</button>
</div>
<select id="myselect" size="10" class="select">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
</select>
</form>

JQuery chosen did not show search box?

I have a form with few fields that should use drop down chosen. I have created a class on each select tag. This class is used to apply chosen on each element. I'm not getting any errors once a form is loaded but chosen doesn't work. Only what is displayed on the screen is this:
Chosen Image: https://i.stack.imgur.com/TQEK5.png
Here is my code:
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center"><input type="button" name="chSubmit" id="chSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
Here is JQuery:
$(document).ready(function() {
$('.chosen').each(function(){
$(this).chosen();
});
});
Should be your reference not set up properly, use the following:
Load CSS -> jQuery -> chosen
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
$(document).ready(function() {
$('.chosen').each(function() {
$(this).chosen();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<form name="frmDemo" id="frmDemo" method="POST" action="#" class="frmLayout">
<fieldset>
<legend>Demographic</legend>
<div class="formItem">
<label for="city" class="required">City:</label>
<select name="city" id="city" class="chosen">
<option value="">Choose City</option>
<cfoutput query="getCity">
<option value="#cityNum#">#cityName#</option>
</cfoutput>
</select>
</div>
<div class="formItem">
<p align="center">
<input type="button" name="chSubmit" id="chSubmit" value="Submit">
</p>
</div>
</fieldset>
</form>

Why can't I set a multiple select dropdown with this code?

opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?
var data = {};
data.action = "get-form-data";
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/enablers.php', data, formDataSuccess);
function formDataSuccess(data) {
data = JSON.parse(data);
$("#min-rating").val(data.MinRating);
debugger;
var opts = data.AcceptedMedia.split(",");
$.each(opts, function(inx,val){
$('#accepted-media option[value=' + val + ']').attr('selected', true);
})
$("#special-instructions").val(data.SpecialInstructions);
}
HTML
<html lang="en">
<head>
<title>Writer's Tryst - Enablers Form</title>
<link type="text/css" href="css/enablers.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" href="css/jquery.rateyo.min.css">
<style>
select {
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="container center_div">
<img id="img-enablers" src="#" alt="images" />
<form id = "form-enablers" class="form-horizontal well">
<h1>Enablers</h1>
<p>
<label for="form-type" class="fixed50">Form:</label>
<select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required>
</select>
</p>
<p>
<label for="genres" class="fixed50">Genres:</label>
<select id="genres" name="genres[]" multiple="multiple" required>
</select><br/>
</p>
<p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
<p>
<label for="accepted-media" class="fixed50">Accepted Media:</label>
<select id="accepted-media" name="accepted-media[]" multiple="multiple" required>
<option value='1'>Mail</option>
<option value='2'>PDF File</option>
</select><br/>
</p>
<label for="min-rating" class="fixed50">Minimum Rating:</label>
<div id="min-rating"></div>
<p> <label for="special-instructions" class="fixed50">Special Instructions:</label>
<textarea id ="special-instructions" name="special-instructions"></textarea>
</p>
<p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
<p id="recaptcha-elements"></p>
<div class="form-group">
<button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button>
</div>
<input id="userid" name="userid" type="hidden" />
</form>
</div>
<form id="writers-list">
<p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
<div id="table-list"></div>
<div id="main" class="content"></div>
</form>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/jquery.rateyo.js"></script>
<script src="js/enablers.js"></script>
<script src="js/recaptcha.js"></script>
</body>
</html>
Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options
$('#accepted-media').val(opts)
DEMO

passing data through text box from select option into another page

I am trying to pass data through a text box which is selected through the 'other' in select option. However, when I run the program, the data is not passed. Any ideas how to resolve this? here is the code that I am using. I have added most of the code below. I have to pass information through the select option in the form of a text box. However the information is not passed. Is there any other method that can do this, passing through text to another page?
<?php include_once("header.php"); ?>
<?php
$q_sel = "select * from tbl_drug";
$r_sel = mysql_query($q_sel);
?>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#my_textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('#my_textarea').show(); else $('#my_textarea').hide();
});
});
</script>
</head>
<body style="background-color: #25383c;background-image: url(img/background.png);">
<?php include_once("nav.php"); ?>
<h1> Medication Appropriateness Index</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form class="form-horizontal" role="form" action="save_drug.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Drug:</label>
<div class="col-xs-3">
<select name="drug" id="Drug" class="form-control" required="">
<option value="" selected="" disabled="">Please select A drug...</option>
<?php
while($r1 = mysql_fetch_array($r_sel))
{ ?>
<option value="<?php echo $r1['d_id']; ?>"><?php echo $r1['drug_name']; ?></option>
<?php
}
?>
</select>
</div>
</div>
<script>
$(function() {
$("#dose").tooltip();
});
</script>
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
<textarea name="my_textarea" id="my_textarea"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="patient_id" value="<?php echo $_GET['patient_id']; ?>">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
always use 'name' attribute for inputs , because only name can send data on submit.
<textarea name="my_textarea" id="my_textarea"></textarea>

Categories