I have this jQuery that checks if the value of a text field (id_code) is similar to any of the available values in a select field (id_tipAux).
The user should not submit a value in the text input (code) similar to a value that already exists in the select field (types).
I am using SweetAlert.
Here is my jQuery code:
$('#frmCreateNew').submit(function(e) {
e.preventDefault(); // I prevent the post to submit before checking it
var codeExists = false;
var types = document.getElementById('id_tipAux');
var code = document.getElementById('id_code').value;
code = code.toUpperCase(); //select vals are all uppercase
console.log('Input : ' + code +);
var i;
for (i = 0; i < types.length; i++){ // iterate all the values of the select field
console.log(types.options[i].value);
if(code == type.options[i].value){ //checks if any of them is equal to the text input value
codeExists = true; //sets the var to true in order to prevent a submit
swal("The code already exists.", "Please type another code", "error");
}
}
if(codeExists == false) { //var is false so it allows to submit
swal("New type created!", {icon: "success",})
.then((value) => {
console.log(value)
$(this).submit() // the form is submitted and the infinite loop starts here
});
}
});
With this jQuery I tried to stop the submit if the user is sending a text input equal to any of the select field options. And it worked, but the problem comes when the user is sending an accepted value, it triggers an infinite loop because of $this.submit() since the method is waiting for a submit for frmCreateNew
You need to invoke the native form submission rather than the jQuery-wrapped one:
$('#frmCreateNew').submit(function (e) {
e.preventDefault();
var codeExists = false;
var types = document.getElementById('id_tipAux');
var code = document.getElementById('id_code').value;
code = code.toUpperCase(); //select vals are all uppercase
console.log('Input : ' + code + );
var i;
for (i = 0; i < types.length; i++) {
console.log(types.options[i].value);
if (code == type.options[i].value) {
codeExists = true; //sets the var to true in order to prevent a submit
swal("The code already exists.", "Please type another code", "error");
}
}
if (codeExists == false) { //var is false so it allows to submit
swal("New type created!", {
icon: "success",
})
.then((value) => {
console.log(value)
//$(this).submit() // the form is submitted and the infinity loop starts here
// Do this
this.submit();
});
}
});
I have the following code which checks if the values of inputs, textareas and selects are blank, but rather than making functions for each I've tried to store them all into one variable using an array.
But, when the click handler is activated, something is causing the error message to appear even when all inputs on the page are filled in.
Anyone know what might be causing this?
HTML:
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('input'), $('textarea'), $('select') ];
var $emptyFields = $fields.filter(function() {
return $.trim(this.value) === "";
});
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
Replace this.value with this.val()
Try the following ...
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('input'), $('textarea'), $('select') ];
var $emptyFields = $fields.filter(function(element) {
return $.trim(element.val()) === "";
});
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
you should be getting the value of array elements
You have two problems.
first : Jquery selectors. You've taken array of elements. $('input') gives you nodelist of all the inputs. you need to specify index of input you want to access value. for example $("input")[0] gives you first input found on your page.
second : You need to pass item to filter callback function. inside callback of filter this refer to window.
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('input')[0], $('textarea')[0], $('select')[0] ];
var $emptyFields = $fields.filter(function(ele) {
console.log(ele.value);
return $.trim(ele.value) === "";
});
if (!$emptyFields.length) {
//saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input : <input type=""><br>
TextArea: <textarea></textarea><br>
Select: <select><option value="1">A</option></select>
<button id="saveInvoice">Save</button>
</form>
I want to improve my form contact using jQuery. I want to clear input fields after clicking and show placeholders values on submit button. I have placeholders in my input fields and want to load them into variable and show them after ajax post method.
<input type="text" name="name" placeholder="Name" data-error="Please write name">
and jQuery code:
form.on("submit", function(e) {
e.preventDefault();
var hasErrors = false;
$('div.error_message').remove(); // Remove any old errors when submitting the form
fields.each(function(i, elem) {
var field = $(elem),
empty = $.trim(field.val()) === "",
errors = field.data("error");
if (empty) {
hasErrors = true;
field.after('<div class="error_message">' + errors + '</div>'); // add new error messages
field.toggleClass("form_error", empty);
}
});
if (!hasErrors) {
var formData = $(this).serializeArray();
$.post(form.attr("action"), formData, function(data) {
console.log(data, true);
$(".przycisk").on("click", function() {
var placeholder = $("input[placeholder]");
console.log(placeholder);
$("input, textarea").val(placeholder);
});
} else {
}
return false;
});
you have to say wich attribute from input do you want to use.
in jquery is so: .attr('attributeName')
now you can select your any attribute (like placeholder)
change your code like this:
$("input, textarea").val(placeholder.attr('placeholder'));
see my code here :
https://codepen.io/miladfm/pen/ZyOEWX
I have created a form using bootstrap and am using javascript for form validation and then a php script to grab the post data and display it
the basic structure is the following and I have made this as minimal as I could to address this specific issue. The issue I am having is that the script to check for the form validation works perfectly in the <script> tags at the end of the body, but instead of preventing the page from being submitted as it should it still processes to the next page with the form's contents that are being made through the php post action when the form is indeed not filled out correctly.
Why is this? Should the form validation still not stop the page from moving on to the post data since the validation is returning false if the form has not been submitted correctly. All the form validation alerts pop up correctly and I;m getting no console errors after checking, or do I need to perform an additional check to only process the post data if the form is valid?
<html>
other tags.....
<body>
<form name = "OrderForm" action = "process_order.php" onsubmit = "orderbutton" method = "post">
a bunch of content, divs, checkboxes, etc
</form>
</body>
<script>
function CheckForm() {
var Name = document.getElementById("Name");
var fries = document.forms.OrderForm.FryRadio;
var fryyes = fries[0].checked
var fryno = fries[1].checked
var bool = true;
if ((Name.value == "" || Name.value == "Name") || (!(document.getElementById("SandwichRadio").checked || document.getElementById("WrapRadio").checked))) {
bool = false;
}
else if (!(fryyes || fryno)) {
bool = false;
}
if (!(bool)) {
alert("Please fill out all of the required fields.");
return false;
}
else {
alert("Your order is being submitted");
console.log("Submitted")
}
};
</script>
</html>
You should call function on submit , I dont know what are you doing with current onsubmit='...'
So use following, call function when you submit the form.
<form name = "OrderForm" action = "process_order.php" onsubmit = "return CheckForm()" method = "post">
a bunch of content, divs, checkboxes, etc
</form>
For demo : Check Fiddle
first of all what you can do is:
you do not need the !fryes in another if statement:
you can do it also in the first if:
if ((Name.value == "" || Name.value == "Name") || (!(document.getElementById("SandwichRadio").checked || document.getElementById("WrapRadio").checked)) || ( (!(fryyes || fryno))) {
bool = false;
}
also what you can do is if bool is false, disable your submit button if there is any?
you can also do an onchange on the texboxes, that way you can validate each text box or checkbox one by one. and have the bool true and false?
I did something like this on jquery long time ago, for validation, where I checked each texbox or dropdown against database and then validate, aswell..
The code is below
<script>
$(document).ready(function(){
var works=true;
//Coding for the captcha, to see if the user has typed the correct text
$('#mycaptcha').on('keyup',function(){
if($('#mycaptcha').val().length>=5){
$.post("user_test/captcha_check.php",
{
// userid: $("#userlogin").val(),
mocaptcha: $("#mycaptcha").val(),
},
function(data,status){
if(data==0){
document.getElementById("final_error").innerHTML="Captcha did not match";
works=false;
}
if(data==1){
works=true;
document.getElementById("final_error").innerHTML="";
}
});
}
});
//Works like a flag, if any mistake in the form it will turn to false
//Coding the submit button...
$('#submitbtn').on('click',function(){
var arrLang = [];
var arrPrf = [];
uid = $("#userid").val();
capc = $('#mycaptcha').val();
pwd = $("#pwd1").val();
fname = $("#fname").val();
lname = $("#lname").val();
email = $("#memail").val();
pass = $("#pwd2, #pwd1").val();
daysel = $('#dayselect').val();
monthsel = $('#monthselect').val();
yearsel = $('#yearselect').val();
agree_term = $('#agree_box').prop('checked');
//checks if the textboxes are empty it will change the flag to false;
if((!uid) || (!capc) ||(!fname) || (!lname) || (!email) || (!pass) || (!daysel) || (!monthsel) || (!yearsel) || (!agree_term)){
works=false;
}
if(!works){
document.getElementById('final_error').innerHTML ="<font size='1.3px' color='red'>Please fill the form, accept the agreement and re-submit your form</font>";
}
else{
works=true;
//A jquery function, that goes through the array of selects and then adds them to the array called arrLang
$('[id=lang]').each(function (i, item) {
var lang = $(item).val();
arrLang.push(lang);
});
//A jquery function, that goes through the array of select prof and then adds them to the array called arrprf
$('[id=prof]').each(function (i, item) {
var prof = $(item).val();
arrPrf.push(prof);
});
var data0 = {fname: fname, mlname : lname, userid : uid,password:pwd, emailid : email, mylanguage : arrLang, proficient : arrPrf, dob : yearsel+"-"+monthsel+"-"+daysel};
//var json = JSON2.stringify(data0 );
$.post("Register_action.php",
{
// userid: $("#userlogin").val(),
json: data0,
},
function(data,status){
if(data==1){
//alert(data);
window.location = 'Registered.php';
}
document.getElementById("userid_error").innerHTML=data;
});
}
});
//to open the agreement in a seperate page to read it..
$("#load_agreement").click(function () {
window.open("agreement.html", "PopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
});
//A code that loads, another page inside the agreement div
$( "#agreement" ).load( "agreement.html" );
//This part here will keep generating, duplicate of the language and profeciency box, incase someone needs it
$('#Add').click(function(){
//we select the box clone it and insert it after the box
$('#lang').clone().insertAfter("#lang").before('<br>');
$('#prof').clone().insertAfter("#prof").before('<br>');
});
//this part here generates number 1-31 and adds into month and days
i=0;
for(i=1; i<=31; i++){
$('#dayselect').append($('<option>', {value:i, text:i}));
if(i<=12){
$('#monthselect').append($('<option>', {value:i, text:i}));
}
}
//this code here generates years, will work for the last, 120 years
year=(new Date).getFullYear()-120;
i = (new Date).getFullYear()-16;
for(i; i>=year; i--){
$('#yearselect').append($('<option>', {value:i, text:i}));
}
//Regex Patterns
var pass = /^[a-z0-9\.\-\)\(\_)]+$/i;
var uname = /^[a-z0-9\.\-]+$/i;
var mname = /^[a-z ]+$/i;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
//When the Last Name texbox is changing this will be invoked
$("#fname").keydown(function(){
//comparing the above regex to the value in the texbox, if not from the box then send error
if(!mname.test($("#fname").val())){
//fill the textbox label with error
document.getElementById("fname_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid FirstName</font>";
$("#fname").css("border-color","rgba(255,0,0,.6)");
works=false;
}
else{
$("#fname").css("border-color","rgba(0,255,100,.6)");
document.getElementById("fname_error").innerHTML="";
works = true;
}
});//end of fname onchange
//When the Last Name texbox is changint this will be invoked
$("#lname").keydown(function(){
//comparing the above regex to the value in the texbox
if(!mname.test($("#lname").val())){
//fill the textbox label with error
document.getElementById("lname_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid LastName</font>";
$("#lname").css("border-color","rgba(255,0,0,.6");
works=false;
}
else{
$("#lname").css("border-color","rgba(0,255,100,.6)");
document.getElementById("lname_error").innerHTML="";
works = true;
}
});//end of lname on change
//When the userid textbox is chaning,this will be invoked
$("#userid").keydown(function(){
//comparing the above regex to the value in the texbox
if(!uname.test($("#userid").val())){
//fill the textbox label with error
document.getElementById("userid_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid UserId</font>";
$("#userid").css("border-color","rgba(255,0,0,.6");
works=false;
}
/*
else if($("#userid").val().length<4){
//fill the textbox label with error
document.getElementById("userid_error").innerHTML="<font color='red' size='2px' family='verdana'>Minimum user length is 4</font>";
$("#userid").css("border-color","rgba(255,0,0,.6");
//disable the submit button
//$('#submitbtn').attr('disabled','disabled');
works=false;
}
*/
else{
$("#userid").css("border-color","rgba(0,0,0,.3)");
$.post("user_test/user_email_test.php",
{
// userid: $("#userlogin").val(),
userid: $("#userid").val(),
},
function(data,status){
document.getElementById("userid_error").innerHTML=data;
});
works = true;
}
});//end of change
//When the userid textbox is chaning,this will be invoked
$("#memail").keydown(function(){
//comparing the above regex to the value in the texbox
if(!emailReg.test($("#memail").val())){
//fill the textbox label with error
document.getElementById("email_error").innerHTML="<font color='red' size='2px' family='verdana'>Invalid Email</font>";
$("#memail").css("border-color","rgba(255,0,0,.6");
works=false;
}
else{
works = true;
$.post("./user_test/user_email_test.php",{
useremail: $("#memail").val(),
},
function(data,status){
document.getElementById("email_error").innerHTML=data;
$("#memail").css("border-color","rgba(0,255,0,.3)");
works = true;
});
}
});//end of change
//When the userid textbox is chaning,this will be invoked
$("#pwd2").keyup(function(){
//checking length of the password
if($("#pwd2").val().length<10){
document.getElementById("pwd_error").innerHTML="<font color='red' size='2px' family='verdana'>Please enter a password minimum 10 characters</font>";
//$('#submitbtn').attr('disabled','disabled');
$("#pwd1, pwd2").css("border-color","rgba(0,255,100,.6)");
works=false;
}
//checking if the password matches
else if($("#pwd1").val()!=$("#pwd2").val()){
document.getElementById("pwd_error").innerHTML="<font color='red' size='2px' family='verdana'>Passwords do not match</font>";
//$('#submitbtn').attr('disabled','disabled');
works=false;
$("#pwd1, pwd2").css("border-color","rgba(0,255,100,.6)");
}
else{
$("#pwd1, #pwd2").css("border-color","rgba(0,0,0,.3)");
document.getElementById("pwd_error").innerHTML="";
//comparing the above regex to the value in the texbox and checking if the lenght is atleast 10
if(!pass.test($("#pwd2").val())){
//fill the textbox label with error
document.getElementById("pwd_error").innerHTML="<font color='red' size='1px' family='verdana'>Your password contains invalid character, Please use: a-z 0-9.( )_- only</font>";
$("#pwd1, #pwd2").css("border-color","rgba(255,0,0,.6");
works = false;
}
else{
$("#pwd1 , #pwd2").css("border-color","rgba(0,255,100,.6)");
works = true;
}
}
});//end of change
});//end of document ready
</script>
I have a bool property in my model. Its value is false when rendering the view. But when I submit the form, the value of TRUE is being passed to the controller. I am using a custom js function to get the values from the form to submit to a controller action. I am not sure how to get the correct value from the checkbox.
My model property:
public bool RushOrderFlag { get; set; }
The view markup:
#Html.EditorFor(model => model.RushOrderFlag)
The HTML Rendered:
<input class="chkbx" data-val="true" data-val-required="The Rush? field is required." id="RushOrderFlag" name="RushOrderFlag" type="checkbox" value="true">
<input name="RushOrderFlag" type="hidden" value="false">
My JS function
function GetFilterCriteria() {
var Criteria = {};
$('#frmCriteria input').each(function () {
Criteria[this.name] = $("#" + this.name).val();
});
return Criteria;
};
Even if in the console I put $('[name="RushOrderFlag"]').val(), after clicking the check box on and off, it is always returning true.
What am I doing wrong?
try
function GetFilterCriteria() {
var Criteria = {};
$('#frmCriteria input').each(function () {
Criteria[this.name] = false;
if ($("#" + this.name).is(':checked'))
Criteria[this.name] = true;
});
return Criteria;
};
Thanks all for the hints...in the end it had to be a bit more complex due to the way the razor creates 2 input controls for the checkbox. So here is what I had to do:
function GetFilterCriteria() {
var Criteria = {};
$('#frmCriteria input').each(function () {
if ($(this).attr('type') != 'hidden') {
if ($(this).attr('type') == 'checkbox') {
Criteria[this.name] = this.checked;
} else {
Criteria[this.name] = $("#" + this.name).val();
}
}
});
return Criteria;
};
I don't like it because if I ever want a hidden input, this will skip that. But for now it works. I find it hard to believe that it has to be this difficult :(
you can try using .CheckBoxFor() you will get an input element only.
for the checked property you can use:
$('#CurrentMailTemplateEnabled').get()[0].checked
to get the value by getting the DOM element first. At least that worked for me.