We Keep Coding

Input Box Values Disappear on Button Click

I am just starting out with JQuery for asp.net core mvc.
I have a section of a page comprising a list of items linked to the main subject. When an 'edit' button is clicked against one of the list items, a hidden section (fieldset) is displayed and populated with the values of that list item. Other inputs on the page are disabled and the user can edit the item. All works fine.
However, when finished editing, the user clicks a 'submit' button (within the previously hidden fieldset) and the idea is to submit the edited data via ajax and, if accepted, to update the list. Ajax, etc. is not (yet) the problem.
When the user clicks the 'submit' button (coded as type="button"), the values in the edited section appear to have been cleared and are returned as spaces or nulls. It only seems to apply to this fieldset, as (disabled) values from the remainder of the document can be retrieved (just for testing purposes).
Can anyone tell me what is going on here and how to preserve these edited values, please?
#**** Drop-down section for editing Admissions ****#
<fieldset id="AdmissionsEditFieldset" class="app-edit-main-fieldset" hidden>
<legend id="AdmissionsEditLegend" class="app-edit-fieldset-legend">Editing Admission</legend>
<div class="row">
<div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
<div class="form-group">
<strong><label>Institution:</label></strong>
<span class="app-label-to-input-sep">
<input id="admId" name="aId" type="text" class="form-input app-can-disable" asp-for="Admission.Id" hidden />
<select id="admPlace" name="aPlace" type="text" class="app-can-disable" asp-items="Model.PlaceOfDetentionDd" asp-for="Admission.PlaceId"></select>
</span>
<strong><label class="app-input-fld-sep">Date Admitted:</label></strong>
<span class="app-label-to-input-sep">
<input id="admDate" name="aDate" type="text" class="form-input app-can-disable" asp-for="Admission.DateAdmitted" style="width: 5%" />
</span>
<strong><label class="app-input-fld-sep">Sequence:</label></strong>
<span class="app-label-to-input-sep app-can-disable">
<input id="admSeq" name="aSeq" type="text" class="form-input" asp-for="Admission.Seq" style="width: 5%" />
</span>
<span>
<button id="admSubmitBtn" class="btn btn-sm btn-primary app-adm-edit-btn" type="button">Submit</button>
<button id="admCancelBtn" type="button" class="btn btn-sm btn-danger app-button-to-button-sep">Cancel</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
</div>
</div>
And this is the JavaScript/JQuery
$(document).ready(function () {
$('.app-adm-edit-btn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
// btn has format 'editN[N...]'
var btn = event.target.id;
var sid = btn.substring(4);
//*** Un-hide the editing drop-down
$('#AdmissionsEditFieldset').removeAttr('hidden');
//*** Copy values from the relevent line in the table to the editing drop-down
$('#admId').val($('#ident' + sid).text());
$('#admPlace').val($('#placeN' + sid).text());
$('#admDate').val($('#dateAdm' + sid).text());
$('#admSeq').val($('#seq' + sid).text());
//*** Set the section legend
$('#AdmissionsEditLegend').text('Editing an Admission');
//*** Disable other sections
DisableFieldsets(); // Works OK - makes no difference if commented out
//*** Focus the first input box
$('#admPlace').focus();
}); // $('.app-adm-edit-btn').click
/*----------------------------------------------------------------------------------
Admissions Submit button click handler
----------------------------------------------------------------------------------*/
$('#admSubmitBtn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
// Just to verify nothing wrong with JSON.stringify
var id = $('#admId').val();
var placeId = $('#admPlace').val();
var seq = $('#admSeq').val();
var dateAdmitted = $('#admDate').val();
var court = $('#Court').val();
// Not integrated, so that I can display the values
var jsn = JSON.stringify({
Id: $('#admId').val(),
PlaceId: $('#admPlace').val(),
Seq: $('#admSeq').val(),
DateAdmitted: $('#admDate').val()
});
$.ajax({
url: "api/EditAdmissionApi",
method: "POST",
contentType: "application/json",
data: jsn,
success: function (data) {
alert("Ajax Success"); //TODO
}
});
alert(jsn);
//TODO
});
/*------------------------------------------------------------------------
Admissions Cancel button click handler
--------------------------------------------------------------------------*/
$('#admCancelBtn').click(function (event) {
//*** Prevent default button actions
event.preventDefault();
});
}); // $(document).ready
/*===========================================================================
Helper Functions
===========================================================================*/
/*---------------------------------------------------------------------------
DisableFieldsets Helper function to disable fieldsets while input of linked
items takes place
---------------------------------------------------------------------------*/
function DisableFieldsets() {
DoDisableFieldsets('#MainFieldset');
DoDisableFieldsets('#AdmissionsFieldset');
DoDisableFieldsets('#ChildrenFieldset');
DoDisableFieldsets('#SubmitButtonsNonFieldset');
}
function DoDisableFieldsets(id) {
var xId = $(id);
$('.app-can-disable', xId).attr('disabled', 'disabled');
$(xId).addClass('app-disabled-background');
}

Yes it does and many thanks for the suggestion, mj.
Trying to see why and testing alternatives brought me to the real issue, however. I have to confess that it was one of those stupidities that you can stare at for hours without seeing. Still I will confess, in case it helps anyone else.
I had given the Edit buttons in the list a 'dummy' class name to make selection easier. Then I had inadvertently copied and adapted the button html to be the Submit button following edit, without deleting the class. So both the Edit and Submit button handlers seemed to be called, which was causing havoc (I have not yet worked out why this was not just producing the unedited text in the second handler - but life's too short). So a dumb question on my part - sorry for wasting everyone's time.
The construct $('#admId').val($('#ident' + sid).text()); works fine now.

form with js, html, not hidden fields at first

I have a problem with a field,
code
HTML
<span id="sudaner">
<input type="radio" name="traveledis" checked value="0" >No
<input type="radio" name="traveledis" value="1" />Yes
</span>
<div id="sudandetails">`
and this is the js code
$("#sudaner input[type='radio']").click(function(){
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
});
I have 'checked' active in 'NO' but when I go to the form, I see the 'No' in default but the fields aren't hidden at first. I need to move the selection by 'Yes' and again 'No' and the fields are hidden or click 2 times in 'No' and the fields are hidden. so I don't understand why the field aren't hidden at first.
Thanks for your help

I made a fiddle for you and combined the ready function with the click function in an own handler. You can't only check the value on click because there is no click if the document gets loaded, so nothing happens.
https://jsfiddle.net/ww582Lj9/
function myHandler(e) {
if($(this).attr("value")=="1"){
$("#sudandetails").css("display","block");
$("#countries").prop('required',true);
$("#bcfrom").prop('required',true);
$("#bcto").prop('required',true);
$("#country_reason").prop('required',true);
}
else {
$("#countries").prop('required',false);
$("#countries").val("");
$("#bcfrom").prop('required',false);
$("#bcfrom").val("");
$("#bcto").prop('required',false);
$("#bcto").val("");
$("#country_reason").prop('required',false);
$("#country_reason").val("");
$("#sudandetails").css("display","none");
}
}
$(document).ready(myHandler);
$("#sudaner input[type='radio']").on("click", myHandler);

You need to hide this div initially. add this line in you script
$("#sudandetails").hide();
You bind an event on click and when page load click event not trigger.

Unable to check a checkbox via javascript

I have a form on a page, with a checkbox input field. I also have a table on the page with a column that has true/false values. Each row in the table also has a checkbox with id="selectedReviewTypeYear". There is also a button with id="getDataToEdit".
When the getDataToEdit button is clicked, the javascript checks to see if any id="selectedReviewTypeYear" boxes are checked. If a box is checked, a div is opened up with form fields prepopulated based on the row selected. If no boxes are checked, the div remains hidden.
My problem is that the checkboxes aren't getting checked when the table data is "true." Here is the javascript:
$('#getDataToEdit').on('click', function (){
$('#reviewTypeTable').find('tr').each(function (){
var row = $(this);
if (row.find('input[id="selectedReviewTypeYearID"]').is(':checked')){
var idx = table.row(this).index();
var vReviewName = document.getElementById("editReviewTypeYear-name");
var vAllowMultiple = document.getElementById("allowMultiple");
var vAllowMultipleSpan = document.getElementById("allowMultipleSpan");
vReviewName.innerHTML = table.cell(idx, 2).data();
if (table.cell(idx, 3).data() == "true"){
$("#allowMultiple").prop("checked", true);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
else {
$("#allowMultiple").prop("checked", false);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
showHide.style.visibility = 'visible';
}
})
});
For testing purposes, I added a span element to the form called allowMultipleSpan. This was simply so I could see if the javascript is able to read the data in the table field, which it is. When I select a row, then click the button, the div opens up with the vReviewName.innerHTML populated correctly as well as the allowMultipleSpan populated correctly. However, the checkbox is not getting checked if the data is "true".
I am running JQuery 2.1.1. So far, I have tried using the following variations of the script, all with the same result:
From the JQuery (1.6+) spec:
$("#allowMultiple").prop("checked", true);
From the jQuery (1.5-) spec:
$("#allowMultiple").attr("checked", true);
From the Javascript spec:
document.getElementById("allowMultiple").checked = true;
Here is the HTML for my form:
<div class="widget-header"><h3>Edit: <span id="editReviewTypeYear-name" style="color: blue"></span></h3></div>
<div class="widget-content">
<form id="editReviewTypeYear-form" class="form-horizontal" url="submitReviewTypeYear.htm">
<div class="form-group">
<label class="col-sm-2 control-label">Allow Multiple: </label>
<div class="col-sm-10">
<input type="checkbox" id="allowMultiple" name="allowMultiple" />
<span id="allowMultipleSpan" style="color: blue"></span>
</div>
</div>
<div class="form-actions">
<button id="submitReviewTypeYear" type="submit">Save</button>
<button class="btn btn-small btn-warning reg-cancel" id="submitReviewTypeYear-cancel" type="button" name="Cancel" value="cancel">Cancel</button>
</div>
</form>
</div>

Have you tried if (table.cell(idx, 3).data() == true)?
You were always getting the false condition because you were comparing a boolean with "true" as a string.

adding three submit buttons inside a modal dialg box?

And my second question ,,
I have a simple modal box opening when I click on 'add users' . The modal box contains 3 submit buttons ( add, delete, and submit) . I have done this with the help of a javascript.
The html code is
<div id="overlay">
<div><a href='#' onclick='overlay()'>X</a>
<form action="" method="POST">
<table>
<tr>
<td style="width:120px;">
user<input style="width:100px;" name="u" type="text"/>
</td>
<td>
<input type ="submit" value = "add"> <input type="submit" value="delete"><br>
</td>
</tr>
<tr>
<td>
<select style="width:150px;">
<option value="abc">abc</option>
</select>
<br>
</td>
</tr>
</table>
</form>
<input type="submit" value="Submit"/> </div></div><a href='#' onclick='overlay()'>Click here to add user</a>
and my javascript is
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";}
now my task is to to add a user when user types a name in the text field and press a add button, the same user name should come in the drop down list and similarly if user selects one name from the dropdown list and press the delete button , it should delete that name .
And finally if he press the submit button then only the modal box should close and the datas will be shown on my main page..
I have just started doing my task and am planning to implement these functionality using php and some file operations .
My first question is as user first press the add button ,, it will close the modal window and that is not what i am required ( I guess you understand my requirement ) Is there any way to solve this? Please help this newbie Thank you.

You have to add eventsListeners to the button and prevent their default behave.
(function(){
var addButton = document.getElementById("add_btn");
var deleteButton = document.getElementById("delete_btn");
addButton.addEventListener("click", addUser, false);
deleteButton.addEventListener("click", deleteUser, false);
})();
function addUser(event) {
event.preventDefault();
var element = event.target;
var userNameInput = document.getElementById("user_text");
var userName = userNameInput.value;
var usersList = document.getElementById("users_list");
var user = document.createElement('option');
user.value = userName;
user.innerHTML = userName;
usersList.appendChild(user);
usersList.selectedIndex = usersList.length - 1;
userNameInput.value = "";
}
function deleteUser(event) {
event.preventDefault();
var usersList = document.getElementById("users_list");
usersList[usersList.selectedIndex].remove();
}
Here an example I wrote on jsFiddle of your code:
jsFiddle

Make your form submits using AJAX...default submit btn will refresh the page.
I assuming when you add/delete a user...you are actually saving them in the db.
1.When you press 'Add' btn...make an ajax call to the backend with the user details and save it and send a callback whether the user has been added successfully or not.
2. On the add user callback...you can call a function to update the drop-down list.

Display a pop-up on radio button click

Please let me know how to open a pop-up on click of a radio button using JQuery.
Currently Im using a the following code for a radio button using Spring MVC and JSTL
<label class = "">
<form:radiobutton path = "" value = "" onchange= ""/>
<label class = "" style = ""> <spring:message code ="" /></label>
</label>
Many Thanks

I am assuming you mean a new window by pop-up?
The following code will open a new window with the URL when the status of the radio button changes. You can use click if you like...
$("#pop").change(function() {
window.open("http://www.google.com");
});
<input type="radio" id="pop" value="yes">
JSFiddle Example

I hope this will solve your problem.
onchange= "window.open("http://www.stackoverflow.com",width=200,height=100); "/>
EDIT1: Removing the hide class does the trick.
jQuery:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
$('#r').removeClass("hide");
});
});
HTML:
<input type='radio'>SO
<div id="r" selectOption="#" class="modal hide" tabindex="-1" role="dialog" style=" background-color:#ccc; height: 100px;width: 350px"></div>
EDIT2:
If you check my html code, you will see an id for div named as "r" (unique selector) and class name "hide" prevent the div to be displayed. Therefore the div is hidden.
When the radio button is click, using removeClass we're removing the class "hide" this make the div visible.
Check this JSFiddle
Hope you understand.

you mean like this? CLICK HERE
HTML
<input type='radio' id='myRadio'>Radio button
JQuery
$(document).ready(function()
{
$('#myRadio').click(function()
{
alert("Clicked");
});
});