Afternoon all,
In need of some technical advice from the masters... I know the function to remove the default message on click from a form, but the problem that's occuring is that after a user has initially clicked in the message area (to remove the default), if they then click in the message area again, it removes what they've written!! I guess an example would be if they noticed a spelling mistake or need to change part of their message.
There must be a way to solve this?
The code for the text area is:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="this.value=''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
What you probably want is this, right?
When the page first loads and there's no user-supplied value, the "Please use" message is shown.
When the textarea gets focus, the "Please use" message should go away. (Perhaps you want to wait until something is typed; whatever.)
When the textarea loses focus, if the user has left behind an empty <textarea> then the "Please use" message should come back.
When the form is submitted, something has to check to see if the <textarea> is still empty (showing the "Please use" message) and if so disable it or clear the value.
What I'd do is have the "focus" and "blur" handlers maintain a state indicator to explicitly track the state of the element, instead of relying on doing a text comparison to your "Please use" message. Exactly how you do that would depend on the way you're writing event handlers in general, but it might look like this:
function setupTextareaHandlers() {
var txta = document.getElementById("yourTextArea");
var empty = !txta.value;
txta.onfocus = function() {
if (empty) txta.value = '';
};
txta.onblur = function() {
if (!txta.value) {
empty = true;
txta.value = 'Please use ... ';
}
};
}
You would probably also set up your submit handler in there too.
After the initial onclick you will need to remove the onclick attribute from the textarea using something like this:
document.getElementById('message').onclick = null;
You could change the onclick to call a function that does the this.value = '' and then removes the onclick.
Edit:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="removeDefaultText(this)">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
<script type="text/javascript">
function removeDefaultText(el){
el.value='';
el.onclick=null;
}
</script>
a simple working script
<textarea name="message" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
Put anything for default value here
</textarea>
just lernaed a few minutes ago X)
Live example: http://jsfiddle.net/SRYLg/
Here is the jsfiddle
HTML:
<textarea name="message" id="message" rows="9" cols="55" tabindex="9">default message</textarea>
JavaScript place within the <head> tag:
<script type="text/javascript">
var defaultMsg = document.getElementById("message").value;
function init() {
var mytextarea = document.getElementById('message');
mytextarea.onblur = function() {
if (this.value == '') this.value = defaultMsg;
}
mytextarea.onfocus = function() {
if (this.value == defaultMsg) this.value = '';
}
}
window.onload = init;
</script>
try this
<textarea name="message" id="message" rows="9" cols="55" tabindex="9" onclick="javascript:if(this.value='default.value') this.value =''">
<?php if(isset($error)) {echo $message;} else {echo "Please use this area for any other information about your enquiry";}?>
</textarea>
Related
I'm having trouble implementing a js function. My skills are limmited...
I don't have access to field ID's because the fields are widgets and no ID's are listed so I am forced to use field names.
There is a default value for an email address field allowing customers to send in anonymous emails through the webbform. The thing is, I would like to have a text shown when this default email address is not changed (this as there would be no way to answer the email)
<rn:widget path="input/FormInput" name="Contact.Emails.PRIMARY.Address" required="false" label_input="E-postadress" default_value="anonymous#gmail.com" />
As the above makes the email by default anonymous#gmail.com I would need to call a function when an event happens. I thought I could just check for a change on the subject field and show a message when the email address is still equal to anonymous#gmail.com
I thought the following code would solve my problem but it doesn't seem to register the change event. Any advice on what I did wrong?
<rn:widget path="input/FormInput" name="Contact.Emails.PRIMARY.Address" required="false" label_input="E-postadress" default_value="anonymous#gmail.com" />
<p id="Message"></p>
<rn:widget path="input/FormInput" name="Incident.Subject" required="true" label_input="Subject" />
<script>
document.getElementsByTagName('Incident.Subject')[0].onchange = function() {
var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;
if (x == 'anonymous#gmail.com') {
document.getElementById("Message").innerHTML = 'Some text...';
}
}
</script>
Edit: I had a bright idea this morning, I thought let's check the source code when the html is rendered and I found the ID's there :-)
So I guess this means there are alternative solutions now, using ID's.
<input type="email" id="rn_TextInput_4_Contact.Emails.PRIMARY.Address" name="Contact.Emails.PRIMARY.Address" class="rn_Email" maxlength='80' value='anonymous#x.com' />
<input type="text" id="rn_TextInput_11_Incident.Subject" name="Incident.Subject" class="rn_Text" maxlength='240' required />
I have made a demo here
https://jsfiddle.net/aquadk/etmsqzLq/15/
<script>
document.querySelector('input[name="Incident.Subject"]').onchange = function() {
var x = document.querySelector('input[name="Contact.Emails.PRIMARY.Address"]').value;
if (x == 'anonymous#gmail.com') {
document.getElementById("Message").innerHTML = 'Some text...';
}
}
</script>
I managed to get it right :-)
(took me a few hours but it feels good to have it acomplished)
I'm posting the answer below for those with similar challenges :-)
Email: <input name="Contact.Emails.PRIMARY.Address" type="text" value="info#company.com"><br>
<font color="red"><b><p id="Message"></p></b></font>
Subject: <input id="rn_TextInput_11_Incident.Subject" name="subject" type="text" value=""><br>
<br>
<script>
document.getElementById("rn_TextInput_11_Incident.Subject").onchange = function() {myFunction()};
</script>
<script>
function myFunction() {
var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;
if (x == "info#company.com") {
document.getElementById("Message").innerHTML = "Glöm inte att fylla i din e-postadress om du önskar svar från oss.";
}
}
</script>
Use event listener.
<script>
var tag = document.getElementsByTagName('Incident.Subject')[0];
tag.on('change',function() {
var x = document.getElementsByName("Contact.Emails.PRIMARY.Address")[0].value;
if (x == 'anonymous#gmail.com') {
document.getElementById("Message").innerHTML = 'Some text...';
}
});
</script>
my simple html file code
Site Name: <input id="name" type="text" onkeyup="myFunction1(event,this)">
URL : <input id="url" type="text">
javascript code
function myFunction1(event,t){
var nameval= document.getElementById("name").value;
var urlval= document.getElementById("url").value;
var namelen = nameval.length;
var urllen = urlval.length;
var res = nameval.substring(1, namelen);
if(res.length == urllen){
document.getElementById("url").value = t.value;
}
else{
alert("string lengths are not matching");
}
}
what i want to do when user type Site Name in textbox, same text should reflect to URL textbox if name and url text boxes have same text lenghts . but when i speed type site name, my if condition fail after typing few characters and it goes to else block. i dont know why this happening. can anyone help me to improve this code?
Using the onkeyup event isn't your best option for what you are trying to do. You can use the oninput event instead. Here's the modified HTML:
Site Name: <input id="name" type="text" oninput="myFunction1(event,this)">
URL : <input id="url" type="text">
I am a PHP developer and new to jQuery, I just wrote a few lines of code before and it was all from online sources. Anyways, I have these three inputs in html:
<input type="password" name="old-password" id="old-password">
<input type="password" name="new-password" id="new-password">
<input type="password" name="confirm-new-password" id="confirm-new-password">
<button type="submit" id="save" class="button button-primary">Save Changes</button>
I have a full page of settings and these three fields are for passwords, but I want to make them required only if the user enters any data into any of the inputs.
Example: A user types in old password input, all 3 inputs gets required real-time. Or a user types in confirm new password input, all 3 inputs gets required as well.
Thank you for the help.
Solution: The answers were all great and thank you everyone for the help. Another problem came up, is that if someone tries to backspace and remove the text on the form, it still stays required. I came up with a solution with the help of all the answers.
You have to add a .password class to all the wanted inputs, and then put this in script tags:
$('.password').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#old-password').removeAttr('required', '');
$('#new-password').removeAttr('required', '');
$('#confirm-new-password').removeAttr('required', '');
} else {
$('#old-password').attr('required', '');
$('#new-password').attr('required', '');
$('#confirm-new-password').attr('required', '');
}
});
Use .attr() on the oninput event.
i.e. something like this:
function makeRequired(){
$("#old-password").attr("required","");
$("#new-password").attr("required","");
$("#confirm-new-password").attr("required","");
}
And then bind it to oninput either in your HTML or in JS.
Using your condition
if the user enters any data into any of the inputs.
You could write this event
$("body").on("input", "#confirm-new-password,#new-password,#old-password", function()
{
$("#confirm-new-password").attr('required', 'required');
$("#new-password").attr('required', 'required');
$("#old-password").attr('required', 'required');
});
well, I extremly recommend to use a library like Jquery validate jqueryValidate
But, if you don't want to use, you can try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="password" name="old-password" id="old-password" class="passwordToCheck">
<input type="password" name="new-password" id="new-password" class="passwordToCheck">
<input type="password" name="confirm-new-password" id="confirm-new-password" class="passwordToCheck">
<button type="submit" id="save" class="button button-primary">Save Changes</button>
<script>
$(".passwordToCheck").change(function(){
passInput = $(this);
if(passInput.val().trim() != ""){
passInput.addClass("required");
} else {
passInput.removeClass("required");
}
});
$("#save").click(function(e){
e.preventDefault();
if($(".required").length >0){
alert("fill the fields!");
} else {
alert("OK");
$(this).submit();
}
});
</script>
adding a class to your password-type inputs, and working with required class ( you can change this easily by the required attr if you don't want to work with class required.
here is the fiddle:
jsfiddle
if ($("#old-password").val() != "" ||
$("#new-password").val() != "" ||
$("#confirm-new-password").val() != "") {
$("#old-password").attr("required");
$("#new-password").attr("required");
$("#confirm-new-password").attr("required");
}
I am using wordpress login. I am trying to call a function when the login or password input was empty. I am trying the following code, no matter I enter something into the input or nothing, it always echos alert, why?
I know inside input, value="", means nothing before I enter anything, even if I enter something, on the console, I still see the value="", I am confused now.
var user_login = $('#user_login').val();
var user_pwd = $('#user_pass').val();
$('#wp-submit').click(function() {
if (user_login == '' || user_pwd == ''){
alert('hello');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user_login" type="text" value="" name="log"></input>
<input id="user_pass" type="text" value="" name="pwd"></input>
<input id="wp-submit" type="submit" value="log in"></input>
You're only getting the value on first pageload, not when the button is clicked.
You have to get the value inside the click handler
$('#wp-submit').click(function(){
var user_login = $('#user_login').val();
var user_pwd = $('#user_pass').val();
if (user_login === '' || user_pwd === ''){
alert('hello');
}
});
Please could you advise on the following:
I have a registration form, and within that a text area
<form id="register" name="register" method="post" action="register.php">
<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>
</form>
Using java script i have been trying to create an event handler for the onfocus and onblur events so the default text is removed on focus and restored on blur, as follows:
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
i thought by getting the element by id would work, but it doesn't seem to be. no other duplication of names/id exist.
Any help much appreciated.
Thanks guys
Use the placeholder attribute:
<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>
It's working fine, perhaps the issue is that the placeholder default is "Biographical Information" and the script is testing for "All about you". The change that you made as I was posting this is exactly what you needed.
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
http://jsfiddle.net/YeaTQ/1/
My educated guess is that you've placed your code as is right into a <script> tag inside <head> so when the script runs the form has not loaded yet.
Move your <script> below the form or wrap everything with window.onload:
window.onload = function(){
// Code goes here
};
You have two solutions:
In order to not use the javascript code you wrote, Use the following code:
<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
I think the javascript code is located before control (in the header I guess), Because of this, the onfocus and onblur properties are not initialized. You'll have to put the script at the end of the document (before the tag).
Also, you script is searching for another text ("All about you") and not the current text that's inside ("Biographical information"). Even if you insert the javascript code at the of the document, the code it will work.