Easy way to remove ghost text default value on submit - javascript

The script code below makes ghost text
$('.ghost-text').each(function(){
var d = $(this).val();
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
But on submit it passes that default ghost value. How to delete it on submit?

I believe its better to use a placeholder:
<input type="text" id="myTxt" placeholder="enter something..."/>
Or if you want to stick with your js:
if($.browser.msie){
$('.ghost-text').each(function(){
var d = $(this).attr('placeholder');
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
$('form').submit(function(){
$('.ghost-text').each(function(){
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
});
});
}

Have you tried something like this?
$("#submit").click(function(){
$(".ghost-text").each(function(){
$(this).val('');
}
})

var ghostTexts = $('.ghost-text');
ghostTexts.each(function(){
var $this = $(this),
d = $(this).val();
$this.on({
'focus': function(){
if ($this.val() == d){
$this.val('').removeClass('ghost-text');
}
},
'blur': function() {
if ($this.val() == ''){
$this.val(d).addClass('ghost-text');
}
}
});
});
$('yourForm').on('submit', function() {
ghostTexts.val('');
});

If you call 'ghot text' watermark and able to use HTML5, use placeholder attribute instead:
<input type="text" placeholder="My ghost text" />
If 'ghost text' as nothing to do with watermark and dont want to submit it, you can use this instead:
$('form').submit(function(){
$('.ghost-text',this).each(function(){
$(this).removeAttr('name');
});
});

Related

How to assgin two diffrent url with java script code

Below is a JS code , and i want to redirect user to two different URL - If he enter value in input box 1 so he should redirect to this Default url[https://manage.bagful.com.au/cart.php?a=add&pid=30] else he put more than 1 so this URL [https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]]
Here is the Code:
$(document).ready(function(){
document.getElementById("input").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 1) {
var inputvalue = $("#input").val();
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30");
}
});
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]="+inputvalue);
});
});
Please check and suggest the best idea.
Here you go with jsfiddle https://jsfiddle.net/Lfremy6z/1/
$(document).ready(function()
{
$('#submit').click(function(){
var inputVal = $('input[type="text"]').val();
if( inputVal == 1){
window.location.replace("https://manage.bagful.com.au/cart.php?a=add&pid=30");
}else{
window.location.replace("https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]=" + inputVal);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<button id="submit" type="submit">Submit</button>
In jsfiddle window.location is not present so I added the code here.
If you want to redirect the user after insert value then
Try this
$('#input').on('change',function(e) {
var inputvalue = $("this").val();
if (inputvalue == 1) {
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30");
}else {
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]="+inputvalue);
}
});
I thing it will work for you.
try if else condition to dynamic the url :
document.getElementById("input").addEventListener("keyup", function(event) {
event.preventDefault();
var inputvalue = $("#input").val(),
url = (inputvalue == 1) ? 'https://manage.bagful.com.au/cart.php?a=add&pid=30' : 'https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]';
window.location.replace(url);
});

check all input values of same class is empty jquery

Here I have many input text fields with same class like
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
<input type="text" class="MyClass"></input>
My requirement is to check wheather all input fields of this class is empty or not.
I've tried this
if(!('.MyClass').val()){
alert("empty");
}
But it doesn't make any result. Can anyone help?
You can check
$('button').click(function() {
var $nonempty = $('.MyClass').filter(function() {
return this.value != ''
});
if ($nonempty.length == 0) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>
Or using a flag
$('button').click(function() {
var flag = false;
$('.MyClass').filter(function() {
if (this.value != '') {
flag = true;
//no need to iterate further
return false;
}
});
if (!flag) {
alert('empty')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<input type="text" class="MyClass" />
<button>test</button>
You can compare the length of number of input with number of empty input using :
var allemptylength=$(".MyClass").filter(function() {
return this.value.length !== 0;
})});
if($('.MyClass').length== allemptylength.length){
alert("all empty");
}
Working Demo
To make sure each classes are checked, use
$.each($('.MyClass'),function() {
if ($(this).val().length == 0) {
alert('empty');
}
});
You can check it like this:
var isEmpty = !$('.MyClass').filter(function() {
return this.value.trim();
}).length;
Also remove all </input> tags. input elements are self-closable.
try this
var hasNoValue;
$('.MyClass').each(function(i) {
if ($(this).val() == '') {
hasNoValue = true;
}
});
if (hasNoValue) {
alert('All have no value');
}
try is(':checked')
$('.MyClass').each(function(){
alert($(this).is(':checked');)
});
this will alert only the checked elements.
$('input').each(function(index,value){
if($(this).val()!=''){
$(this).addClass('success');
}else{
$(this).removeClass('someClass');
$(this).addClass('warning');
$(this).css('border', '1px solid red');
//do something else...
}
});
Try this . 100% working..
var emptyLength = $(".MyClass").filter(function() {
return this.value == "";
}).length;
if (emptyLength > 0)
{
alert("Please enter all peramerter's value");
return;
}
Thanks.
Try this. It works for me
var flag = 1;
$(".MyClass").each(function(i){
if ($(this).val() == "")
flag++;
});
if (flag == 1)
alert('all have values');
else
alert('some or all doesn\'t have value');

Required field validation jquery showing error message

I validated some fields in my form.. But i have some issues..If without enter fields it shows error message.. If fill out the field still error message is showing..
How to put that ?
My code
$("#Name").focus();
$("#Name").blur(function(){
var name=$('#Name').val();
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
return true;
}
});
$("#Address").blur(function(){
var address=$('#Address').val();
if(address.length == 0){
$('#Address').after('<div class="red">Address is Required</div>');
return false;
}
else {
return true;
}
});
can anyone help me please?????
You should remove this labels after that user input some data
$("#Name").focus();
$("#Name").blur(function(){
var name=$('#Name').val();
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
$('#Name').next(".red").remove(); // *** this line have been added ***
return true;
}
});
$("#Address").blur(function(){
var address=$('#Address').val();
if(address.length == 0){
$('#Address').after('<div class="red">Address is Required</div>');
return false;
}
else {
$('#Address').next(".red").remove(); // *** this line have been added ***
return true;
}
});
jsfiddle: DEMO
Your code has bug that it places div as many as time as you blur in empty textbox.
This bug is also removed by my code See-:
Working Demo http://jsfiddle.net/XqXNT/
$(document).ready(function () {
$("#Name").focus();
$("#Name").blur(function () {
var name = $('#Name').val();
if (name.length == 0) {
$('#Name').next('div.red').remove();
$('#Name').after('<div class="red">Name is Required</div>');
} else {
$(this).next('div.red').remove();
return true;
}
});
$("#Address").blur(function () {
var address = $('#Address').val();
if (address.length == 0) {
$('#Address').next('div.red').remove();
$('#Address').after('<div class="red">Address is Required</div>');
return false;
} else {
$('#Address').next('div.red').remove();
return true;
}
});
});
It's better if you use required attribute which does the same work with less code and better manner.
HTML5
<input type="text" name="name" required />
<input type="text" name="address" required />
Try this code (I just changed the structure and added return false) :
$("#Name").focus()
$("#Name, #Address").blur(function(){
if($(this).val().length == 0){
$(this).after('<div class="red">This field is required</div>');
} else {
$(this).next('.red').remove()
}
});
But I think the best way is to add the required attribute to your fields like this :
<input type="text" name="name" required />
<input type="text" name="address" required />
Try to remove the added html in else condition.
if(name.length == 0){
$('#Name').after('<div class="red">Name is Required</div>');
}
else {
$('.red').empty(); //here
return true;
}
And the same for $("#Address")

Grabbing text from select tags with jQuery

I'm trying to change the second select statement by what is selected in the first.
This is the code that I have currently, and it's not working:
function getSchedText() {
var schedGrab = $("#schedGrab").text();
if (schedGrab == "English") {
$("#schedPost").load('../start/english.html');
}
else if (schedGrab == "Spanish") {
$("#schedPost").load('../start/spanish.html');
}
else if (schedGrab == "") {
$("#schedPost").load();
}
else {
$("#schedPost").load('../start/testdoc.html');
}
}
This is the according HTML:
<select name="class1" class="login" id="schedGrab" onclick="getSchedText()">php include</select>
<select name="class2" class="login" id="schedPost"></select>
you can do like below
$('#schedGrab').change(function() {
var schedGrab = $(this).find('option:selected').text();
if (schedGrab == "English") {
$("#schedPost").load('../start/english.html');
}
else if (schedGrab == "Spanish") {
$("#schedPost").load('../start/spanish.html');
}
else if (schedGrab == "") {
$("#schedPost").load();
}
else {
$("#schedPost").load('../start/testdoc.html');
}
});
Since you were putting the title using "JQuery"
try with this way
$("#schedGrab").change(function(){
//Embed your ifelse here but strongly suggest to go for switch statement
alert($(this).text());
})
To get the selected option text
var schedGrab = $("#schedGrab option:selected").text();

Using JQuery to get the default value of a textarea, clearing onfocus and reinstating value on empty

I have some JQuery that isn't working and I need a little help. I a few forms on my website, and they all have a textarea with the class ".form-textarea". What I'm trying to do is use JQuery to get the default value of the textarea, clear the value on focus and reinstate the original value if the the textarea is empty. I realise that an ID would probably be better but I need a generic function to affect all of the textareas with this particular class.
$(document).ready(function()
{
var def = $(".form-textarea")
$(".form-textarea").focus(function(srcc)
{
if ($(this).val() == def)
{
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".form-textarea").blur(function()
{
if ($(this).val() == "")
{
$(this).addClass("defaultTextActive");
$(this).val(def);
}
});
$(".defaultText").blur();
});
This is an old method I used for the exact same purpose. I believe this is what you're looking for (uses Textareas) : Live demo
This uses the jQuery data API. I've also added an extra class so you can markup your text nicely (disabled_text). This is a general purpose method so all you need to do is add the suggest class to your textarea/input and the script will do the rest
<textarea class='suggest'>Some default value</textarea>
<textarea class='suggest'>Some default value2</textarea>
<textarea class='suggest'>Some default value3</textarea>
<input type='text' value ='me too' class='suggest'>
$('.suggest').each(function() {
$this = $(this);
if ($this.val() != '') {
return;
}
$this.data('defaultval', $this.val());
$this.addClass('disabled_text').focus(function() {
if ($this.val() == $this.data('defaultval')) {
$this.val('');
}
$this.removeClass('disabled_text');
}).blur(function() {
var oldVal = ($this.data('defaultval')) ? $this.data('defaultval') : '';
if ($this.val() == '' && oldVal != '') {
$this.addClass('disabled_text').val(oldVal);
}
})
});
Here, give this a whirl and see if it does the trick.
<script>
$(document).ready(function(){
$default = "defaultText";
$(".form-textarea").focus(function(){
if( $(this).val() == $default ){
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".form-textarea").blur(function(){
if( $(this).val() == "" ){
$(this).addClass("defaultTextActive");
$(this).val($default);
}
});
});
</script>
<input class="form-textarea" type="text" value="defaultText" />
<input class="form-textarea" type="text" value="defaultText" />
I've just tried to remove the value "srcc" from the focus function and it works fine

Categories