Hi in a wizard on a confirmation tab i try to get the content from the tinymce editor. But it doesn't work. With normal textareas it works without any problems.
Example normal Textarea:
<div class="control-group">
<label class="control-label">MyValue<span class="required">*</span></label>
<div class="controls">
<textarea class="span12 m-wrap" style="max-width:100%;" name="MyValue" rows="7"></textarea>
</div></div>
Code to show text from textarea on the confirmation page:
<div class="control-group">
<label class="control-label">MyValue</label>
<div class="controls">
<span class="text display-value" data-display="MyValue"></span>
</div>
</div>
My JavaScript code:
var displayConfirm = function() {
$('.display-value', form).each(function(){
var input = $('[name="'+$(this).attr("data-display")+'"]', form);
if (input.is(":text") || input.is("textarea")) {
$(this).html(input.val());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'htmlinhalt') {
$(this).html($('[name="htmlinhalt"]', form).val());
}
});
}
But why it doesn't work with a tinymce textarea? I think I must get the content directly from tinymce not from textarea, but how?
Try
tinymce.get('your_textarea_id').getContent();
I had exactly the same problem and the previous answer wouldn't work for me either. The problem for me was that my textarea had no id. After giving it an id I was able to get the content easily with the previous answer (albeit with capital 'MCE'):
tinyMCE.get('your_textarea_id').getContent();
So you want to add an extra line into your if statement. If you give the textarea the same id as its name then this should work:
var displayConfirm = function() {
$('.display-value', form).each(function(){
var input = $('[name="'+$(this).attr("data-display")+'"]', form);
if (input.is(":text")) {
$(this).html(input.val());
} else if (input.is("textarea")) {
$(this).html(tinyMCE.get($(this).attr("data-display")).getContent());
} else if (input.is("select")) {
$(this).html(input.find('option:selected').text());
} else if (input.is(":radio") && input.is(":checked")) {
$(this).html(input.attr("data-title"));
} else if ($(this).attr("data-display") == 'htmlinhalt') {
$(this).html($('[name="htmlinhalt"]', form).val());
}
});
}
You can get the raw contents (with html tags), or only the text (html striped). The default format returned with function getContent() is the raw.
<textarea id="MyValue" name="MyValue"></textarea>
<div>
[getRawContents]
[getTextContents]
[getContents]
</div>
I use MyValue since you use in the your question. Change for your_textarea_id if needed.
More information for tinyMCE 3.x in API 3
More information for tinyMCE 4.x in API 4
Related
I have this code for search in my database, I use a barcode scanner (work like a keyboard), when I scan a barcode the input text shown perfectly, but I need to press MATCH to do the enter function, I want to submit it automatically after the barcode scanner scan a code and not to press MATCH.
<html>
<body>
<div class="container pt-5">
<div class="row">
<form method="POST" action="match.php" autocomplete="off">
<div class="form-group">
<label>Scan:</label>
<input type="text" id="no" name="no" class="form-control" required>
</div>
<div ></div>
<button class="btn btn-info" name="sub" type="submit">MATCH</button>
</form>
</div>
</div>
</body>
</html>
<?php
include 'includes/conn.php';
if (isset($_POST['sub'])) {
$sca=trim($_POST['no'],"");
$flag=0;
$credentials="";
$password="";
$firstname="";
$lastname="";
$new2 ="SELECT * FROM `voters`";
$res2=mysqli_query($conn, $new2);
while($row=mysqli_fetch_array($res2)){
//echo $row['number'].'<br>';
// if($row['number']){
if($row['credentials'] == $sca){
$flag=1;
$credentials=$row['credentials'];
$password=$row['password'];
$firstname=$row['firstname'];
$lastname=$row['lastname'];
}
}if ($flag==1) {
echo "<div class='container'><div class='row'><div class='col-sm-3'></div><div class='col-sm-6'><div class='alert alert-success d-flex justify-content-center mt-3'>".
'<br><b>Votante:</b>'.' '.$id.
'<br><b>Registro:</b>'.' '.$credentials.
'<br><b>Contraseña:</b>'.' '.$password.
'<br><b>Nombre:</b>'.' '.$firstname.
'<br><b>Apellidos:</b>'.' '.$lastname.
"</div></div></div><div class='row'><div class='col-sm-3'></div><div class='col-sm-6'>" ;
return;
}
else{
echo "<div class='alert alert-danger d-flex justify-content-center mt-3'>Product Not Found</div></div>";
return;
}
}
mysqli_close($conn);
?>
We had to work with barcode scanners a while ago, where we had a similar request, so I hope I can help here. Most simple barcode scanners just enter the scanned code and append a new line.
As stated in the comments you need some JavaScript in order to do that. We used the jquery library. Like CBroe said, you need to find the correct event, to use. We tried different events and found the "change" event to be the best suitable one for us.
Our case was a little more complex, because we had multiple fields and had to make ajax requests, so I tried to reduce our script to something that may be a good starting point for you:
$(document).ready(function() {
$('#no').change(function () { //if content of field with id #no changes do stuff
let value = $(this).val();
const minlength = 5;
if (value.length >= minlength) {
$( "#scanform" ).submit(); //submit form with id scanform
}
});
});
Pleas note, that this script assumes you add the id "scanform" to your form tag.
I have some input fields that are displayed from a loop using foreach. After click i want all of them to be required by using jquery. If the loop shows 1 or 3 inputs the required functions works perfectly but if the loop shows 2 inputs, only the first is required and the form can be saved with the second input empty. How can i solve this issue ?
Any help is really appreciated.
<form class="input-seg">
<?php
foreach($GET_INPUT as $get_input){
?>
<div class="form-group">
<label class="control-label col-sm-3"><?=$get_input->name;?></label>
<div class="col-sm-3">
<input type="text" name="inputname[]" class="form-control inp" >
</div>
</div>
<?php
}
?>
</form>
JQUERY
$('.input-seg').click(function() {
if($(".inp").val() == ""){
$(".inp").focus();
$('.inp').css('border', '2px solid');
$('.inp').css('border-color', 'red');
for(i=0;i<3;i++) {
$('.inp').fadeTo('slow', 0.1).fadeTo('slow', 1.0);
};
return false;
}
});
You should use focusout to validate your fields. The link shows a lot of examples. Handle $(this) inside your event listener is a much more elegant approach:
$('.inp').focusout(function() { validate your field element object $(this) });
Please help me how to get this two way video framing with selected timing values in text boxes as shown in following image using html and J query.Thank you guys in advance,please help me.
I have tried the following code ..
HTML
<div class="control">
<div class="progressBar">
<div class="bufferBar"></div>
<!--<div class="timeBar"></div>-->
<input class="timeBar time-slider" type="range" value="0" step="any" style="width: 1.66667%;">
</div>
</div>
JQUERY CODE
var timeDrag = false;
/* Drag status */
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
As shown in the attachment I need to select certain range in a video and I want to display those selected video starting time and ending time in text box.
I created a simple page with textarea with condition that it should be required when the textarea is empty.
<div class="control-group hidden-phone">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<textarea class="cleditor" id="textarea2" rows="3" name="isi_visimisi" required><?php echo $data['isi_visimisi'] ?></textarea>
</div>
</div>
When I press submit button with condition that the textarea is empty, it doesn't show any alert that the textarea need to be filled
This might get you started:
$('textarea').blur(function(){
if (this.value.length) $(this).removeAttr('required');
else $(this).attr('required', 'required');
});
$('button').click(function(){
var attr = $('textarea').attr('required');
if (typeof attr == 'undefined' && attr !== false) alert('No required attribute');
else alert('Textarea has required attribute');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="control-group hidden-phone">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<textarea class="cleditor" id="textarea2" rows="3" name="isi_visimisi" >Default text in field</textarea>
</div>
</div>
<button>TEST: Does textarea have required attribute?</button>
If it has any content, including whitespace, it will pass the check. Is $data['isi_visimisi'] a string with any length at all?
Also, you must have a submit button for this to work. If you're submitting the form via JavaScript or some other means, the HTML5 required keyword won't work.
It seems you are using CLEditor. The editor set the initial textarea as hidden and provides its own html to build the text editor. When you submit your form, the alert is attached to your hidden textarea, so you can't see it.
So I have this html code
<div id="wrap">
<div id="header">
</div>
<div id="content">
<form method="POST" action="code.php">
Name:
<input type="text" name="name" size="50">
<input type=submit value="Get Code">
</form>
</div>
<div id="footer">
</div>
Is it possible to load the code.php after the user clicks submit into the #content div?
Essentially, what I want is when the user clicks the submit button, the code.php after processing is loaded onto the same #content div.
So let say in my code.php, after processing the inputted data, I come up with this lilne of code,
<?php
some processing code here;
$name = 'john';
echo $name;
?>
So then after hitting submit, user would see
<div id="content">
john
</div>
Hope I didn't complicate my question by repeating myself, please let me know if this is possible with javascript, php or whatever.
Thanks for the read!
#JohnP yes, $.load is a good solution. However, you'll need to send the form data in the request:
UPDATED [3] for sending a POST with multiple fields and checkboxes:
$('form').submit(function(){
// create an object to send as a post
var form = this,
fields = form.elements,
el,
post = {};
for (var i = fields.length; i--; ) {
el = fields[i];
if (el.name) {
switch (el.type) {
case 'checkbox':
case 'radio':
post[el.name] = (el.checked) ? el.value : '';
break;
default:
post[el.name] = el.value;
}
}
}
// send the form data in the load request...
$('#content').load(this.action, post);
return false;
});
This will send the data as a POST.
Since you've tagged jQuery, I'll use a jQuery example
$(document).ready(function(){
$('form').submit(function(){
$('#content').load('code.php');
return false;
})
})
This makes a couple of assumptions here
This assumes that code.php is in the same path that you are in now.
There is only one form in the page.
As #johnhunter points out, this example obviously won't work with post. You can send the post data along with the method. See here for usage : http://api.jquery.com/load
EDIT
Here's a fiddle example : http://jsfiddle.net/jomanlk/J4Txg/
It replaces the form area with the content from jsfiddle/net/echo/html (which is an empty string).
NOTE 2 Make sure to include the code in $(document).ready() or include it at the bottom of the page. It goes without saying you need jQuery in your page to run this.
You might want to check out jquery form plugin http://jquery.malsup.com/form/#
in simple way use
<div id="content">
if(isset($_POST['submit'] && !empty($_POST) )
{
// do your all post process
$name ='John';
echo $name;
}
else {
<form method="POST" action="$_SERVER['PHP_SELF']">
<label for="uname" >Name:</label><input type="text" name="uname" id="uname" size="50">
<input type=submit value="Get Code" name="submit">
</form>
}
</div>