We Keep Coding

Compare duplicate values of two select in materializecss framework

I have two select boxes and i dont want that the user choose the same value in both.
I've tried some solution proposed on stack, but the materialized select is different from "normal select" as contains the options in list item elements.
However, i came up with a solution, which is all but elegant, i know..im a novice with these things.
But its not working as i intended.
I want to create an additional method for jquery validation plugin, in the example on fiddle i've inserted an additional field to show the error placement.
I think is pretty simple, but i just can't figure out how to do it...
$.validator.addMethod("checksameval", function(value, element) {
return $('#pref1').val() == $('#pref2').val()
}, "Pref1 and Pref2 cant have same value!");
https://jsfiddle.net/L24otmaa/5/
edited with custom method (still not working..)

The problem with your solution is that the form will still be valid and therefore it will be possible to send it anyway.
You have to add a custom validation. The plug-in offers a callback where you can check whatever you want before you finally submit it.
This can be done by adding your validation to a custom submit handler
var isSameValue = function() {
var val1 = $('#pref1').val();
var val2 = $('#pref2').val();
if (val1 == val2) {
$customErrorDiv.text('error you cant select same value twice!!');
return true;
}
$customErrorDiv.text('');
return false;
}
// check also on runtime
$('.course').change( function() {
isSameValue();
});
$("#application").validate({
// check before submitting
submitHandler: function(form) {
if (isSameValue()) {
return;
}
// submit the form manually
form.submit();
}
});
Fiddle: https://jsfiddle.net/7uhkddrx/
Documentation: https://jqueryvalidation.org/validate/
Of course you would have to style this message according to your needs.
EDIT: By the way: currently your select boxes are not set to be required.
EDIT2: added checking on runtime

How do I get the values I submitted on a form and pass it onto my modal

I have a form in my jsp wherein I enter a value. This is then inserted into a table on my database. However, I would like to ask the user first to confirm his submission. I used this:
function askConfirmation() {
var confirmSubmission = confirm("Do you wish to add this entry?");
if(confirmSubmission) {
return true;
} else {
return false;
}
}
Although this does the task of suspending submission, it's not quite what I had in mind. I tried using a modal but I don't know how to get the values I used from my EL and place it in the modal after the button click. How do I do this?

I am not quite sure how you have your form inputs setup, but you can pass an object representing all your form inputs as an argument into askConfirmation() function and then pass that to confirm(). This will display to the user all the information in the form. Eg.
function askConfirmation(formInput) {
var confirmSubmission = confirm(formInput);
if(confirmSubmission) {
return true;
} else {
return false;
}
}
So in this way, you can access members/fields in the object and format them accordingly. You can also use jquery dialog() function to achieve this if you don't like the lnf of the window. The bottomline is, just pass the object that represents your inputs value into whatever that is used in displaying to the user for further confirmation. Hope this helps!

As Felipe T mentioned your values are already rendered you just need to get them with javascript here's an example using bootstrap modal https://jsfiddle.net/tf021so9/6/
-
However, I prefer using a confirmation dialog plugin in such cases like this one :https://myclabs.github.io/jquery.confirm/
-

Assigning value of field from JavaScript in Oracle Apex

I am trying to implement JavaScript in header of page of Oracle APEX application.
Fields in the form by default are going to be disabled if customer data exists but it can be trigger to edit mode by clicking on button 'Unlock'. By clicking button EnableItems() is run, but form is not resubmitted it is just js function that run.
function DisableItems()
{
$x_disableItem('P31_TITLE',true);
}
function EnableItems()
{
$x_disableItem('P31_TITLE',false);
}
If form is empty then all fields should be available to edit.
In Javascript >> Execute when Page Loads
I have
PageStart();
Now I need third piece of code so page would know if I want to load Enable or Disable mode. To do that I have
function PageStart(){
if ($x('P31_TEST2').value == "") {
EnableItems();
}
else {
DisableItems();
}
}
The difficulty is in second line of this code where I need to put some flag to assign value to a field or gather value from Apex field which would trigger either first or second function however I am not quite sure what would be the best practice to go around it. Any thoughts highly appreciated.

P31_START_ENABLED: hidden item, value protected = No. Provide the starting value.
For example, here the value is either 'Y' or 'N' to indicate enabled Y/N
function PageStart(){
if($v("P31_START_ENABLED")=='Y') {
EnableItems();
} else {
DisableItems();
};
};
function DisableItems()
{
$s("P31_START_ENABLED", 'N');
$x_disableItem('P31_TITLE',true);
};
function EnableItems()
{
$s("P31_START_ENABLED", 'Y');
$x_disableItem('P31_TITLE',false);
};

Returning a value to another function

I am new to jQuery. I have created a form where I hide some fields. I have created a function on the click of a button field. Here in this function definition I unhide the hidden fields one being my text field and another a button. I code that I use is:
finishOrder: function() {
document.getElementById("create-pwd").style.display = "block"
document.getElementById("finish-ok").style.display = "block" // this is my another button
// do further processing
},
Now on the click of another button (please see the comment "this is my another button") I call another function like this:
FinishcheckPassword: function() {
var pas = document.getElementById("pos-password")
var user = new db.web.Model("res.users").get_func("read")(this.session.uid, ['password']).pipe(function(result) {
if(pas.value == result.password){
return true
});
},
After the if condition returns true value, I want to the control to be transferred to the first function where I can do further processing. Is it possible, if yes how can this be achieved? Any help will be appreciated.

Sure, something like this:
$('#finish-ok').click(function(){
if(FinishcheckPassword()){
finishOrder();
}
}
Of course, this is probably not exactly the right code for you. The fact that you are assigning all your functions with : rather than = suggests that they are inside of some larger object. Therefore, they'd have to be called like myObject.finishOrder(). But the general approach of what I wrote above will work.
As a couple side notes, you have tagged the question with jQuery and refer to it in your post, but there isn't actually a single line of jQuery in your code.

What's the easiest way to do form validation for jQuery?

All I want to do is to check if the textfield has been changed. If not, I want to highlight the boxes when submit is pressed. How do I do that? Seems very simple, but not sure why every other solution is so complicated.

Building upon Pim's answer, you can associate the changed flag for each text field using jQuery's data API.
// initially, assign changed to false for all text fields
$("input:text").data("changed", false);
// if any field changes, set its changed flag to true
$("input:text").change(function() {
$(this).data("changed", true);
}
// finally on submission, get all text fields that did not
// change by checking their "changed" property
var unchangedItems = $("input:text").filter(function() {
return $(this).data("changed") === false;
});

You can use the jQuery Validate plugin.

Bassicly, you just say it has never been changed, and when it cahnges, you set a flag saying is has been changed:
var changed = false;
$('#textfield').change(function(){
changed = true;
});
if(changed){
$('.textbox').each(function(){
$(this).addClass('.highlighted');
//or something like this, whatever you want to do to highlight them
});
}