How to get a script to activate on modal load? - javascript

I have a modal that is prepopulated with some text for the user to edit, with a limit of 500 characters. I wanted to include a 'remaining character' notification. I have it working for the onKeyUp, but I want it to initialize with how many characters are left (right now the span is empty until the user hits a key). Neither of the onLoad functions are working (maybe onLoad is wrong? Fairly new here). Any help is appreciated!
<div id="tooltip-modal" style="display:none">
<script language = "Javascript">
maxLength = 500;
var container = $("#tooltip_body");
function taCount(tooltipBody,Cnt) {
objCnt = createObject(Cnt);
objVal = tooltipBody.value;
if (objCnt) {
objCnt.innerText=maxLength-objVal.length;
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval("document." + objId);
else if (document.all) return eval("document.all." + objId);
else return eval("document." + objId);
}
onLoad="alert('Loaded')";
onLoad="return taCount(container,'myCounter')";
</script>
<body>
<form method="post" action="#" id="update-tooltip">
<h2>Edit the description of this item:</h2>
<input type="hidden" name="tooltip_id" id="tooltip_id">
<textarea onKeyUp="return taCount(this,'myCounter')" name="tooltip_body" id="tooltip_body" class="input" rows=7 wrap="physical" cols=40></textarea>
<br><br>
You have <strong><span id="myCounter" ></span></strong> characters remaining for your description...</h3><br>
<button type="submit" value="Update" id="update" >Update</button>
</form>
</body>
</div>

Pretty sure that onload has to be tied to an element on the page, such as the body tag.
http://www.w3schools.com/jsref/event_onload.asp

Related

Keeping value of search box Javascript/HTML

I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.
You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.
I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.

iFrame break on enter key

I have an iFrame to create a message. However, when I press enter while typing in the iFrame, it creates another div, however, I want it to create a <br/>. I tried using the execCommand insertBrOnReturn, but I did not get it to work. Any idea's? Thanks in advance!
The JSFiddle in stackoverflow doesn't really work, but I have an existing one at "Craz1k0ek/d869w67b/" after the default jsfiddle.net
function iFrameOn() {
richTextField.document.designMode = 'On';
richTextField.document.body.style.fontFamily = 'Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif';
}
function iBold() {
richTextField.document.execCommand('bold', false, null);
}
function iUnderline() {
richTextField.document.execCommand('underline', false, null);
}
function iItalic() {
richTextField.document.execCommand('italic', false, null);
}
function submit_form() {
var theForm = document.getElementById("myForm");
theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
<body onload="iFrameOn()">
<form action="" name="myForm" id="myForm" method="post">
<p>
Title
<input name="title" id="title" type="text" size="80" maxlength="80">
</p>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
</div>
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000 1px solid; width:700px; height:300px;"></iframe>
<input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();">
</form>
</body>
I changed the submit_form function as follows:
function submit_form() {
remove_divs();
var theForm = document.getElementById("myForm");
theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
And then I added the remove_divs function which is as follows:
function remove_divs() {
var frameHTML = window.frames['richTextField'].document.body.innerHTML;
frameHTML = frameHTML
.replace(/<div><br><\/div>/g, '')
.replace(/<div>/g, '<p>')
.replace(/<\/div>/g, '</p>');
$(window.frames['richTextField'].document.body).html(frameHTML);
}
It replaces all the <div><br></div> elements with nothing and then it replaces all the <div> elements with <p> and all the </div> elements with </p>. This formats the text in the field exactly as I want.
Then I had an issue with setting the DesignMode = 'On'; I solved that by placing extra code in the javascript file as follows:
window.onload = function() {
window.frames['richTextField'].document.designMode = "On";
}
I also got some minor warnings on how I gained access to the richTextField, so I replaced all the richTextField.document.execCommand elements for window.frames['richTextField'].document.execCommand.
I hope this helps!

Trying to limit the max characters in a textarea

I'm trying to limit the max characters in a textarea, using JS, i leave here my HTML & JS code:
HTML-->
<form id="formu" action="ok.html" method="post" enctype="multipart/form-data">
<p>
<label for="observaciones">Observaciones:</label>
<textarea id="observaciones" cols="30" rows="5"></textarea>
</p>
</form>
JS-->
window.onload=function(){
document.getElementById("observaciones").addEventListener('keypress',function(){maxlong(document.getElementById("observaciones")),150},false);
}
function maxlong(obj,maxlength){
return(obj.value.length<=maxlength);
}
your event handler doesn't actually do anything. You need to prevent the default beahviour of the event (with the preventDefault method on the event object).
You can do this by html :
<textarea maxlength="50"> </textarea>
try this:
function limiter() {
var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 160;
var checkLength = function () {
if (area.value.length <= maxLength) {
message.innerHTML = (maxLength - area.value.length) + " characters remainging";
}
}
setInterval(checkLength, 300);
}
and this is the textarea
<textarea style="resize:none; margin-bottom: 0px;" id="content_txt"
name="TextArea1" runat="server"
maxlength="160" onkeyup="return limiter();" ></textarea>
<script>
function maxLength(obj){
if(obj.value.length <=150){
return true;
}else{
return false;
}
}
</script>
<textarea onkeypress="return maxLength(this);"></textarea>
This is basic to set maxlength:
<textarea maxlength="50">
Enter text here...
</textarea>
Solved doing this:
function maxlong(elEvento){
var evento=elEvento||window.event;
var obser=document.getElementById("observaciones").value;
if(obser.length>=15){
evento.preventDefault();
}
}
And also i had an extra "{" that made the program not working well...

javascript validation code is not working

This seems repeated question but please take a look and try to answer.
My javascript validation function is not working.
Javascript code is given below:
<script type="text/javascript">
var ck_name = /^[A-Za-z ]{3,20}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}
(?:\. [a-z]{2})?)$/i
var ck_mobile = /^[0-9]{10}$/;
var ck_address = /^[A-Za-z0-9-,]{40,100}$/;
function validate(myform){
var name = myform.fullname.value;
var email = myform.email.value;
var mobile = myform.mobile.value;
var address = myform.address.value;
var errors = [];
if (!ck_name.test(name)) {
errors[errors.length] = "Enter valid Name .";
}
if (!ck_email.test(email)) {
errors[errors.length] = "You must enter a valid email address.";
}
if (!ck_username.test(mobile)) {
errors[errors.length] = "Enter valid 10 digit mobile number .";
}
if (!ck_password.test(address)) {
errors[errors.length] = "You must enter a valid address min 40 char.";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
function reportErrors(errors){
var msg = "Please Enter Valid Data...\n";
for (var i = 0; i<errors.length; i++) {
var numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
I have two button 1)submit and 2)cancel
I want when i click submit button,validate function will call and when i click cancel it goes to back to the page.
HTML form
<form action="addorder.php" method="post" enctype="multipart/form-data" name="myform" >
<!-- Form -->
<div class="form">
<?php
if(isset($_SESSION['msg']))
{
?>
<div class="msg msg-ok"><strong><?php echo $_SESSION['msg'];?></strong></div>
<?php } ?>
<label>Full name<span>(Required Field)</span></label>
<input type="text" name="fullname"class="field size1"/>
</p>
<p>
<label>Email<span> (Required Field)</span>
<input type="text" class="field size1" name="email"/>
</label>
</p>
<p>
<label>Mobile<span>(Required Field)</span>
<input type="text" class="field size1" name="mobile"/>
</label>
</p>
<p>
<label>Address<span>(Required Field)</span>
<textarea class="field size1" name="address" rows="3" cols="10"> </textarea>
</label>
</p>
</div>
<!-- End Form -->
<!-- Form Buttons -->
<div class="buttons" >
<input type="submit" name="submit" class="button" value="Submit" onclick="return validate(myform)" />
<input type="submit" name="cancel" class="button" value="Cancel" />
</div>
<!-- End Form Buttons -->
</form>
I tried your code in a jsfiddle, and it wasn't calling validate. Removing most of your javascript and leaving just a basic validate did call validate. So I think your javascript has syntax errors and the form is ignoring it before submitting. So:
Change the cancel button to type=button, so that it doesn't default to submitting the form when you mean to cancel the submission.
Open firebug, or at the very least the javascript console (in some browsers called the 'error console') and look at the errors you get.
Learning how to debug the javascript will help this time and in the future. Javascript can be completely discarded by the browser if there are syntax errors, in which case your form will just submit as though there was no javascript at all.
Don't see that as a suggestion to only submit via javascript, however, as that would prevent users with javascript switched off from being able to use your form. But that cancel-button-that-submits has to go.

Stopping action if requirements are not met

I want to check the validation of two text boxs if either one is empty. It showed show an error as an innerHTML and if they are both filled in. It will then continue to action. Here is my code:
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}
this does set the innerHTML but still continues with the action. How can I stop it from continuing?
Thank you!
You should check the value of text box,
Change the code to
function go()
{
var toCheck = document.getElementById('myAnchor').value;
if (toCheck != '') {
return true;
}
else
{
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}
add the onsubmit on the form:
<form onsubmit="return true;">
...
</form>
if the return is false it will stop from submitting an opposite scenario if it's true. you could also call your functions on that attribute and do the same thing then if it doesn't fit the condition it will stop from submitting your form and do the other process you desire to happen.
Textfields use the value attribute.
document.getElementById('myAnchor').value = 'Fred Flinstone';
An empty textfield would have a value of "".
function go()
{
var toCheck = document.getElementById('myAnchor');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
Here's a working example.
<!DOCTYPE html>
<html>
<body>
<form name="form" action="data.php">
<label style="float:left">
<font face="Comic Sans MS">* username &nbsp
</label></font>
<input type="text" id='textfield' name="name" size="40" style="float: left;">
<label id='myAnchor' style="display: inline; padding-left: 20px;"></label> <br/> <br/>
<label style="float:left"><font face="Comic Sans MS">* password &nbsp</label></font>
<input type="text" name="pwd" size="40" style="float: left;">
<label id="myAnchor2" style="display: inline; padding-left: 20px;">
</label> <br/> </p> <input type="button" value="LogIn" onClick="return go();"> </form>
</body>
<script>
function go()
{
var toCheck = document.getElementById('textfield');
if (toCheck.value != "") {
return true;
}
else
{
toCheck.value = 'Fred Flinstone';
}
}
</script>
</html>
In your question you said that
I want to check the validation of two text boxs
In that case you should be checking the value of textboxes, not the myAnchor.
I would change your html code like this:
<input type="text" name="name" id="name" size="40" style="float: left;">
<input type="text" name="pwd" id="pwd" size="40" style="float: left;">
<input type="submit" value="LogIn" onSubmit="go();">
adding id to the input boxes
then change the onClick event to onSubmit. that way you can perform javascript validation in the function, then submit the form if all goes well, otherwise display the error.
Then your script will be like...
function go() {
var name = document.getElementById('name').value,
pwd = document.getElementById('pwd').value;
if (name != '' && pwd != '') {
document.forms["form"].submit();
}
else {
document.getElementById('myAnchor').innerHTML = 'Fred Flinstone';
}
}

Categories

Resources