creating custom logic for focusing html elements while validating form - javascript

I have been stuck in somewhere around validating the form. I have a nice 10-11 fields in
my .cshtml page in MVC. Those fields are using data anotations from model and here I
am using client side validations using jquery and unobtrusive javascript. So, validations
are firing up very good on submit but we need to implement a logic where a user will click on the
submit button but the page will automatically drags the user to the location of mandatory field.
Assume that all 11 fields in my form are mandatory. user has filled the first two and
left the third blank .So on submitting the form, the cursor should focus to that control
with the validation message.Due to the length of the page, it should be scrolling up and down
accordingly. And if suppose only first two fields are filled and others are empty,
the validation message should show the 3rd field with the focus on control and then
if user filled the 3rd field and hit save, it should focus to the fourth field.
On one instance it looks easy and I am trying it with following code snippet on click of submit button.
AS this is the class which mvc uses when validation fires, I select element from the first class like below:
var element = $('#' + $('.input-validation-error:first').attr('id'));
once I get the element then I am using the below code:
if (element.selector !== '#undefined') {
// The class "RequiredFeildDropdown" is applied to the control so that I can
check if that is kendo dropdown and I should focus to that kendo control of the element.
if (element.hasClass("RequiredFeildDropdown")) {
element.data("kendoDatePicker").element.focus();
}
// This class "RequiredFeildDate" has been applied to check whether the kendo control is datepicker
so that I can focus it.
else if (element.hasClass("RequiredFeildDate")) {
element.data("kendoDropDownList").focus();
}
// So here comes the real problem.The primaryaddressData contains the collection
of objects. Actually my page also consists of some table elements that i have created using for loop.
So, while validating , if primaryaddressData.length have count < 1, this div should show.Actually there should
be atleast one primary address. The div which have table elemets is "primaryaddressErrorMessage"
else {
if (primaryaddressData.length >= 1) {
$("#primaryaddressErrorMessage").hide();
} else {
$("#primaryaddressErrorMessage").show();
$('html,body').animate({
scrollTop: $("#primaryaddressErrorMessage").offset().top
}, 'slow');
isValid = false;
}
element.focus();
To make more clear of the second portion,My page also has a div called "primaryaddressErrorMessage" which I have described above
<div class="common-box padding25 ">
<span id="primaryaddressErrorMessage" class="margin-btm30" style="display: none; color: #ce3a36; font-size: 11px; font-family: 'signikaregular', Arial">Primary Addressed are required.</span>
#{Html.RenderPartial("~/Areas/Admin/Views/Common/_AddressPartial.cshtml", Model);}
</div>
So, This partialview has a set of controls which user uses to add primary address.
When this partial view loads, by using ajax request, I check from database
If this user has atleast one primary address,If yes, I keep its count it
"primaryaddressData"=1 and so when user submits a new primary address,
after an post request to controller, I get the primary address count from
database and again set "primaryaddressData"= count that I get from database through Json.
As this "primaryaddressData" is global, when user hits save from the main page i.e from the main
view which was containing the above partialview, I check the length of
"primaryaddressData" and if is having less than one, I will have to focus to
this span having id="primaryaddressErrorMessage"
I am going very hard through this. There might be someone who has also faced this problem in past. So, it could be a duplicate question but I asked it for this particular scenario. Please let me know if some more explanation is required.

Related

Preventing Apex Button Double click

Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.

Passing Variables to Bootstrap Modal and Passing Them BACK

The variable data passed to a Bootstrap modal is hard coded in HTML data-text element field using "data-text" (according to the Bootstrap examples). If the modal's purpose is to allow a user to change that, then how do I send that back to the raw HTML data-text to update it for next time?
JS newbie here. I got Bootstrap 4 modals working and updating back to the server by Ajax (with a lot of Googling of StackOverFlow thanks!). I have about 100 text elements on the page which all load the same modal for editing of the clicked text field. The field initial value is hard coded into the page HTML in the data-text field (following the Bootstrap modal example). This allows passing of the current text value to pre-populate the modal field with the existing text value for editing.
Next, the user edits the note field in the modal and clicks submit. I am able to get the value and pass it back to the server, and update the DOM with the new edited value on the page, and everything works and looks great! So far so good.
Now here's the problem. Since I have not been able to figure out how to change the data-text field (which is hard coded in the page HTML), the screen (DOM) updates with the new value after submit correctly, but the data-text field of the element does not update. It is still the old value. It means the NEXT time I click to edit the text, the OLD value of the text field is pre-populated in the modal for editing.
Question: how do I update html data-text field by JS?
I have researched this problem at great length and without Stack Overflow I would never be able to get it working, so much appreciate you guys. Dozens of questions about passing variable TO Modals, but very few about passing the data back, and NONE about setting data-text on submit by JS.
text element definition example. This is a slightly simplified example. The text field contains some data from the server database, HTML is generated by PHP/MySQL. (1 out of 100 elements on page):
<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>
Here is the JS on submit code. Everything works except for the last line where I am trying to change the "data-note" field of the element:
function note_submit(element) {
var note = document.getElementById('message-text').value;
ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
noteElement = document.getElementById('note_12345678');
noteElement.innerText = note ; // Updates the DOM with submitted note.
noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}
Everything is working fine up to that last step. Clicking the text field opens modal, pre-loads the text for editing, allows the user to edit, click submit sends to server by Ajax for update, DOM note on screen is updated by JS. if I RELOAD the page, it loads the new edited text value from server db. Everything working great. Lots of joy.
Problem is NEXT time I click on the text element to edit it, the modal loads the OLD value from data-note hard coded into HTML. How to update it upon submit by JS? Thanks a million for any assistance. So close.
Updated: page is loading jquery-3.3.1.js, and bootstrap/4.0.0/js/bootstrap.min.js. Browser is FF V66.

How to use Popover inside a Angularjs function

My problem is pretty weird and unique. I will do my best to explain my situation here.
I have a form validation. Once user fills form and selects add button, it allows to add for first 6 times. After 6th submission, the add button is disabled and user is not allowed to add any further.
Here is the add button function
$scope.addItem = function () {
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
// here is the code below where i want to insert my popover function.
}
}
Can anyone please let me know how to insert a popover like this at run time. Please note: i dont want to show a popover straight away as the page loads and user selects the button. I want to show it only after User has submitted 6 forms. The number of times the user submitted is shown in $scope.items.length
I just want to display something back to the user that he cannot add any more. I tried using a modal but i thought popover would be much better. Any suggestions are welcome.....
There's a ton of ways to do this. If your popover exists statically in the dom, you could just trigger it with the same scope boolean you're using to disable the button with the ng-if directive:
<div class="popover" ng-if="disabledAdd">No more forms allowed<div/>

Reset values in a particular table which are edited on click of Reset button

On a HTML page I have three sections with 3 tables. Each table has its own Reset button which should reset only the sections it is required to. Unfortunately, I have used the same form for all the three and there is lot of change to be made if 3 seperate forms are created.
Is there a way to reset only a particular section of the page in this way?
form.reset() is built in to the browser, so it's behaviour cannot be amended.
An alternative is to write your own code in javascript to reset the fields of each table, like this:
function resetInput1(e){
document.getElementById('input1').value = document.getElementById('input1').defaultValue;
}
function resetInput2(e){
document.getElementById('input2').value = document.getElementById('input2').defaultValue;
}
document.getElementById("btn1").addEventListener('click', resetInput1, true);
document.getElementById("btn2").addEventListener('click', resetInput2, true);
Example fiddle here
here u can write a javascript method to reset all the elements available in your section and call the function on click on the reset button, using form.reset will reset the whole form.
otherwise you can have multiple form on a page and place your reset button inside each and reset.
If you are using .net you cannot have multiple forms on same page. for this you will have to disable/ hide the other forms.
// AFTER YOUR COMMENTS TO MY POST
here u can store the default values in hidden fields means my each element will be having a hidden field, where the default value will be stored.
when a user changes any text in textbox, change index in drop down, unselect some checkboxes, etc, and hits reset button
you will call a javascript function which will set the values from the hidden fields back to the respective controls. This will save your round-trip with the server to fetch the default details back from the database.
otherwise u can use ajax methods to rebind the default values to the element on html form.
I m particularly mentioning Ajax methods here because, if we post back the webpage again it will reset all your values in the other sections.
Hope it is a clear explanation.

Disable search button if there's no input and hide search table if the page loads first time

I am creating a JSP page which has few fields for searching.
I am facing 2 issues.
1) The search button should be disabled until at least one field is not empty. The form has mixed type of fields(few text boxes, drop downs, etc). I have tried few things but the button is not disabling.
2) Second issue is the search result is being displayed in the same page. I am displaying the search result in a table inside a div. I am trying to hide this table until the user doesn't click on search. I have tried doing this by setting a flag in my controller but it's not working.
I have tried using javascript and JQuery for these but for no avail. Pls help!!
Edit 1:
I have used something like:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
But when I'm using this, the drop downs are not being populated with model object.
$('#yourFormId > *').filter(':input[value!=""]').length will return the number of form fields that are not empty.
Im not sure what you want to do with the table though, seems like you should just be able to set display:none on the table and use the jQuery css function to change it when the user clicks.
Posting a code sample would help :)

Categories

Resources