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
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'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;
});
When you press tab button while you typing in an input[text] you will go to next input automatically, when you fill up all inputs and after again want to re-fill them, values will highlight with blue color, so i tried to do this without pressing tab button, it's already go to next input but it will not highlight to get new value and you have to drag (select all) the value to replace new one.
so i want to when it go to next value WHEN it already filled up it get blue highlight and editable. please see my JSFiddle and fill up all input then re-fill them then you will see you can not change value until you drag the value to change.
JSFiddle
$(".digits").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).prev('.digits').focus();
}
});
Try this: you can add focus event handler and select all text in the input box. See below code and JSFiddle demo
$(".digits").focus(function(){
$(this).select();
});
JSFiddle Demo
try this Code Its Working Fine
$(".digits").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).prev('.digits').focus();
$(this).prev('.digits').trigger( "select" );
} });
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.
I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.
The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)).
Now I have included this in my code:
var clickedNumber = 10;
$('.answerBtns').each(function (index) {
if (index < clickedNumber) {
$(this).show();
}
});
Now what this does is no matter how which button I select in the first grid, it will always display 10 buttons. So what I need is clickNumber to be in a loop so it loops through the buttons, so if the user selects button "1" in first grid (the grid which you have to open using (Open Grid) link, then it should display the first button which is "A" in second grid, if user selects button "2" in first grid, then it should display the first two buttons "A" and "B" in second grid, if "3" then display "A", "B" and "C" and so on.
But also if user selects "True or False" button in first grid, it should display only "true" and "false" buttons in second grid and if user selects "yes or no" button in first grid, it should display "Yes" and "No" buttons only in second grid.
Does anyone know how to do this?
Thank you
Code is in jsfiddle, click here
If you add the following to the end of your buttonclick() function it will show or hide the appropriate number of buttons, as you can see in this updated jsfiddle.
$('.answerBtns').each(function (index) {
if (index < button.value)
$(this).show();
else
$(this).hide();
});
Note that that is basically the same as the snippet from your question except using the value from the clicked button instead of a hardcoded 10.
But more generally, if you're using jQuery then use jQuery. That is, don't put inline onclick handlers in every one of your buttons. They all just say onclick="buttonclick(this);", and they all have the same class, so you should remove those inline handlers from your HTML and set them up using jQuery.
So you could replace your buttonclick function with something like this:
$(".gridBtns").click(function() {
// what you need from your "buttonclick(button)" function should go here
// except instead of the "button" parameter you can just use "this",
// e.g., this.value
var clickedNumber = this.value;
$('.answerBtns').each(function (index) {
if (index < clickedNumber)
$(this).show();
else
$(this).hide();
});
});
I haven't got time to do the "yes or no" part for you, but perhaps you can figure it out from the above? Within the click handler you can test if (this.value==="yes or no") and so forth.