tinymce textareas value error - cant solve - javascript

$('.button-save').click(function(b){
b.preventDefault();
var title = $('#title').val(),
category = $('#category').val(),
file = $('#file').val(),
short_content = tinyMCE.get('#short_content').getContent(),
content = tinyMCE.get('#content').getContent(),
date = $('#date').val(),
language = $('#language').val();
alert(short_content);
$.ajax({
type: 'POST',
url: '/admin/save',
data: {
title:title,
category:category,
file:file,
short_content:short_content,
content:content,
date:date,
language:language
},
success: function(data){
$('.adm-notification').html(data);
}
});
});
As you see there are two textareas (short_content,content); I tried to get them via tinyMCE.get('#content').getContent(). But i'm getting the error
Uncaught TypeError: Cannot call method 'getContent' of undefined
HTML code
<form action=\"\" method=\"post\">
<div class=\"element\">
<label for=\"name\">Page title <span class=\"red\">(required)</span></label>
<input id=\"title\" name=\"name\" value=".$edit['title']." class=\"text\" />
</div>
<div class=\"element\">
<label for=\"category\">Category <span class=\"red\">(required)</span></label>
<input id=\"category\" name=\"category\" value=".$edit['category']." class=\"text\" />
</div>
<div class=\"element\">
<label for=\"attach\">Attachments</label>
<input type=\"file\" id=\"file\" name=\"attach\" />
</div>
<div class=\"element\">
<label for=\"short-content\">Short content <span class=\"red\">(required)</span></label>
<textarea name=\"short_content\" id=\"short_content\" class=\"textarea\" rows=\"10\">".$edit['short_content']."</textarea>
</div>
<div class=\"element\">
<label for=\"content\">Long content <span class=\"red\">(required)</span></label>
<textarea name=\"content\" id=\"long_content\" class=\"textarea\" rows=\"10\">".$edit['content']."</textarea>
</div>
<div class=\"element\">
<label for=\"date\">Date <span class=\"red\">(required)</span></label>
<input id=\"date\" name=\"date\" class=\"text\" value=".$edit['date']." />
</div>
<div class=\"element\">
<label for=\"language\">Language <span class=\"red\">(required)</span></label>
<input id=\"language\" name=\"language\" value=".$edit['lang']." class=\"text\" />
</div>
<div class=\"entry\">
<button type=\"submit\" id=\"button-save\" class=\"add button-save\">Save page</button>
</div>
</form>
How to fix?

You need to supply the id of the textarea, without the #.
tinyMCE.get('long_content').getContent()
tinyMCE.get('short_content').getContent()
btw, you need to decide whether you want to submit the form or read out the value with JavaScript and then send it to the server. Here a solution reading it out with JS:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
$(function(){
$('#button-save').click(function(){
console.log("ok");
var short_content = tinyMCE.get('short_content').getContent();
var content = tinyMCE.get('long_content').getContent();
alert(short_content);
alert(content);
});
});
</script>
<textarea name="short_content" id="short_content" >'short_content'</textarea>
<textarea name="long_content" id="long_content" >'content'</textarea>
<button id="button-save" class="add button-save">Save page</button>
Same as a working fiddle.

Related

All the Javascript functions for my web page suddenly stopped being recognized

All of the buttons on my web site suddenly stopped working. When I try to press them, in the console it says that they don't exist. I've checked to make sure the Javascript filename in the script tag is correct. I made a folder only for my current Javascript, html, and CSS files. I tried changing the script tag from being at the end of the html document to in the header. None of these things did anything.
medAppFreshStart3.html:33 Uncaught TypeError: noteModal is not a function
at HTMLButtonElement.onclick (medAppFreshStart3.html:33)
onclick # medAppFreshStart3.html:33
<!DOCTYPE html>
<html>
<header>
<script src="medAppFreshStart3.js"></script>
<link rel="stylesheet" href="medAppStyle3.css" />
</header>
<body>
<div class="container">
<div class="d1">
demographics
<button onclick="newPatient()" id="newPatient">+ New Patient</button>
<button onclick="localStorage.clear()" id="clearPtData">
Clear Patient Data</button
><br />
<!--<label for="search">Patient Search</label>-->
<input id="search" placeholder="Enter patient name" />
<button id="searchButton">search</button>
<p id="nameDisplay"></p>
<p id="ageDisplay"></p>
<!--<label for="search">patient search</label>
<input
type="search"
onsearch="findPatient()"
name="search"
id="search"
/>-->
</div>
<div class="d2 flex-container">
current note
<button onclick="noteModal()" id="newNote">+ Add</button>
<div class="content">
<div class="current-note-sub content-1" id="subjective">
Subjective:
</div>
<div class="current-note-sub content-1" id="objective">
Objective:
</div>
<div class="current-note-sub content-1" id="assessment">
Assessment:
</div>
<div class="current-note-sub content-1" id="plan">Plan</div>
</div>
</div>
<div class="d3">
Problem-list
<button onclick="addProblem()" id="new problem">+ Add</button>
<div class="content">
<div class="problem">Problem:</div>
<div class="problem">Problem:</div>
<div class="problem">Problem:</div>
<div class="problem">PRoblem:</div>
</div>
</div>
<div class="d4 flex-container">
prescriptions
<button onclick="addPrescription()" id="new prescription">+ Add</button>
<div class="content" id="prescriptions">
<div class="prescription" id="prescription1">prescription1</div>
<div class="prescription" id="prescription2">prescription2</div>
<div class="prescription" id="prescription3">prescription3</div>
<div class="prescription" id="prescription4">prescription3</div>
</div>
</div>
<div class="d5 flex-container">
Previous Notes
<div class="content">
<div class="past-note" id="past-note1">Date: Complaint:</div>
<div class="past-note" id="past-note2">Date: Complaint:</div>
<div class="past-note" id="past-note3">Date: Complaint:</div>
<div class="past-note" id="past-note4">Date: Complaint:</div>
</div>
</div>
</div>
<div id="addPrescription" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span onclick="closePrescription()" class="close">×</span>
<form action="" method="post" id="prescriptionForm">
<label for="Drug"> Drug:</label>
<input
type="text"
id="Drug"
name="Drug"
type="text"
reqired
aria-required="true"
/>
<label for="Dosage"> Dosage:</label>
<input
type="number"
id="Dosage"
name="Dosage"
required
aria-required="true"
/>
<label for="measurement">Measurement</label>
<select id="measurement" name="measurement">
<option value="micrograms">micrograms</option>
<option value="milligrams">milligrams</option>
<option value="grams">grams</option>
</select>
</form>
<button
type="submit"
value="submit"
form="PrescriptionForm"
onclick="createPrescription(); closePrescription()"
>
+ Create
</button>
</div>
</div>
<div id="noteModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span onclick="closeNote()" class="close">×</span>
<form action="" method="post" id="noteForm" name="noteform">
<label for="Date"> Date: </label>
<input
type="text"
id="Date"
name="Date"
reqired
aria-required="true"
/>
<label for="complaint"> Complaint: </label>
<input
type="text"
id="complaint"
name="complaint"
reqired
aria-required="true"
/>
<label for="subjective">Subjective</label>
<textarea id="subjective" name="subjective"></textarea>
<label for="objective">Objective</label>
<textarea id="objective" name="objective"></textarea>
<label for="assessment">Assessment</label>
<textarea id="assesment" name="assessment"></textarea>
<label for="plan">Plan</label>
<textarea id="plan" name="plan"></textarea>
</form>
<button onclick="createNote(), closeNote()">+ Create</button>
</div>
</div>
<div id="addProblem" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span onclick="closeProblem()" class="close">×</span>
<form action="" method="post" id="problemForm">
<label for="problem"> Problem:</label>
<input
type="text"
id="problemForm"
name="problemForm"
reqired
aria-required="true"
/>
</form>
<button
type="submit"
value="submit"
form="problem"
onclick="closeProblem()"
>
+ Create
</button>
</div>
</div>
<div id="newPtDemographics" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span onclick="closeDemo()" class="close">×</span>
<form action="" method="post" id="demoForm">
<label for="name"> Name:</label>
<input
type="text"
id="name"
name="name"
reqired
aria-required="true"
/>
<label for="age"> Age:</label>
<input
type="number"
id="age"
name="age"
reqired
aria-required="true"
/>
</form>
<button onclick="createPatient(), closeDemo()">+ Create</button>
</div>
</div>
</body>
</html>
```
```function newPatient() {
const addPatient = document.getElementById('newPtDemographics');
addPatient.style.display = 'block';
}
function findPatient() {
let name = document.getElementById(search);
name = name.innerText;
console.log(name);
}
const button1 = document.getElementById('searchButton');
searchButton.addEventListener('click', () => {
const name = document.getElementById('search').value;
//console.log(name);
let patients = localStorage.getItem('patients');
patients = JSON.parse(patients);
let patient = patients[name];
nameDisplay = document.getElementById('nameDisplay');
ageDisplay = document.getElementById('ageDisplay');
nameDisplay.innerHTML = 'Name: ' + patient[key];
ageDisplay.innerHTML = 'Age' = patient.age;
//console.log(patient);
//patients = JSON.parse(patients);
});
function createPatient() {
let patients = localStorage.getItem('patients');
const name = document.getElementById('name').value;
const age = document.getElementById('age').value;
if (patients !== null) {
//instead of parsing here can just append array with new patient if it already exists.
//Will need to parse to retrieve data to fill patient details when select new patient or
//reopen broswer.
patients = JSON.parse(patients);
} else {
patients = {};
}
patients[name] = { age: age };
//patients.push({ [name]: { age: age } });
localStorage.setItem('patients', JSON.stringify(patients));
//console.log(patients[name]);
}
function addPrescription() {
const addPrescription = document.getElementById('addPrescription');
addPrescription.style.display = 'block';
}
function createPrescription() {
const div = document.getElementById('prescriptions');
const newPrescription = document.createElement('div');
newPrescription.classList.add('prescription');
const name = document.getElementById('name').value;
console.log(name);
//var patient = JSON.parse(localStorage.getItem('patients.[name]'));
//newPrescription.innerHTML = patient;
//div.appendChild(newPrescription);
//console.log('testing');
//console.log(patient);
//console.log('testing');
/*
newPrescription.innerHTML =
'Drug: ' +
document.getElementById('prescriptionForm').Drug.value +
' Dosage: ' +
document.getElementById('prescriptionForm').Dosage.value +
' ' +
document.getElementById('prescriptionForm').measurement.value;
div.appendChild(newPrescription);
*/
}
function createNote() {
let noteForm = document.getElementById('noteForm');
let formData = new FormData(noteForm);
var object = {};
formData.forEach(function (value, key) {
object[key] = value;
});
var note = JSON.stringify(object);
}
function noteModal() {
const noteModal = document.getElementById('noteModal');
noteModal.style.display = 'block';
}
function addProblem() {
const addProblem = document.getElementById('addProblem');
addProblem.style.display = 'block';
}
function closeProblem() {
const addProblem = document.getElementById('addProblem');
addProblem.style.display = 'none';
}
function closeNote() {
const noteModal = document.getElementById('noteModal');
noteModal.style.display = 'none';
}
function closePrescription() {
const addPrescription = document.getElementById('addPrescription');
addPrescription.style.display = 'none';
}
function closeDemo() {
const addPatient = document.getElementById('newPtDemographics');
addPatient.style.display = 'none';
}

fetch doesn't send autofilled input

When my login credentials are prefilled by my browser (chrome) my fetch function doesn't send the values
html
<div class='login-frame'>
<h3>Bienvenue</h3>
<div class='form'>
<div class='input-handler'>
<label for='login'>Login</label>
<input type='text' id='login' name='login' autocomplete='on'>
</div>
<br>
<div class='input-handler'>
<label for='pass'>Mot-de-passe</label>
<input type='password' id='pass' name='pass' autocomplete='on'>
</div>
<br>
<button id='loginbutton'>CONNEXION</button>
</div>
</div>
JS
window.onload = function() {
var pass = document.getElementById('pass'),
login = document.getElementById('login'),
loginButton = document.getElementById('loginbutton');
loginbutton.onclick = (e)=> {
var creds = {
login: login.value,
pass: pass.value
}
fetch('functions/log.php', {
method: "POST",
header: {"Content-type": "application/json; charset=UTF-8"},
body: JSON.stringify(creds)
});
}
PHP
$pos = json_decode(file_get_contents('php://input', true));
echo var_dump($pos);
If I type anything, it returns
object(stdClass)#3 (2) {
["login"]=>
string(3) "qfz"
["pass"]=>
string(5) "zfqzf"
}
If I use the browser prefill, it returns
NULL
It was a mistake,
as #CBroe said, it was a security problem. Changing my html to a proper form make it works as it should
<form class='login-frame' method='post' action='#'>
<div class='login-logo'><img src='bs/img/logo_b.svg'></div>
<h3>Bienvenue</h3>
<div class='form'>
<div class='input-handler'>
<label for='login'>Login</label>
<input type='text' id='login' name='login' autocomplete='on'>
</div>
<br>
<div class='input-handler'>
<label for='pass'>Mot-de-passe</label>
<input type='password' id='pass' name='pass' autocomplete='on'>
</div>
<br>
<button type='submit' id='loginbutton'>CONNEXION</button>
</div>
</form>

Ajax post is fired twice when using a keyup event

I have a zipcode checker which posts using ajax after the length of an input field is equal to 6. This works, except the ajax is posted twice. Why is that? I am using an api which has 1000 calls each month, so this behaviour already cuts that in half.
Maybe it would make sense to me that because of some bug it fires again when typing a 7th character, but that is not even the case, when I type exactly 6 characters the ajax is fired twice.
$("body").on("keyup", "#billing_postcode", function() {
var value = $(this).val();
var housenumber = $("#billing_streetnumber").val();
if (housenumber.length >= 1) {
if (value.length == 6) {
url = 'catalog/postcodecheck.php';
var $postcode = $('#billing_postcode').val();
var $huisnummer = $('#billing_streetnumber').val();
var posting = $.post(url, {
postcode: $postcode,
huisnummer: $huisnummer
});
posting.done(function(data) {
var content = $($.parseHTML(data));
$("#postcoderesult").empty().append(content);
});
} else {
}
} else {
alert('Vul eerst je huisnummer in voor dat je verder kan.');
$("#billing_postcode").val('');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3">
<p class="single-form-row">
<label>Huisnummer <span class="required">*</span></label>
<input type="text" name="billing_streetnumber" id="billing_streetnumber" required>
</p>
</div>
<div class="col-lg-4">
<p class="single-form-row">
<label>Toevoeging (optioneel)</label>
<input type="text" name="billing_streetextra" id="billing_streetextra">
</p>
</div>
<div class="col-lg-5">
<p class="single-form-row">
<label>Postcode<span class="required">*</span></label>
<input type="text" name="billing_postcode" id="billing_postcode" required>
</p>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<p class="single-form-row">
<label>Straatnaam <span class="required">*</span></label>
<input type="text" name="billing_street" id="billing_street" disabled required>
</p>
</div>
<div class="col-lg-6">
<p class="single-form-row">
<label>Stad<span class="required">*</span></label>
<input type="text" name="billing_city" id="billing_city" disabled required>
</p>
</div>
</div>
</div>

html form: action page doesn't see element added dinamically with js

I wrote a code to add dinamically elements in a form with js. when i submit data, action page says that index of this element are undefined
I have this form:
<form action="testRicetta.php" method= "POST" >
[...]
<ul id ="passi" >
<li id ="li_passo0">
<div class="row">
<div class="col-25">
<label for="descrizione">Passo 0</label>
</div>
<div class="col-75">
<textarea id="passo0" name="passo0" placeholder="Descrivi
il passo" style="height:100px" required ></textarea>
<input type="file" id="immagine_0" name="immagine" >
</div>
</div>
</li>
</ul>
<button id="addMore" >Aggiungi passo</button>
This is the js code where appear the listener of button #addMore
var passi = 1;
$(function() {
$("#addMore").click(function(e)
{
e.preventDefault();
$("#passi").append(`<li id ="li_passo"`+passi+`>
<div class="row">
<div class="col-25">
<label for="passo"`+passi+`>Passo `+passi+`</label>
</div>
<div class="col-75">
<textarea id="passo"`+passi+` name="passo"`+passi+`
placeholder="Descrivi il passo" style="height:100px"
required ></textarea>
<input type="file" id="immagine_"`+passi+`
name="immagine" >
</div>
</div>
</li>`);
passi++;
},
$('.sel').chosen());
})
action page:
echo $_POST{passo0];
echo $_POST{passo1];
Result:
Notice: Undefined index: passo1
Furthermore, is possibile read data in a loop? i tried this
for($i = 0; isset($_POST['passo'+$i]);$i++)
echo $_POST['passo'+$i];
but i get this error:
Warning: A non-numeric value encountered in (the loop)
So how can i read this data, and how can do it with a loop?
When your adding the new field, you are concatenating the passi variable value outside the of name name="passo"'+passi+', it should be name="passo'+passi+'".
Try:
var passi = 1;
$(function() {
$("#addMore").click(function(e)
{
e.preventDefault();
$("#passi").append('<li id ="li_passo"'+passi+'>
<div class="row">
<div class="col-25">
<label for="passo"'+passi+'>Passo '+passi+'</label>
</div>
<div class="col-75">
<textarea id="passo"'+passi+' name="passo'+passi+'"
placeholder="Descrivi il passo" style="height:100px"
required ></textarea>
<input type="file" id="immagine_"'+passi+'
name="immagine" >
</div>
</div>
</li>');
passi++;
},
$('.sel').chosen());
})
And then:
echo $_POST[passo0];
echo $_POST[passo1];

Jquery - find next element in each loop

I have a question like so.
I have HTML structure:
<form id="form">
<div class="row">
<div class="item-input">
<label for="A1">A1</label>
<input type="text" name ="A1" />
<span class="input-require">(*)</span>
<span class="info">(Enter A1)</span>
</div>
<div class="item-input">
<label for="A2">A2</label>
<input type="text" name ="A2" />
<span class="input-require">(*)</span>
<span class="info">(Enter A2)</span>
</div>
</div>
<div class="row">
<div class="item-input">
<label for="B1">B1</label>
<input type="text" name ="B1" />
<span class="input-require">(*)</span>
<span class="info">(Enter B1)</span>
</div>
<div class="item-input">
<label for="B2">B2</label>
<input type="text" name ="B2" />
<span class="input-require">(*)</span>
<span class="info">(Enter B2)</span>
</div>
</div>
...
</form>
Now I want to selected 'span' has class "info" behind input[type=text] each.
I try:
<script type="text/javascript">
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest("item-input").next().find('span.info');
console.log(spanInfo.text()); // Result is empty
});
});
</script>
Why is empty? Help me please. How do I, thanks
var spanInfo = $(this).closest("item-input").next().find('span.info');
Should be
var spanInfo = $(this).closest(".item-input").next().find('span.info');
You are missing the . (dot, class)
Your mean is show "(Enter A2)" and "(Enter B2)" or show all 4 element value: (Enter A1), (Enter A2), (Enter B1), (Enter B2)
If only show 2 value then CODE HERE
else You want to show 4 value, you can code:
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest(".item-input").find('span.info');
console.log(spanInfo.text());
});
});

Categories