I have a jsf code like this:
<h:inputText id="emailText" styleClass="emailAddress" value="{bean.emailText}"/>
I am adding the style emailAddress to use it in jquery for restricting the user from copying and pasting text in textbox like below:
jQuery(".emailAddress").bind("copy paste",function(e) {
e.preventDefault();
});
But on click of Submit, when the text field is validated and if the text entered is in improper format, bean side, I am adding another style class to the textbox to highlight it in red color like:
((HtmlInputText) getUIComponent(context, component, "emailText")).setStyleClass("error");
Now the problem is the newly added style class is overriding the existing emailAddress class which was used for restricting copy,paste in jquery. I am using only class approach in jquery as I want to apply the restricting functionality to all the email address fields through out the application. So, please help me how to handle the situation. I mean how to avoid the overriding of the existing style class when we call setStyClass(). Thanks.
You can try another approach :
first create method in bean which returns boolean value for text-field validation.
use that method in styleClass attribute to add class "error" when it returns false.
styleClass="emailAddress #{beanName.isvalidate eq true ? 'no-error' : 'error'}"
on submit button don't forget to update h:inputText [ use update="emailText" for submit button ]
Related
I've been trying for like 2 hours to get this form validator to work, but I can't..
http://ink.sapo.pt/javascript/Ink.UI.FormValidator.2/#Ink_UI_FormValidator_2-FormValidator_FormElement-FormElement
I mean, form gets validated when I press the submit button, and form posts data only after all fields are correctly.
But what I need is to actually set up the onSuccess callback, so that instead of using method="post", i can a function easily.
You'll need to use the neverSubmit option to do this.
This is a rather obscure option, but it's there in the FormValidator class (you may be looking at the FormElement class, which refers to each input element in a form and takes options such as that input element's label and validation rules.)
I've made a short example based on the official sample.
http://jsbin.com/toruyo/edit?html,console,output
I have a JavaScript function that goes and gets me a form from another page on the same site. It returns an HTML element (the form) and everything in it. Inside that form, there is an input with no value.
Let's say we have this:
var form = $(data).filter("form")[0];
Now form has an html element that is the form. The form itself has an input element inside it.
I would like to be able to do something like:
$(form.input).text("something new");
and have that change the value of the input inside the form which is not on the page but inside a variable.
Just want to clarify again that the form (in the variable form) is not on the page, it is saved inside a variable.
Like this:
$(form).find("input").val("something new");
.find to get the child input tag (or .children("input") if you know input is a direct child of the form).
.val to set the input's value. (Note that .text sets the inner text of an HTML tag, which of course you don't want in this case.)
(Fiddle)
To set all inputs in your form:
$(form).find('input').each(function(index,inputObj){
$(this).val('someting');
});
Basically, you need to know what input you are looking for. You will need to know some way of identifying it i.e. either id, name, css class name etc. Here is a reference to jquery selectors you can use:
Jquery Selectors
e.g. if need to set value of an input with name "id", I will do this
$(form).('input[name="id"]').val("id is set");
Hope it helps
The way I was able to find to do this is to:
$(form).find("input")[1].setAttribute("value", "something")
try this:
$(form).find("input").each(function(){
val("something new");
});
i want to change the attribute of a text element from required to not required. I am using javascript to do this. i am calling a function based on the input of the radio button and i am using html 5..
document.getElementById("adiv").removeAttribute("style")
document.getElementById("myimage").setAttribute("src","another.gif")
var getvalue=document.getElementById("myimage").getAttribute("src")
Now but it in a function and use it how you wish.
That is how you get set and remove attributes in JavaScript.
Source: http://www.javascriptkit.com/dhtmltutors/domattribute.shtml
I would like to clear all inputs,
selects and also all hidden fields in a form.
Using jQuery is an option if best suited.
What is the easiest way to do this... I mean easy to understand and maintain.
[EDIT]
The solution must not mess with check-boxes (the value must remain, but checked state must be cleared), nor the submit button.
What I am trying to do is a clear button, that clears all the options entered by the user explicitly, plus hidden-fields.
Thanks!
You can use the reset() method:
$('#myform')[0].reset();
or without jQuery:
document.getElementById('myform').reset();
where myform is the id of the form containing the elements you want to be cleared.
You could also use the :input selector if the fields are not inside a form:
$(':input').val('');
To clear all inputs, including hidden fields, using JQuery:
// Behold the power of JQuery.
$('input').val('');
Selects are harder, because they have a fixed list. Do you want to clear that list, or just the selection.
Could be something like
$('option').attr('selected', false);
$('#formID')[0].reset(); // Reset all form fields
If you want to apply clear value to a specific number of fields, then assign id or class to them and apply empty value to them. like this:
$('.all_fields').val('');
where all_fields is class applied to desired input fields for applying empty values.
It will protect other fields to be empty, that you don't want to change.
I had a slightly more specialised case, a search form which had an input which had autocomplete for a person name. The Javascript code set a hidden input which from.reset() does not clear.
However I didn't want to reset all hidden inputs. There I added a class, search-value, to the hidden inputs which where to be cleared.
$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');
for empty all input tags such as input,select,textatea etc. run this code
$('#message').val('').change();
You can put this inside your jquery code or it can stand alone:
window.onload = prep;
function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
}
}
I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.
use below code getting the value of input type text via jQuery
alert($("input:text").val())
Maybe you could use the 'onblur' event handler to set the value of the element when you leave it
You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.
People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/
By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.