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.
Related
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'.
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 am trying to add a dropdown to a form with pre-set options. When the user selects an option I would like this to complete 2 separate text boxes according to the dropdown option.
Basic outline:
if dropdown value = 1 fill text box 1 with 00:00 and text box 2 with 01:00
if dropdown value = 2 fill tex box 1 with 01:00 and text box 2 with 02:00
Hopefully this is clear enough? I know how to set a single text box with the value set for the dropdown option but this isn't right for what is needed.
Using jQuery, add a change listener to your select box and update the inputs inside based on your selected value:
$(function(){
$("#select1").on("change",function(){
var curVal = $(this).val();
if(curVal == "1"){
$("#input1").val("00:00");
$("#input2").val("01:00");
}else if(curVal=="2"){
$("#input1").val("01:00");
$("#input2").val("02:00");
}
});
});
Here is an example http://jsfiddle.net/iaretyler/zfruguj7/
Something like this:
DEMO
$("#selectOpt").on('change',function(){
var value=parseInt($(this).find('option:selected').val());
$("#txt1").val("0"+(value-1)+":00");
$("#txt2").val("0"+(value)+":00");
});
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'm getting to grips with Javascript and need to do the following:
Have four checkboxes with the text "Red, Blue, Yellow, Green". When the user clicks the button, one of the colours will display randomly as text.
Any suggestions how to do this with Javascript?
I believe this is what you are trying to do:
http://jsfiddle.net/DerekL/QgGwS/
*I am using jQuery here just for explanatory purposes. Convert it to pure JavaScript if you want to.
$("button").click(function(){
$colors = $("input:checked"); //Get all the checkboxes that are checked
if( $colors.length != 0){ //At least 1 checkbox has to be checked
var index = Math.floor(Math.random()*$colors.length); //generate ran. num
$("span").html($colors[index].value); //show the value
}else{
alert("Choose a color!"); //Tell the user to check at least 1 box
}
});
One of the randomly chosen color from the list of the checked boxes will show up as you click on the button.