I have a multiline text area which accepts 42 characters and if the user exceeds the limit and clicks on submit button, he will get a alert message like 'exceeded the limit so remove '***' characters. Below is the code which performs the same.
<head runat="server">
<title></title>
<script type="text/javascript">
function ok(maxchars) {
if (document.ourform.box.value.length > maxchars) {
alert('Too much data in the text box! Please remove ' +
(document.ourform.box.value.length - maxchars) + ' characters');
return false;
}
else
return true;
}
</script>
</head>
<body>
<div>
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
method="post" name="ourform" onsubmit="return ok(42)">
Please enter data, at most 42 characters:<br/>
<textarea name="box" rows="5" cols="30">
</textarea>
<br/><input type="submit"/>
</form>
</div>
</body>
</html>
But my problem is I should get the same alert message once I de-focus the control from the text box area instead of clicking on submit button.
So Please help me for achieving it...!!
Thanks in advance...
Additional requirement: After getting the alert message and clicking on ok button,the extra characters should be deleted. Please help..
Here is a simple solution using jQuery
$(function(){
$("#box").keypress(function(){
if($(this).val().trim().length > $(this).data("limit") - 1) {
alert("You have reached the limit");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="ourform">
Please enter data, at most 42 characters:<br/>
<textarea name="box" rows="5" cols="30" data-limit="10" id="box"></textarea>
<br/><input type="submit"/>
</form>
Please try this.
You'll need to use the onchange or keyup event to bind this to the textarea.
First add an ID to your textarea. Then bind the event listener to it, and call your function.
document.getElementById("textAreaBox").addEventListener("keyup", ok(42));
Alernatively, you can use the onpropertychange event in HTML.
<textarea name="box" rows="5" cols="30" onpropertychange="ok(42)">
</textarea>
add this onblur="ok(42)" or onkeyup="ok(42)" inside ur textarea
<textarea name="box" rows="5" cols="30" onblur="ok(42)">
</textarea>
OR
<textarea name="box" rows="5" cols="30" onkeyup="ok(42)">
</textarea>
You can give an id/class for the textarea and go using simple
JqueryEvents - Onblur or FocusOut event to trigger your function.
--> https://api.jquery.com/blur/
Javascript blur event
--> http://www.w3schools.com/jsref/event_onblur.asp
You can give 'maxlength' attribute to your text area. Here is example.
It works.
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea.pl"
method="post" name="ourform" onsubmit="return ok(42)">
Please enter data, at most 42 characters:<br />
<textarea name="box" rows="5" cols="30" maxlength="42">
</textarea>
<br />
<input type="submit" />
</form>
Related
My webpage has a simple form with an input box and the submit button, and an empty paragraph:
<form action="" class="form" method="post" id="f">
<input type="text" name="text" id="txt" value="">
<input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>
I'm trying to write a script that once the submit button is submitted writes the submitted text into the paragraph:
let f = document.getElementById('f')
f.addEventListener('submit', function () {
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
})
And it kinda works, meaning that it does shows the text in the paragraph but only for a split second, then it disappears. What am I missing?
You need to preventDefault
let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
e.preventDefault(); // prevent the default behavior of the submit event
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text
});
when I tried to stop people from copying my image i used a Event listener
all you need to do is change contextmenu to p1 and then change #txt to txt
you need to change input type submit to button. this will not reload page.
function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
<input type="text" name="text" id="txt" value="">
<input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>
I have this TextArea
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
and this hidden text box
<input type="hidden" name="Textarea" id="txtArea" value="" required>
and this is my JavaScript
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
}
As you can see here I used alert just to make sure that the onkeyup is working by getting the value of textarea and as of now it successfully gets the value of textarea and showing to the alert.
But when I tried to set the value of textarea to hidden textbox the script of onkeyup doesn't work anymore
This is the jQuery I used when I'm trying to set a text to a textbox
$("#txtArea").val(txtAreaValue);
You can use this context and remove the invoke ().
<textarea class="textarea" onkeyup="deltxtArea" id="txtID1" placeholder="Remarks"></textarea>
And into your script file, just do:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
Or a better way, do your keyup event into the script file, and remove the inline attribute of your html:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
$(function() {
$("#txtID1").keyup(deltxtArea)
})
function deltxtArea(){
var txtAreaValue = document.getElementById('txtID1').value;
document.getElementById('txtArea').value = txtAreaValue;
}
<textarea class="textarea" onkeyup="deltxtArea()" id="txtID1" placeholder="Remarks"></textarea>
<input type="hidden" name="Textarea" id="txtArea" value="" required>
All this looks fine but i think difficult to find the issue
I have tried as per your requirement all this looks fine , so kindly tried this code , you can avoid to include jquery if you already included
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
<input type="text" name="Textarea" id="txtArea" value="" required>
<script type="text/javascript">
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
$("#txtArea").val(txtAreaValue);
}
</script>
</body>
</html>
if it works for you after that you can change input type from text to hidden
I have a form on my page and want to be able to submit the text box value (partnumber) as a query string in a hyperlink without submitting the form itself ? Is this possible ?
I have done some research and have tried document.getElementById("partnumber").value but am getting the error "Object Required". Code Below.
<form id="form3" name="form3" method="post" action="formpost?rmaid=<%=rmaid%>">
<input name="partnumber" type="text" id="partnumber" size="10" />
<span class="style11">Suggest Link</span>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
I'll set the new page to open in a pop up window and list a series of values in the database but then I need the value selected to come back into the invoice field on the original page. I believe this can be done with JavaScript but I am new to this, can anyone help ?
For those Looking to pass values back I have found this snippet that works...
Put this in the child window
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('Invoice').value="Value changed..";
window.close();
}
</script>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.
You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm
Edit: Added a Stack Snippet illustrating the solution.
function SetSuggestLink() {
var suggest = document.getElementById('partnumber').value;
document.getElementById('innerSpan').innerHTML =
"Suggest Link: suggest.asp?partnumber=" + suggest;
document.getElementById('QueryLink').href =
"suggest.asp?partnumber=" + suggest;
}
.style11 {
color:black;
}
.style2 {
text-decoration:none;
}
<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">
<input name="partnumber" type="text" id="partnumber" size="10"
OnChange="SetSuggestLink()" /> </br>
<a id="QueryLink" class="style2" href="#">
<span id="innerSpan" class="style11">Suggest Link</span>
</a></br>
<input name="invoice" type="text" id="invoice" size="15" />
</form>
can someone please help because i have tried various javascripts to get my form submit button to stay disabled until a user enters text into the textarea but nothings working.
i want the submit button to be disabled until a user enters some text. any suggestions please?
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="checkWordCount();" data-required="true"><?php echo htmlspecialchars($profile['bio']); ?></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
<script type="text/javascript">
function disable()
{
if(document.textarea.bio.value=="")
{
document.textarea.submit.disabled=true;
}
else
{
document.textarea.submit.disabled=false;
}
}
</script>
There are many things wrong with your code:
Try not to use inline javascript
your textarea onKeyUp calls a function that does not exist
you are trying to set the disabled state of the wrong element (you actually have invalid javascript)
you have some invalid html too
This is what you want:
HTML
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" name="bio" data-id="bio" data-required="true" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales.">
<?php echo htmlspecialchars($profile['bio']); ?>
</textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit" />
</form>
JAVASCRIPT
window.onload = function () {
document.getElementById("bio").onkeyup = checkWordCount;
checkWordCount();
};
function checkWordCount() {
if (document.getElementById("bio").value == "") {
document.getElementById("submit").disabled = true;
} else {
document.getElementById("submit").disabled = false;
}
}
Here is a working example
You are trying to disable the textarea instead of the submit button. Your code isn't valid JavaScript.
Keep the submit button disabled initially and enable it only when the textarea has something in it. Also, since you're using a placeholder for the textarea, your textarea would never be empty, so a check for
document.getElementById("bio").value = ""
would always return false unless the user changes it.
try this
<body onload="disable()">
<form action="includes/welcomebio.php" method="post" id="form12" class="form12">
<textarea id="bio" textarea name="bio" data-id="bio" placeholder="Hi, my name is Peter. I'm 22 years old from North Wales." onKeyUp="disable();checkWordCount();" data-required="true"></textarea>
<input type="submit" class="welcome-submit" name="submit" value="Next ->" id="submit"/>
</form>
</body>
<script type="text/javascript">
function disable()
{
if(document.getElementById("bio").value=="")
{
document.getElementById("submit").disabled=true;
}
else
{
document.getElementById("submit").disabled=false;
}
}
</script>
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.