Ajax Submit nicEdit - javascript

I'm using nicEditor on one of my projects and i want to submit the content using jQuery from plugin. Here is my code
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor().panelInstance('txt1');
});
</script>
<script>
$(document).ready(function()
{
$('#submit-from').on('submit', function(e)
{
e.preventDefault();
$('#submit').attr('disabled', ''); // disable upload button
//show uploading message
$(this).ajaxSubmit({
target: '#output-login',
success: afterSuccess //call function after success
});
});
});
function afterSuccess()
{
$('#submit-from').resetForm(); // reset form
$('#submit').removeAttr('disabled'); //enable submit button
$('#loadding').html('');
}
</script>
<form id="submit-from" action="submit.php" method="post">
<input type="text" id="title" name="title" />
<textarea id="txt1" name="txt1" ></textarea>
<input type="submit" id="submit" value="Submit"/></div>
</form>
I'm using
jQuery from plugin: http://malsup.com/jquery/form/
nicEdit: http://nicedit.com/
All work fine except what ever in the nicEdit doesn't seems to be posting. If i remove the nicEdit text area will post fine. Can someone point me out the problem. Really appropriate your help.

Try this:
// Get values from NICEditors
$('textarea').each(function () {
var id_nic = $(this).attr('id');
var nic = nicEditors.findEditor(id_nic);
if (nic) nic.saveContent();
});

I think you should encode the HTML of the contenteditable div of nicEdit and then pass that value to the textarea when you try to submit the form.
$(document).ready(function()
{
$('#submit-from').on('submit', function(e)
{
e.preventDefault();
$('#submit').attr('disabled', ''); // disable upload button
//show uploading message
var encodedHTML = String($('.nicEdit-main').html())
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
$('#txt1').val(encodedHTML);
$(this).ajaxSubmit({
target: '#output-login',
success: afterSuccess //call function after success
});
});
});

Related

javascript - hide results when input is empty

I have Live Search JSON Data Using Ajax jQuery, and I would like to call more than one JSON file for the search.
At the start of the page, with the input empty, the results are not shown.
However, if you write and delete text again in the input, all results are displayed.
I would like to hide all the results again when the input is empty again.
Thank you in advance.
HTML Input:
<div class="container" style="width:900px;">
<div align="center">
<input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
</div>
<ul class="list-group" id="result"></ul>
</div>
JavaScript:
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$('#search').keyup(function(){
$('#result').html('');
$('#state').val('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('1.json', function(data) {
$.each(data.entries, function(key, value){
if (value.title.search(expression) != -1 || value.author.search(expression) != -1)
{
$('#result').append('<li class="list-group-item link-class">'+value.title+' <span class="text-muted">'+value.author+'</span></li>');
}
});
});
});
$('#result').on('click', 'li', function() {
var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');
});
});
</script>
$('#search').keypress(function() {
if($(this).val().length > 1) {
// Continue work
} else {
$('#result').html('')
}
Using keypress and keydown check the length before the text change. You can use keyup and change.
It is better to use it with keyup:
$('#txt1').keyup(function() {
if (!$(this).val().length) $('#result').html('');
});
You can also use change:
$('#txt1').change(function() {
if (!$(this).val().length) $('#result').html('');
});
The change will be executed when you click somewhere else on the page.

JQuery and PHP pressing enter to process

I have the following two files request.php and response.php. I used to send the request using a button
<input type="button" value="Request message" onclick="post()"/>
but now I and considering using just the "Enter"(13) key.
The code works, however it shows the result just for a couple of milliseconds. In theory keydown function is working and getting the result from response, bt I dont know why just for a very short time.
Any tips?
request.php
<script type="text/javascript">
function post(){
$("#message").keydown(function (e) {
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message" onclick="post()"/><br/>
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
response.php
<?php
function returnString() {
$post_msg = $_POST['postmessage'];
echo "Message entered ->", $post_msg ," <- here";
}
returnString();
?>
You are trying to mimic behavior that is already available by default
with a form that only has one input.
Thus your form is submitting and reloading the page.
You don't need to listen to key event on the <input>. Just listen for the submit event of the form and prevent the default submit process
$('form').submit(function(e){
e.preventDefault();
var msg = $('#message').val();
mockPost(msg).then(function(res){
$('#post_message').append('<p>' + res + '<p>')
});
})
function mockPost(v){
return new Promise(function(resolve){
setTimeout(function(){
resolve('Message= ' + v)
}, 200)
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
</form>
<div id="post_message"></div>
When you hit enter, the form is submitted. Just add e.preventDefault(), this way:
function post(){
$("#message").keydown(function (e) {
e.preventDefault();
if (e.keyCode == 13) {
var message=document.getElementById("message").value;
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
}
});
}
I appreciate the suggestions. So I ended up with this code, just as suggested by #misorude . Simply adding a preventDefault and using submit in form.
I added an "onclick" on submit in case the user wants to submit by hitting the button.
The response.php stays the same.
request.php
<script type="text/javascript">
function post(){
$('form').submit(function(e){
e.preventDefault();
var message = $('#message').val();
$.post('response.php',{postmessage:message},
function(data){
var result = $('#post_message').html(data);
console
return result; });
});
}
</script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
<input type="submit" value="Submit" onclick="post()">
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

How can I refresh my live search by hitting on the cross button which is inside the input text field in JavaScript?

I am working on a live search. I have made live searching using ajax where whatever alphabet I write in it, it displays the matching result to that alphabet or word. But the issue occurs when I click the cross button inside a search field it will clear the word inside input field but it is not refreshing my search and it is not showing data before a search but the result of the previous search.
I want my live search cross button functionality just like this -https://codepen.io/gastonbesada/pen/eqvJK
But this is in angular. I want the code in JavaScript.
And this is my code -
//let this page name is index.php
<div class="search">
<i class="fa fa-search" ></i>
<input type="text" id="searchterm" name="searchterm" placeholder="Search" >
</div>
<table id="result"></table>
//this is the script of index.php
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"search.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#searchterm').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
/* Search script for cross button inside input field*/
<script>
(function ($, undefined) {
$.fn.clearable = function () {
var $this = this;
$this.wrap('<div class="clear-holder" />');
var helper = $('<span title="Press Backspace" class="clear-helper">×</span>');
$this.parent().append(helper);
$this.parent().on('keyup', function() {
if($this.val()) {
helper.css('display', 'inline-block');
} else helper.hide();
});
helper.click(function(){
$this.val("");
helper.hide();
});
};
})(jQuery);
$("#searchterm").clearable();
</script>
just call your ajax with empty value again what you did in else part.
helper.click(function(){
$this.val("");
$this.trigger("keyup");
helper.hide();
});

Make text in ajax generated input field selectable

I can't make text in ajax generated input field selectable on click.
<input type="text" class="form-control input-lg" id="url" value="">
<script>
$.ajax({
...
element.append('<input type="text" id="test" value="' + 'https://' + location.host + '/' + data[0].data + '">')
}
});
return false;
});
</script>
<script>
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
</script>
I can select all text on click in #url input, beside text in ajax generated input.
All I want is to make text in both static inputs and ajax generated inputs selected on click.
$('body').on('focus', 'input', function () {
$(this).select();
});

How to submit only 1 input field in form?

I have a form where cmds are entered in cmdEntered Textarea and the same command is copied in logs Textarea.
I want only cmdEntered textarea to be sumbitted on form submit. Below is my code which I tried:
function inputKeyDown(evt, input) {
if (evt.keyCode == 13) {
var textarea = document.getElementById("logs");
textarea.value += "\n" + input.value;
input.value = "";
document.getElementById("form1").submit();
return false;
}
}
</script>
</head>
<body>
Enter Commands:< br>
<form action ="" method="post" id="form1">
<textarea rows="15" cols="80" id="cmdEntered" onkeydown="return inputKeyDown(event, this);"></textarea>
<br><br></form>
Logs:<br>
<textarea rows="15" cols="80" id="logs" readonly></textarea>
Possibilities of passing value between client and server
ajax
xmlHTTPrequest
form tag in HTML
Option 1: Use ajax like this DEMO
$("#cmdEntered").keydown(function(event){
// event.preventDefault();
if (event.keyCode == 13){
$.ajax({
url:'',
data:{cmdEntered:$(this).val()},
type:'POST',
success:function(data){
alert(data);
}
});
}
});
Option 2: Avoid using $_POST['logs'] in your server side language(php)

Categories