In a form I have 4 radio buttons, under the label Q3. Also i have a text field labeled lictype Each radio button has its own respective Button Radio Choice Value
radio1 = Pre
radio2 = Pro
radio3 = Ult
radio4 = Uns
When a radio button is checked. I want the value of that button to be displayed in the lictype text field.
Here is the JS I tried in a calculation.
var q3 = this.getField("value")
if (q3.value == "Pre”){
{
lictype.value = “Pre";
}
elseif (q3.value == "Pro”)
{
lictype.value = “Pro";
}
elseif (q3.value == "Ult”)
{
lictype.value = “Ult";
}
else (q3.value == "Uns”)
{
lictype.value = “Uns";
}
If anyone is interested: I was able to accomplish this by using JS to do a SHOW/HIDE on elements in the ACROBAT properties menu.
Set a different text field for each of the radio buttons
Set the property of each radio button to SHOW and then HIDE the appropriate text field.
In the the text field: Stack all of them in the desired location and set each default value in the properties panel to their respective value names.
Problem solved!
Related
I'm working on autocomplete textbox feature of angularjs. I want the user only to select name from the existing autocomplete list instead of typing a new name. Eg.,When user types 'Al' autocomplete list shows the matching list and user can select one name from the existing list instead of typing a new name.How to restrict user from submitting a new name which is not present in the existing list.
Demo : http://plnkr.co/edit/AdmtP1b6K9kQorMHmt7t?p=preview
Code Sample:
$scope.countryList = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei"];
$scope.validateField = function(){
alert("Clicked on submit , validte field");
}
$scope.complete=function(string){
var output=[];
angular.forEach($scope.countryList,function(country){
if(country.toLowerCase().indexOf(string.toLowerCase())>=0){
output.push(country);
}
});
$scope.filterCountry=output;
}
$scope.fillTextbox=function(string){
$scope.country=string;
$scope.filterCountry=null;
}
Any inputs would be helpful.
You can disable submit button and also highlight the border of the input field red, telling user to select name from drop down list.
First you need to update your complete() function. Use an else if statement that will check if the value is from the list or not, if not then you can implement your desired logic in that else if statement.
This method is flexible and easy to customize your error generation messages. You can show and hide the div that has the error message or you can apply css style on input-field using ng-style or ng-class. Right now I'll show you how to disable or enable button. Here is the updated code snippet:
$scope.complete = function(string) {
var output = [];
angular.forEach($scope.countryList, function(country) {
if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(country);
$scope.enableDisable = false;
} else if (country.toLowerCase().indexOf(string.toLowerCase()) < 0) {
$scope.enableDisable = true;
}
});
$scope.filterCountry = output;
}
And the In the html section you just need to add ng-disabled attribute and set its value.
<input type="submit" value="submit" ng-disabled="enableDisable" ng-click="validateField()">
So, you can do whatever you want in that else if statement to get the desire error message.
Take a look at this plunkr.
you can check for the validity of input using something like below and monitoring the value using ng-change
$scope.checkInput = function(){
$scope.validInput = $scope.countryList.indexOf($scope.country) > -1;
}
I have a form with numeric fields, text fields and drop down lists. I have implemented functionality were if a field is changed from original value then button is enabled for submit. If field is changed back to it original value button should(is) disabled.
PROBLEM: Current issue at the moment is
- if I change two different fields, then button is enabled as expected. But then if I revert only one of these edited fields back to its original value, submit button is disabled. Expected behavior is "as long as there's a changed field that is valid, then button should remain enabled for submit".
Conditions for button state
for all fields - if original value is changed and is not empty - enable button
for numeric fields - if entered/changed value is a valid number - enable button
*so if any of these conditions are not met, then button should stay disabled
Current Code
Current implementation and why it was implemented this way
$("input[name='q_description'],[name='q_sellprice'],[name='profit'],[name='grossProfit'],[name='markUp']").change(function () {
var originalValue = ($(this)[0].defaultValue);
var currentValue = $(this).val();
var changed = false;
var button = $('#submit-data');
//numeric fields
var sellprice = parseFloat($('#q_sellprice').val());
var profit = parseFloat($('#profit').val()); var grossProfit = parseFloat($('#grossProfit').val());
var markUp = parseFloat($('#markUp').val());
//text fields
var description = document.getElementById("q_description").value;
//alert("Numeric values:" + getFieldValues );
//$('input, select').bind('keyup change blur', function () {
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
$(this).css("background", "#fd6363");
document.getElementById("submit-data").disabled = true;
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
$(this).css("background", "#FFE075");
document.getElementById("submit-data").disabled = false;
}
else if (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
$(this).css("background", "#FFFFFF")
document.getElementById("submit-data").disabled = true;
}
else {
//to do
}
//});
});
On the first line, I dont have it this way
$("input[type=text]").change(function () {
because there is some fields on the form/page that I wanted to ignore for affecting the state of the submit button. That is why I have specified those particular fields on the .change
Also to check isNaN for the numeric fields. I probably can identify id the required fields by class names and add them to an array and just check that instead of the numerous declarations
var numericFields = document.getElementsByClassName("numeric_fields");
var getFieldValues = new Array();
for (i in numericFields) {
var singleValue = numericFields[i].value;
if (singleValue !== "" && singleValue !== undefined ) {
getFieldValues.push(singleValue);
}
}
but I had an issue, where the invalid check if statement part of the code wasn't getting hit with that implementation.
Anyways the main issue that I would like to solve at the moment, is to stop the button getting disabled when I revert one field back to its original value when multiple fields have been changed/edited to (from original) other valid states.
UPDATE
Further checks to clarify issue. I added an alert message message to see/check which if/else statement is getting hit each time any field is changed
if (description == "" || isNaN(sellprice) || isNaN(profit) || isNaN(grossProfit) || isNaN(markUp))
{
/*change background color to red for invalid or empty field*/
alert("1") //disable button
}
else if ((originalValue != currentValue) ) {
/*change background color to yellow if value changed*/
alert("2") //enable button
}
else (originalValue == currentValue) {
/*original and current values match, reset background of that field to white*/
alert("3") //default -> disable button
}
Now if a previously edited field is reverted back to its original value, while another has been changed, its hitting the last else statement alert("3), meaning the check is done per individual field that is currently being edited and not all the specified fields that I have specified from the form.
I have a jsfiddle here
Please follow steps below in order to use the little application in the fiddle:
Click on "Open Grid" link and select a numbered button. A bunch of letter buttons will appear underneath. If you start selecting answer buttons then they turn green and in the "Number of answers" textbox above will start counting how many buttons you have turned on.
If you deselect all answer buttons however so that no answer buttons are turned on, then the text box above does not display 0 but instead display 1.
This is because of the code below:
var container = $btn.closest(".optionAndAnswer");
// here the zero gets assigned
var answertxt = $(".answertxt", container);
var numberison = $(".answerBtnsOn", container).length;
if (answertxt.val() == 1 && numberison == 0) {
numberison = 1;
}
answertxt.val(numberison);
I have include a comment in the jsfiddle in block capitals to state where this block of code is in the fiddle.
What I want to do is that if the option selected from the grid is either "True or False" or "Yes or No", then perform the code above where if no answer button is highlighted then the textbox value is 1. If it is any other option then if no answer buttons are selected then the textbox value should be 0.
How can this be achieved?
Fixed it, as you can see below, I'm checking if the selected type of input is true/false yes/no and by that I determine which code to run:
// ...
var maxRowValue = $('.gridTxt', container).val();
if (maxRowValue === 'True or False' || maxRowValue === 'Yes or No') {
if (answertxt.val() == 1 && numberison == 0) {
numberison = 1;
}
}
answertxt.val(numberison);
when I click a button, popup window opens. There I get user detail from facebook. that data I have to pass to parent window form. this i can do using
opener.document.signup2.'.$key.'.value="'.$value.'";
but this is working for textbox. how to do for radio button.
example.
If gender is female in popup. corresponding option should be selected in parent form.
radio buttons are stored in an array, so you'd have to figure out what index in that array represents the option to check, then set that element's 'checked' attribute:
radioObject = opener.document.signup2.whateveryourradiobuttonnameis;
for (i = 0; i < radioObject.length; i++) {
if (radioObject[i].value == 'value you want to have selected') {
radioObject[i].checked = true; // check new radio button
} else {
radioObject[i].checked = false; // uncheck the others.
}
}
i have a four radio buttons in a row.
so i have 10 rows in a table. all radio buttons in a row having same id.
in one time, only one radio button in a row can be selected.
some radio buttons are checked and some non checked.
i want to put a validation when submit the form. when i submit the form if all radio button is non selected in a row then a msg box can be appear.
i have found the radio button id but i am not able to get their value, either true or false.
it show me in a alert box: radiobutton Value is: undefined
here is the method:
function showValue() {
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+radiobuttonName);
if (radiobuttonName.checked)
{
radiobuttonValue=radiobuttonName.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
Edit:
i have four radio button in a row.
name and id is same of all four button in a row.
suppose, name and id for all buttons in first row is radiobutton0. for second row it is radiobutton1, for third row it is radiobutton2. thus i have 10 rows in a table.
my aim is when i submit the page, one button must be checked in a row else it show a msg box that please fill the corresponding radio button. .
i want to get the value of radio button either true or false.
i run the following code:function get_radio_value()
{
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+:"+radiobuttonName);
}
}
this method execute the loop and display all radiobutton Names.
How i find radiobuttonValue which is either true or false.
You're trying to alert the .value property of a string (radiobuttonName is just a string, not an element), which is undefined, instead you need something like this:
function showValue() {
var radioID="radiobutton", radiobuttonName, radiobuttonValue, rb;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
rb = document.getElementsByName(radiobuttonName)[0];
alert("radiobutton Name is:"+radiobuttonName);
if (rb.checked)
{
radiobuttonValue=rb.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
In the above we're getting the first element with that name (I'm guessing by your naming conventions), if it had an ID for example, you'd replace document.getElementsByName(radiobuttonName)[0] with document.getElementById(radiobuttonName).