how to set attribute of html form from javascript - javascript

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

Related

javascript - input type = radio disappears when changing text

Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)

setStyleClass method is overriding the already defined styleClass

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 ]

How to change the text value of an input inside an element in jQuery

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");
});

How to Get ClientSide Value from ASP.net Custom Control?

How can I get ClientSide(JavaScript) Value for My ASP.net Custom Control?
for example I want to get a value like this:
var selectedItemID = getElementById("<%=MyControl1.ClientId%>").value;
How can i set a specific Value in my control scripts to get it from ".value" property like above?
Additional Note:
i want ".value" property(javascript) to get the dropDown control(one of my controls in my custom control) selected Value.
You can have a custom attribute for your custom control while it is rendering and bind the necessary value. Then in the Clientside, you can get the custom attribute and get the corresponding value from it.
For ex: Say suppose you are adding a custom attribute to your control using the code below while rendering,
MyControl.Attribures.Add("attributeName","Value");
then you can get the value in the clientside using the code snippet below.
var controlValue = $("#"+"<%= MyControl1.ClientID %>").attr("attributeName");
This would give you the value that you stored in the custom attribute of the control.
I'm not sured but You can try this:
var control = $find("<%= MyControl1.ClientID %>");
may be following link usefull for you No error message displayed for custom validator
just do like this way using jquery:
$("<%= MyControl1.ClientID %>").val();
using javascript:
var Val=document.getelementbyid("<%= MyControl1.ClientID %>").value;
hope this help.
If your control rendered as an input, your code will work but if it is anything else, such as a span or label, you need to use .innerHTML instead of .value

Getting HTML with the data using jQuery

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.

Categories