I am working on a Gmail Add-on with a dynamically created radio group, something like:
How can I insert an input text box as one of the radio options?
This is what I have so far:
var urlGroup = CardService.newSelectionInput()
.setType(CardService.SelectionInputType.RADIO_BUTTON)
.setTitle("Please select a link")
.setFieldName("radio_group")
//How do I get a text input field here as one of the radio options
// This is the line I cannot figure out
urlGroup.addItem(** insert input textbox here **)
for (var g = 0; (g < getURLsection.length); g++) {
//shorten long links to fit in card
if (getURLsection[g].length > 21) {
var URLname = getURLsection[g].slice(0, 22) + "..." + getURLsection[g].slice(-5);
} else {
var URLname = getURLsection[g]
}
urlGroup.addItem(URLname, getURLsection[g], false)
}
// create radio button group
var section = CardService.newCardSection()
.addWidget(urlGroup)
Any ideas on how to do this?
Preferably I would like to remove the word Other: and just have it as a .setTitle("enter link here") within the textbook.
To generate a text input element in Google's Add-ons you need to create a TextInput widget object which you need to add to the given section later.
As stated in the documentation for the addItem method, it receives the text and value parameters as strings so you can't use a TextInput object there.
As a workaround for what you want to achieve, you can create a radio group option with the 'otherLink' value:
urlGroup.addItem('Enter link below:', 'otherLink', false);
And a text input widget which you insert into the radio button group section:
var textInput = CardService.newTextInput()
.setFieldName("text_input_form_input_key")
.setTitle("enter link here")
// create radio button group section with text input
var section = CardService.newCardSection()
.addWidget(urlGroup)
.addWidget(textInput)
This way, the text input will appear below of the radio buttons and you could work with the value (link) entered in the input text if the selected value from the radio buttons group is 'otherLink'.
Related
I've got a text box (called SMS) which is capable of having its value changed by selecting a button (addButton). See the JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.addButton',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.sms').val(search_val);
});
});
</script>
I want to be able to add multiple values to this text box without the text boxes value completely updating each time.
For example:
A user can write: hello, your name is (user select 'Name' button and value is inserted'. Your address is (user selects address button).
With my current solution, any button clicked will remove all value form the text box and just insert the value of which ever button was pushed.
Use the function to update it's value:
$('.sms').val(function( index, value ) {
return value + search_val;
});
I would like to be able to use the JavaScript function of one of my form inputs to be able to show or hide a text box. After a lot of research I can only find how to select and hide other form input methods.
here is what I have:
var supplyBudget = this.getField("Supply Budget").value;
if (supplyBudget == ""){
/*text box selector*/.style.display = 3;
}
else if (supplyBudget =="0"){
/*text box selector*/.style.display = 3;
}
else{
/*text box selector*/.style.display = 1;
}
This runs when the user leaves the input field.
*edited code in accordance with freginold's comment
If you want to hide text that is part of the page content, you can't do that with PDF unless that particular text item is assigned to an Optional Content Group (OCG)... basically a layer that you can show or hide. There is no concept of "elements" for PDF page context like there is in HTML. Instead, there's a list of painting instructions for the page but JavaScript does not have access to it.
There are no "selectors" in Acrobat JavaScript. However, you can get the number of fields and then iterate to get the names in order to find the ones that are of interest. For example if I wanted to hide all fields where the name starts with "name", I might write...
for ( var i = 0; i < this.numFields; i++) {
var field = this.getField(this.getNthFieldName(i));
if ( field.name.indexOf("name") > -1 ) {
field.display = display.hidden
}
}
In general, to hide a field use...
this.getField("myFieldName").display = display.hidden;
To show a hidden field use...
this.getField("myFieldName").display = display.visible;
The only way that I have found to "Hide plain Text" and a text field, is to use something similar to #joelgeraci answer. I had to add another empty read only textbox to cover the text and textbox to hide.
Such as:
this.getField("HiddenField").display = display.visible;
Then when I need to "show" the text and text box I would simply hide the hidden field:
this.getField("HiddenField").display = display.hidden;
I have multiple cases of this in a form that I have been creating for work and a lot of JS behind it. I am no expert, just learning as I go.
I have 2 scripts that I need to combine, I basically have a script that allows a text input to be filled when you select an item in a select list. I also have a script that fills a select list based on input of a text input. Now I am trying to figure out how can I combine these 2 scripts so they can work together.
Heres an example of a multi select filling a text input.
http://jsfiddle.net/akhyp/1963/
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('hidden_input');
var selectedArray = new Array();
var selObj = document.getElementById('selected_items');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++) {
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
Heres an example of a text input filling a multi select based on input.
http://jsfiddle.net/akhyp/1964/
$("#txt").change(function(e){
var ar = $(this).val().split(",");
$("#sel option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
What I am trying to accomplish is something like this:
If text input is null then fill text input with selected option from the select list.
If the text input is already filled then fill in the multi select based on input from the text input.
Any help would be appreciated.
Final update:
Finally got the results I wanted, here the final product http://jsfiddle.net/akhyp/1966/ been working on this for weeks possibly months lol. Really happy to have this working.
I added another change script function, seems to have made it work. Your change set the selected, and mine transfers the values.
$('#sel').change(function(){
$('#txt').val($('#sel').val());
});
http://jsfiddle.net/snlacks/akhyp/1965/
I have product called initials like below in my test site
http://dev.mommyjewelry.com/initials/sideways-initial-necklace.html
Now if you go that page and select how many gold initials you will more select box appear below based on the selection. So If I select 2 initials I am display below 2 select boxes below where we have to select the letters of the initials
Now I am looking to make these 2 select boxes for instance in this example required. so If we click add to shopping cart button, display a pop up saying that these 2 select boxes are required. and prevent going to the shopping cart.
So again if I select how many gold initials as 3 then the 3 displayed select boxes are the ones I am looking to make in required.
I know when I have a textbox instead of select box I can use the below code
$("#product_form").submit(function(evt) {
var target = $("#yellow-gold").val(); var target1 = $("#white-gold").val();
if(target == "initial-0" && target1=="initial-0"){
alert("You must select either White Gold or Yellow Gold Necklace.");
evt.preventDefault();
}else{
var number_of_charms = $("#yellow-gold").attr("selectedIndex") + 0;
var number_of_gold = $("#white-gold").attr("selectedIndex") + 0;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}else if(number_of_gold > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}
}
});
as you can see above from my above code that I am able to display the message when it a text box by using this line
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
but how to use the same in case of a selectbox?
Try this :
$("div[id^='sideways-yellow']:visible select[name^=Product_Attribute] option:selected[value='select-letter']").length
This should get you the number of not selected options for the gold initial(Where the option value is select-letter)
If you need to get the white one, you can just change sideways-yellow to sideways-white
Sorry about the previous answer, I didn't realize I wasn't getting only the visible ones.
I have a jsfiddle application below:
http://jsfiddle.net/ybZvv/5/
If you open the jsfiddle, you will see a top control which contains "Answer" buttons. You will also see some letter buttons, a "True" button, and a "False" button.
The "True" and "False" buttons work perfectly, meaning that if the user clicks on "True" and then clicks on "False", it replaces the text input as you can't have an answer both "True" and "False".
This works for the same for the "Yes" and "No" buttons.
But there is a problem with the letter buttons. If you click on the letter buttons, you realise that you can click on multiple letter buttons which is fine, but the problem is that it replaces the text input for those letters which is incorrect. If multiple letter buttons are selected, then it should display the text inputs for all of those letter buttons, not replace the text input with the latest letter button selected.
I know the code below
_oCurrAnswerContainer.html('');
empties the container DIV, so it removes the inputs before creating a new one.
But I only want that to happen between the "True" and "False" buttons and "Yes" and "No" buttons. If you select mutliple letter buttons, it should not empty the container:
If buttons A, C and E are turned on, then text input A, C and E is shown, if E is then turned off, then text input for E is removed.
I guess you wanna append. Why can't you make the code this way?
_oCurrAnswerContainer.html(_oCurrAnswerContainer.html() + '' + NewContents);
Append to it. I am not sure, as I don't understand the question.
It seems the solution is to continually inspect the selected letters, each time the user makes a selection or deselect a letter.
Example:
<script type='text/javascript'>
var checkboxes = $('form > p > input:checkbox');
// updates the text input with the selected values...
var update = function() {
var values = [];
$('form > p > input:checked').each(function(idx, cb) {
values.push($(this).val());
});
$('#foo').val(values.join(', '));
};
// count the number of selected items...
var count = function() {
var n = $("input:checked").length;
$("div").text([n, 'box selected!'].join(' '));
};
// bind to the checkbox for clicks
// update the input field
// count the number of selected items
$(checkboxes).on('click', function(e) {
update();
count();
});
update();
count();
</script>
See this gist for a working example