I have created a small text redactor, but, the problem is that when i'm clicking post button to post in mysql, all my text redactions( etc.) disappear, i mean html code! Here is my code:
<script type="text/javascript">
function formatText(el,tag){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){//IE
document.selection.createRange().text=newText;
}
else{//Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
</script>
<?php
//$maxlength = '9';
echo (
'<div class="enterNews">
<img style="float:left; width:1px; vertical-align:middle" src="icons/whiteHack.png">
<img style="float: left; padding:12px; width:20px; vertical-align:middle" src="icons/pencil.png">
<form enctype="multipart/form-data" name="changer" method="post" action="index.php">
<input class="enterNewsText" name="subject" id="subject" placeholder="'.$entersmallnews_lang.'"
type="text" size="65" maxlength="149" onFocus="this.value='.$blank.'" />
<img style="float: right; padding:10px; width:20px; vertical-align:middle" src="icons/pic.png">
<div class="biggerNew">'); ?>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" class="enterNewsTextBig" name="news" value="Enter big news" id="markItUp" >Enter Big news here...</textarea><br>
<input type="button" value="Bold" onclick="formatText (news,'b');" />
<input type="button" value="Italic" onclick="formatText (news,'i');" />
<input type="button" value="Underline" onclick="formatText (news,'u');" />
<?php
echo('
<input class="video" name="video" id="video" placeholder="Youtube video link"
type="text" size="65" maxlength="149" />');
<div class="postcontainer"><input class="postFontan" type="Submit" name="submit" id="submit" value="'.$post_lang.'" /></div>
</div></div></form>
Your problem seems to be that tag is undefined this means that it will throw an error. If you are in chrome click inspect element console log then you will probably see a ton of errors
Related
I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.
My suggestion would be to use the break function. That will exit the current loop.
I have a problem, I created a captcha and I implemented a button to change the current one and it works very well in Google Chrome but it doesn't work in Firefox (V. 57.0 32 bit)
Here's the code:
<head>
<title>Captcha</title>
</head>
<style>
//Style
</style>
<script>
function refresh(){
document.getElementById("risp").value = "";
document.CaptchaImg.src="captcha.php";
}
</script>
<body style="background-image: url('pattern_17.png');">
<center>
<div id="div_captcha">
<h1 style="Font-Family:Impact">CAPTCHA</h1>
<h3 style="Font-Family:Impact">Sei un robot?</h3><br />
<form method="post" id="form" name="form">
<div style="background-image: url('pattern_17.png');">
<div style="float:left;padding-left:10%;">
<img src="captcha.php" id="CaptchaImg" name="CaptchaImg"/><br /><br />
</div>
<div style="float:right;padding-right:10%;">
<input class="myButton" type="button" value="Nuovo captcha" onclick="refresh();" /><br /><br />
<input class="myButton" type="reset" value="Reset"/><br /><br /><br />
<input type="text" name="risp" id="risp" value="" required maxlength="5" />
<input class="myButton" type="submit" value="invia" name="invia" style="width:80px"/>
</div>
</div>
</form>
</div>
</center>
</body>
Thanks in advance!
You don't need a name for the img, just the id.
The name attribute has been deprecated for the img element !
Try
document.getElementById("risp").value = "";
document.getElementById("CaptchaImg").src = "captcha.php";
I have an HTML div output using PHP which when "Submit" is clicked, it should submit the form and fire a JS function. When submitted, the JS console in Chrome gives me the following error:
Uncaught TypeError: Cannot read property 'element' of undefined
My HTML (wrapped in a PHP heredoc)
<div id="tab5" class="tab">
<div id="reopen_case_form">
This Case has been previously closed by Workbooks Support. You can re-open this ticket at any time by providing a reason why you'd like to do so and clicking "Re-open Case".
<table class="update_case">
<tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
<tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<input type="file" class="file" name="file1" id="file1" style="display: inline">
<input type="file" class="file" name="file2" id="file2" style="display: inline">
<input type="file" class="file" name="file3" id="file3" style="display: inline">
</td></tr>
</table>
<p><button type="submit" onclick="on_reopen_case()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="reopen_case" id="reopen_case" name="reopen_case" class="quietbutton">Re-open Case</button></p>
</div>
</div>
My Javascript:
<script type="text/javascript">
function on_reopen_case() {
if (!$("#reopen_case_form").valid()){ return false; }
$('#reopen_case').attr('disabled', 'disabled');
$('#reopen_case').text('Re-opening case. Please wait...');
document.body.style.cursor = "progress";
$("#function").val("reopen_case");
fade();
$("#reopen_case_form").submit();
};
</script>
The form appears to submit but doesn't change the the button text to "Re-opening case" and it doesn't set #function to the specified value either.
Annoyingly I've used similar else where and this works:
<div id="tab3" class="tab">
<div id="update_case_form">
Provide a summary and detailed description of your update below, including screenshots where applicable. Click "Update Case" to submit your update to the Workbooks Support team.
<table class="update_case">
<tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
<tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<input type="file" class="file" name="file1" id="file1" style="display: inline">
<input type="file" class="file" name="file2" id="file2" style="display: inline">
<input type="file" class="file" name="file3" id="file3" style="display: inline">
</td></tr>
</table>
<p><button type="submit" onclick="on_create_activity()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="create_activity" id="create_activity" name="create_activity" class="quietbutton">Update Case</button></p>
</div>
</div>
Javascript
<script type="text/javascript">
function on_create_activity() {
if (!$("#update_case_form").valid()){ return false; }
$('#create_activity').attr('disabled', 'disabled');
$('#create_activity').text('Updating case. Please wait...');
document.body.style.cursor = "progress";
$("#function").val("create_activity");
fade();
$("#update_case_form").submit();
};
</script>
I can't figure this out for the life of me where I'm going wrong! Help....
I think I may have figured this out... I was using nested forms which is apparently not allowed... Cannot Read Property 'Elements' of Undefined - in JS Console
Thanks for the suggestions guys :)
Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>
Hello I have a contact us form using fancybox, and I want to reset/clear the form input values when fancybox closes (either when user clicks outside the popup or using the "close" popup button)
the element which holds the fancybox content is 'inline' so my guess was:
...
$("#fancybox-overlay").fancybox({
'afterClosed': function() {
$('#inline').hide(250, function() {
$('#name input').val('');
$('#phone input').val('');
$('#email input').val('');
$('#subject input').val('');
$('#msgcontent textarea').val('');
$('#security_code input').val('');
$('#name input').removeClass('error');
$('#phone input').removeClass('error');
$('#email input').removeClass('error');
$('#subject input').removeClass('error');
$('#msgcontent textarea').removeClass('error');
$('#security_code input').removeClass('error');
$('#security_code_error').html('');
});
}
});
But the result is as below:
before :
and after:
Any help to make the form values reset/cleared during a "close" action from clicking outside the popup, will be very much appreciated. Thanks.
UPDATE:
The html requested by #Spokey is:
<div id="inline" style="z-index:999999;">
<h2 class="popupheader">...Contact Us: Send us a Message</h2>
<div style="margin:2% 8%;background:#fff;border-radius:5px;width:auto;box-shadow: 3px 3px 10px #bbb;">
<p style="display:inline-block;padding:10px;">
...
</p>
<p style="display:inline-block;padding:10px;float:right;">
...
</p>
</div>
<form id="contact" name="contact" action="#" method="post">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" class="txt" style="margin-left: 3px">
<br>
<label for="phone">Your Phone No.</label>
<input type="text" id="phone" name="phone" class="txt" >
<br>
<label for="email">Your E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" class="txt" size="45">
<br>
<label for="msgcontent">Enter a Message</label>
<textarea id="msgcontent" name="msgcontent" class="txtarea" style="margin-left: 3px"></textarea>
<br>
<label for="security_code" style="width:auto;">Verify you are human</label>
<img border="0" id="captcha" src="../../image.php" alt=""> <a href="JavaScript: new_captcha();">
<img border="0" alt="" src="../../images/refresh.png" align="bottom"></a>
<input name="security_code" id="security_code" class="txt" style="width:150px;vertical-align: top;margin: 0px;" size="20" type="text" >
<span id="security_code_error" name="security_code_error" style="background:#fefefe;color:red;"></span><? /*<div class="field_error error_pos"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div> */ ?>
<br />
<hr style="color:#f2f2f2;border:1px solid #f2f2f2;width:auto;">
<button id="send" name="send">Send Message</button>
</form>
</div>
And you can do it a lot more easier and cleaner. E.g. if you want to clear all input fields just do it that way without repetitive and spaghetti code:
document.getElementById("yourFormId").reset();
You don't need to hide #inline, as the plugin will hide it itself
$("#fancybox-overlay").fancybox({
'afterClose': function() {
$('#inline input, #inline textarea').val('');
$('#inline').children().removeClass('error');
$('#security_code_error').empty();
}
});
NOTE changed 'afterClosed' for fancybox2
to 'afterClose' (typo error)