I use VS2010,C# to develop my ASP.NET web app, I'm creating a vote page for my users, I get some questions from my DB, each question is displayed in a dynamically created row, also there are 5 options (very good, good, bad....), user must select one. I use following code to create a radio button for each choice, of course all five radio buttons of a row have a unique group name:
tr = new TableRow();
tr.HorizontalAlign = HorizontalAlign.Right;
tc = new TableCell();
tc.HorizontalAlign = HorizontalAlign.Center;
RadioButton r = new RadioButton();
r.Text = "";
r.GroupName = i.ToString();
tc.Controls.Add(r);
tr.Cells.Add(tc);
tc = new TableCell();
tc.HorizontalAlign = HorizontalAlign.Center;
r = new RadioButton();
r.Text = "";
r.GroupName = i.ToString();
tc.Controls.Add(r);
tr.Cells.Add(tc);
// five radio buttons are created in each row
now I'm going to find user choices, I think the best approach is using a JavaScript function to find selected value for each question, then perform the calculations, how can I do so? I don't want to use AutoPostback for radio buttons as it can be really slow,
thanks
Just add a submit button. In the submit event handler, use c# to browse through the controls and get the selected values. You don't need JavaScript for this.
Update
Basically, you will need to assign some similar names to your dynamically generated controls. I.E. Question1Radio1, Question1Radio2, etc..
After that you can use the Request.Form method to retrieve the values from the radio buttons by calling Request.Form("Question1Radio1"), Request.Form("Question1Radio2"), etc.. in your submit handler.
Related
Here, I've three radio group in a single page. But in the entire page I want to select only one radio option. Like if I'm selecting Monday then Tuesday selection should be unchecked automatically. How can I proceed with the logic, below logic is not working as expected.
sample JSON :
{
report:[
{
day:'Monday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Tuesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
},{
day:'Wednesday',
slot:[
'9-10am',
'10-11am',
'11-12am'
]
}
]}
JS code
for(var I=0; I<reports.length; I++){
var radios = document.getElementsByTagName('input')
if(radios[I].type === 'radio' && radios[I].checked){
document.getElementById(radios[I].id).checked = false
}
If you're able to create radio buttons in SurveyJS, you should be able to give the button group a name, so there would be no need for any additional JavaScript. Check out their documentation for an example.
Looks like the sort of nested structure you have for the buttons could be achieved with something like a dynamic panel or cascading conditions in SurveyJS. You should be able to render the available time slots dynamically with "visibleIf" based on the selected day.
I would definitely dig around the documentation of SurveyJS to find a solution there rather than hacking your way around it. But solely as an exercise, the problem in your current code could be that you're selecting a button by ID, which will not work correctly if you have tried to give the same ID to multiple buttons. After all, you already have the target button as radios[I], so you could just use radios[I].checked = false. Or the issue could be that you're unchecking the selected button AFTER the new selection has been made, which might actually uncheck the button you just clicked. Hard to say without additional information, but in any case, looping your inputs based on a value that might be something else than the actual number of inputs (you're using reports.length) is probably not the best idea, since that value might be different from the number of inputs in your form, which would mean that not all of them are included in the loop. Here are a couple of examples of what you could do instead:
// Get all radio buttons
const radioButtons = document.querySelectorAll('input[type="radio"]')
// If you need to uncheck the previously selected one (don't do this if you can avoid it!)
radioButtons.forEach(radioButton => {
// Use a mousedown event instead of click
// This gives you time to uncheck the previous one before the new one gets checked
radioButton.addEventListener('mousedown', () => {
// Get the currently selected button and uncheck it
const currentlySelected = document.querySelector('input[type="radio"]:checked')
if (currentlySelected) currentlySelected.checked = false
})
})
// You can add further options to the querySelector, such as [name]
// This gets the currently selected button in the specified group
const checkedRadioButton = document.querySelector('input[type="radio"][name="group-name"]:checked')
Here's a fiddle demonstrating this sort of "fake" radio button functionality (without a "name" attribute).
You can give all these radio buttons the same name, then one radio only will be checked.
I want to create a form with Adobe Acrobat.
I have a CheckBox (named CheckBox) and radio buttons (group name: Group1; options name Opt1 Opt2 Opt3).
With this code in the actions of the CheckBox (run a JavaScript script):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
I manage to hide the group (= all options). But I would like to hide only one option (Opt3 for example).
How do I modify my code to achieve this result?
Thank you for your help :)
I see that in your example you add the name of the group to the getfield function:this.getField ("Group1"). This means you are hiding the full group. In order to hide a single option you should instead add the name of that specific option to the getfield function this.getField ("Opt3")
So your code should look like this:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Opt3"). display = nDisplay;
By dint of research and testing, I finally found the solution.
The problem was with the name of the option. I had this intuition.
In Adobe Acrobat (form), when you create radio buttons, they are part of a group (example "Group1") and each new button will be named "Opt1" "Opt2" ...
To draw a parallel with other languages, the group is actually "a list". So the name of the option "Opt1" is not "Opt1" but the 1st element of "the list" (= "Group1"): Group1.0
And with that, it's won.
I take my original code which hides all group ("Group1"):
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1"). display = nDisplay;
If I want to do an action on the 1st element of the list (= "Opt1"), the code would become:
var nDisplay = event.target.isBoxChecked (0)? display.visible: display.hidden;
this.getField ("Group1.0"). display = nDisplay;
(1st element = 0; 2nd element = 1 ...)
Thanks to Stephen for taking the time to help me :) And I hope it helps other people.
I was using select Person_name = $('#selectedPerson').val()
person_name.length is showing 2 if selected 2 values.
Now i have changed to check boxes which is in table. If i am using person_name= document.getElementById("selectedPerson").innerText, person_name.length is not working. It is taking length of the content. I want to count of the person and it is value which i am selecting in check-boxes.
Thanks,
Raja.
Side note: an ID should only ever be applied to one element, so you want .selectedPerson not #selectedPerson if it's going to select two things.
var people = $('.selectedPerson');
var count = people.count;
var name = people.text();
With the help of some fine people here at Stack Overflow, I was able to come up with some script that allowed me to dynamically change some text form fields based on the user's selection from a drop-down menu. Now I would like to implement two drop-down menus affecting different text form fields. I can have them each working on their own, but when I go to combine them, only one works.
input_1 and input_39 are my drop-down menus.
There might be times when one or the other is not present on the page.
You can view it on this page:
http://www.ortorderdesk.com/product/2-sided-bc/
var element = document.querySelector('form.cart');
function updateText() {
var obj_sel_value = element.input_1.value;
if (element.input_19)
element.input_19.value = myData1[obj_sel_value];
if (element.input_21)
element.input_21.value = myData2[obj_sel_value];
if (element.input_26)
element.input_26.value = myData3[obj_sel_value];
if (element.input_31)
element.input_31.value = myData4[obj_sel_value];
}
var element = document.querySelector('form.cart');
element.input_39.onchange = updateText;
function updateText() {
var obj_sel_value = element.input_39.value;
if (element.input_33)
element.input_33.value = myData5[obj_sel_value];
if (element.input_40)
element.input_40.value = myData6[obj_sel_value];
}
You're overwriting the first instance by re-creating the same variable. Try simply removing the second instance of var element = document.querySelector('form.cart');.
On my aspx page I dynamically create html controls on client side using javascript. For example, after page load you can click button in a browser, by clicking button html input and select elements appear. You may click once again, and this elements (input and select) will added again. So, you can create so many inputs and selects as you want (all this using javascript, no postbacks)
After user created some inputs and selects and entered some information in it, he posted form. I want on server side to find all this dynamically added elements and perform some actions depends on values in this controls.
How can I find dynamically added elements, and what is the best and elegant way to achieve this?
Thanks in advance.
In the Javascript that creates the new elements, increment a counter each time an element is created. Add the value of the counter to the name of the input element so each element has a unique name.
Add the final value of the counter to a hidden form field when the form is posted.
In your server side code, create a loop that starts at zero and continues until you have reached the value of the counter. Within the loop, fetch the posted value of the corresponding form field.
When you add the elements, assign unique IDs to them, and then retrieve their values using Request.Form["UniqueIdHere"] (C#) or Request.Form("UniqueIdHere") (VB.NET).
Create a loop that loops through each input and select object, that grabs the name/id of the current object and its corresponding value. Then add those items to an array and once the loop is completed, pass those values to your aspx file.
You can view an example with this approach at: http://jsfiddle.net/euHeX/. It currently just alerts the values, but you could easily modify it to pass the values as a parameter via ajax to your handler aspx file. The code will add new inputs or select boxes based off of the input provided. This would of course be modified to reflect your current setup.
HTML:
<div id="dynamic"></div>
<input type="button" id="submit-form" value="Submit>>">
JavaScript (using jQuery):
function createInput(type){
for(var i=0; i<5; i++){
if(type==0){
var obj = '<input type="text" id="'+i+'" class="dynamicContent">';
}else if(type==1){
var obj = '<select id="'+i+'" class="dynamicContent"><option>--Select--</option></select>';
}
$("#dynamic").append(obj);
}
}
function getContent(){
var inputArray = [];
$(".dynamicContent").each(function(k,v){
var o = $(this);
var oType;
if(o.is("input")){ oType = "input"; }
if(o.is("select")){ oType = "select"; }
var oID = oType+o.attr("id");
var oValue = o.val();
inputArray.push(oID+'='+oValue);
});
alert(inputArray);
}
$("#submit-form").click(function(){
getContent();
});
// Set type to 0 for input or 1 for select
var type = '1';
createInput(type);
If you're using jQuery you can use .live() to achive this like a peace of cake!
http://api.jquery.com/live/
I don't know if your controls will survive the postback the way you're creating them, but a good technique for accessing dynamically generated controls (assuming that you've figured out how to persist them) is to do something like the following:
Add a panel to your page. Add your dynamically created controls to this panel.
In the OnClick event handler (or other method), do something like the following:
foreach (DropDownList ddl in Panel1.Controls.OfType<DropDownList>())
{
//put code here
}
foreach (TextBox txt in Panel1.Controls.OfType<TextBox>())
{
//put code here
}