Develop Reference

How to use two checkboxes with a submit button to toggle visibility in javascript only

I am very, very, very new to javascript, but
essentially what I need to do is create two checkboxes linked to a submit button so that when you check one box and then hit submit it links to the CSS id and makes that part of the page visible and then when you uncheck the box and check the other box it links to the other CSS id and makes that part of the page visible
my idea is that I need two functions, one for each clicked checkbox linking each function to a single submit button
but how do I do this with only one submit button
and should I use functions or variables
how can I do this?

Not quite sure what your trying to achieve, but since your really new to JS I think something like this may work for you. I assume the styles are linked, you want one or the other. Best to use radio buttons if so.
Document.getElementById('submit').onclick = function(){
if(document.getElementById('black').checked == true){
document.getElementById('someDiv').style.display = "visible";
document.getElementById('otherDiv').style.display = "none";
}
else{
document.getElementById('otherDiv').style.display = "visible";
document.getElementById('someDiv').style.display = "none";
}
}
When you press the submit button, it calls a function, inside the function it checks to see which checkbox is selected. And displays and removes the elements you decide.
Hope this helps

Access dynamic generated radio buttons with jQuery

I have a MVC Web-Page containing 1 datepicker. After selecting the date, there is an AJAX call to the server providing the user a list of possible actions (being radio buttons)
The user can select a radio button but this cannot be deselected if the user wants.
I tried to fix this with some javascript code, but I cant seem the access those radio buttons when generated dynamically in a partial result by the AJAX call.
It is very important, the big problem is that the radio buttons are not present on the original form. and I think therefore I cannot access them.
$('#nameofradiobutton')
$('input[name='nameofradiobutton'])
$('input[type=radio])
$('input')
All these and many more are not working not even the last one addressing all input controls...
Any guidelines? starting points? tips? tricks?
Thanks!

Except for if the DOM element you are trying to access is in an iframe there shouldn't be any reason you can't access it. The only reason I can think of why you can't access it then is because you try to access it before it is added to the page so for example you have your ajax callback call a function dowork and it looks like this:
function dowork(){
//add the radio buttons
$('.myradiocontainer').append($('<input type="radio" id="value1" />'));
//you try to check it here but it doesn't work
$('#value1').prop("checked", true);
}
If this is the case then you can do this instead:
function dowork(){
//add the radio buttons
$radio1= $('<input type="radio" id="value1" />');
$('.myradiocontainer').append($radio1);
//you try to check it here and it works
$radio1.prop("checked", true);
}

$("#parent_element").on("click", "input[name=radio_button]", function(){
var radio_button = $(this);
});
Where parent_element is the parent of your radio button and is not dynamic (present when the dom is loaded). radio_button is the name of radio button. Variable radio_button holds the actual radio button element.

how to hide a form initially, but render the form when the screen is reloaded?

I have a form in my screen. I want to initially hide it. The user can enable it later on, enter the value, and submit the form. Submitting the form would update the screen. But this time I would like the form to stay visible. How do I do that?
The below javascript would hide the form initially.
$(document).ready(function(){
document.getElementById( 'form1' ).style.display = 'none';
});
The below script would submit the form. But is there anyway I could ensure the form stay visible afterwards? what I have right now 'document.getElementById( 'form1' ).style.display = 'yes'' does not work.
function SubmitForm1(){
document.getElementById("form1").submit();
document.getElementById( 'form1' ).style.display = 'yes'
}

There are two easy ways to persist state across pages(outside local storage).
The first is to place information into your form urls. Ex. http://localhost?loaded=true. You can then use code like How can I get query string values in JavaScript? to retrieve the value and adjust the visibility of your form.
The second and more common is to store some sort of state on your server either in the Session or in a persistent storage like a database. When you serve the page you use whatever server side templating language you are using to adjust the visibility of the form based on the data you saved.
I would ask you to consider if you should be redirecting to a second page where the form is visible instead of manipulating visibility on the same page.

'Yes' is not a valid property of the "display" attribute.
Think about what you are doing by setting the elements display to 'none'. You are manually setting the css of the element to .form { display: none;}.
If you want to keep your code as is ,try setting the value of the display attribute to a valid property. Like "block" or "inline".
However if you are using JQuery I suggest that, on form submit you 'toggle' the desired element. Like:
document.getElementById( 'form1' ).toggle();
This will toggle the display from non-visible to visible, and vice-versa.
Below is a link to the different property values of the display attribute.
https://www.w3schools.com/cssref/pr_class_display.asp

How to change value in asp Label using javascript

I have create a function onchange when there a textbox value change. I able to show the result into label using innerHTML using Javascript. But when come to code behind, ASP.Net VB is not able to get the label.text value. Is there any way to show the result in this label?
<asp:Label ID="lblreserve1" runat="server" text="**HERE**" Visible="true"></asp:Label>
<input type="text" name="reservation-time" id="reservation-time" class="form-control" value="01/01/2016 - 01/25/2016" onchange="myFunction1(this.value)"/>
function myFunction1(reservedate) {
var x = document.getElementById("reservation-time").value;
document.getElementById("<% =lblreserve1.clientID %>").innerText = x;
}
MsgBox(lblreserve1.Text)

I think this is an XY problem. I don't think you want to change that label.
I imagine you have a textbox that is serving double duty. If the label says one thing, the textbox contains data that means one thing; if the label says something else, the textbox contains some other data. This is a really unusual way to accomplish what is a very common web UX.
Instead, create a series of label/textbox pairs and enclose them in DIV elements. Hide all DIVs but one of them. When you wish to "change" the label, unhide the DIV containing the label/textbox you want, and hide everything else.
When the form posts back to the server, all three textboxes will post back too. The server can tell which label was shown because its textbox will contain a value. Thus the server can infer the value of the label that was being shown when the form was submitted.

How to add a new row of text box and drop down?

I'm currently working on a rails project.
I have a text_field and a select_tag on the same row. I want a new row of text box and drop down list to be created whenever I have at least one character typed in the current text box. But I'm not sure how to do so. I assume I'd need to use jquery? But I'm still a newbie with web programming...
Please help! Many thanks!!!

You'd add fields and then apply a hidden value to them using jQuery's document ready function. Then apply a keyup function to the existing field you want it to trigger off of that calls show on the hidden item.
Here's the jquery I used in a wordpress page to do exactly that:
$(document).ready(function() {
$("#fieldtohide").hide();
$("#nonhiddenfield").keyup(function() {
$("#fieldtohide").show();
});
});