How to get input value when changed by user - javascript

I have a form where when user can enter value and then use tab indexing to move to the next input text box. When moving the to the next text box, the value of previous text box should be updated to a bean and at the same time I want to get the value from that bean. I tried few things but no luck. I am also not sure whether my approach is right. I think something is wrong with my set property. Please advise.
<%String area = "locality";%>
<input type="text" id="area" class="form-control" placeholder="Area" value="<%=area%>" name="areaname" />
<script >
$("#area").blur(function() {
<jsp:useBean id="profcontact" class="com.get.ProfileFormContact" >
<jsp:setProperty name="profcontact" property="area" value="${param.areaname}" />
</jsp:useBean>
$("#area").val("<jsp:getProperty name="profcontact" property="area" />");
});
</script>

Related

Using the same function for different DOM elements

I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
function checkInput(e){
e.currentTarget.placeholder="";
}
^^made a single function that can be used for both textarea and sets
How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:
textarea.addEventListener("blur",originalValue);
reps.addEventListener("blur",originalValue);
function originalValue(e){
e.currentTarget.placeholder= default value/original value;
}
Try out this textbox
<input type="text" placeholder="Enter a value">
As you can see there is no code whatsoever, and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.
I seriously don't understand why you even began to write code around this!
If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur.
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
textarea.addEventListener("blur",restore);
sets.addEventListener("blur",restore);
function checkInput(e){
e.currentTarget.originalPlaceholder = e.currentTarget.placeholder
e.currentTarget.placeholder="";
}
function restore(e){
e.currentTarget.placeholder = e.currentTarget.originalPlaceholder;
}
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I think this is a terrible idea FWIW!

Select all text in textbox when label is clicked

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>
I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

Enabling a Textbox and making it editable

I have a textbox field displayed in my jsp file which looks always disabled and uneditable. I would like to have it enabled and editable on one condition.
So when the above condition is satisfied, I will save the page which save this field in DB. I would just like to have the text box enabled and the field editable. My code is as follows,
<li class="Textbox"><input type="text"
dojoType="dijit.form.NumberTextBox" name="field name"
id="EDIT21" style="width: 45px;" size="4" maxlength="3"
value="${value of an expression}"
onchange="Config1.updateStatus();" required="true"
constraints="{min:1,max:999}"
rangeMessage="<spring:message code='validation.' arguments='1,999' />" />
</li>
There's nothing in that code that would cause the textbox to behave like that. It sounds like you've either got some javascript disabling the textbox, or some CSS that makes it appear as though it's disabled even though it's not. If it's Javascript, look for a line that sets the disabled property, such as
document.getElementById('EDIT21').disabled = true;
or
document.getElementbyId('EDIT21').contentEditable = false;

radio buttons + input field for one of them

I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.

Tab order issue in IE with initial Javascript select of field in form

I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>

Categories

Resources