We Keep Coding

The JavaScript function does not apply to the form and the confirmation button

The JavaScript function does not apply to the form and the Submit button in HTML
The 'js' file is inside another folder
I also did the link to the 'js' file correctly
function check_pass() {
if (document.getElementById('password').value == document.getElementById('passwordconfirm').value) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
}
<form name="cForm" id="cForm" method="post" action="php/save.php">
<fieldset>
<div class="form-field">
<input name="username" type="text" id="username" class="full-width" placeholder="نام کاربری" value="">
</div>
<div class="form-field">
<input name="email" type="email" id="email" class="full-width" placeholder="ایمیل" value="">
</div>
<div class="form-field">
<input name="password" type="password" id="password" class="full-width" placeholder="پسوورد" value="" onkeyup="check_pass();">
</div>
<div class="form-field">
<input name="passwordconfirm" type="password" id="passwordconfirm" class="full-width" placeholder="تکرار پسوورد" value="" onkeyup="check_pass();">
</div>
<button type="submit" id="submit" class="submit button-primary full-width-on-mobile" disabled>ثبت</button>
</fieldset>
</form>

Dynamically target specific DIV´s with unique ID in Ajax

Say that I have more than 100 forms on one page (I know it is a lot, but neccesary in this matter) and I have a Ajax that submit each forms without reloading the page it is in, and Show/Hide a DIV on callback from jQuery on success and error, how do I:
1 : Target the specific DIV ID in the jQuery
2 : Make sure that it submit the specific form and only this form (not validating on required fields from other forms)
JS Code:
<script>
$("form").on("submit", function(e) {
var dataString = $(this).serialize();
let response_div = $("[id^='response_div_']")
$.ajax({
type: "POST",
url: "update_userdata.asp",
data: dataString,
success: function() {
response_div.html("<div id='message' style='background-color: #28a745;'></div>");
$("#message")
.html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
.hide()
.fadeIn(1500, function() {
$("#message").append(
""
);
});
}
});
e.preventDefault();
});
</script>
HTML:
<div id="response_div_initials_1">
</div>
<form name="Initials2" id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_EconomyColumns_1">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_initials_2">
</div>
<form name="Initials2" id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_EconomyColumns_2">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
I tried different variations of $("[id^='response_div_']") but havent had success with any attempts I have tried.

If you have 100+ form, I would suggest event delegation for one event listener listens multiple forms.
If those response_div_ are just for displaying message to a specific form, but not for storing data, I suggest you to not setting a unique id to them. Instead, I move the response div under the form and set it with form_response class so you know which div to update.
I also put the styling into <style> so you don't need to handing css inside the script.
I usually don't write html within string literal. To have a icon after the response message, you can offload it to CSS which makes your script neater. Check the form_response::after style. Font awesome has an article on that.
p.s. you need to fix the submit button and form name. There are 2 EconomyColumns1 and Initials2 form.
$('html').on('submit', 'form', function(e) {
e.preventDefault();
var dataString = $(this).serialize();
// obtain the submitting form with e.currentTarget
// then search the tree down for div with class form_response
let responseDiv = $(e.currentTarget).children('div.form_response');
$.ajax({
type: "POST",
url: "https://6049aeb7fb5dcc001796a5ad.mockapi.io/foobar", // mock api for testing
data: dataString,
success: function() {
$(responseDiv)
.html("Løn Information er nu opdateret")
.hide()
.fadeIn(1500, function() {
// what is this line for?
$("#message").append("");
})
// wait 5 second
.delay(5000)
// fade out
.fadeOut(1500);
}
});
});
.form_response {
display: none;
background-color: #28a745;
color: white;
}
.form_response::after {
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 900;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>

This is what you want...?
the HTML
<h2>Form 1</h2>
<form>
<div class="message"></div>
<input type="text" name="name-a">
<button type="submit">Submit</button>
</form>
<h2>Form 2</h2>
<form>
<div class="message"></div>
<input type="text" name="name-b">
<button type="submit">Submit</button>
</form>
then jQuery
$('form').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
let msgBox = $(this).find('.message');
$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("Put your html message here that will display according to the submited form");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});
});
and some CSS
.message {
border: 1px solid red;
padding: 4px;
text-align: center;
width: 100px;
margin: 4px;
display: none;
}
the working demo https://jsfiddle.net/jozsefk/1yw7c9x3/ Please note, that this is just an example to show you how to do it and you must adapt this to your code.
Also this will display your input name and value if exists based on a form submited.

Here is the code I have last tried:
<div class="message" style="background-color: #28a745;"></div>
</div>
<form name="Initials1" id="Initials1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials1" value="Submit">Send</button>
</fieldset>
</form>
<script>
$('form').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
let msgBox = $(this).find('.message');
$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("<p>Hello World!</p>");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});
});
</script>
The message CSS from you is still in the doc aswell

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.

Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');

Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>

I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

Form is not submitting due to JavaScript validation

I have created a HTML form, but my form entries are not submitting due to my JavaScript form validation. Here is my HTML and JavaScript:
jQuery("#template-jobform").validate({
submitHandler: function(form) {
jQuery('.form-process').fadeIn();
jQuery(form).ajaxSubmit({
success: function() {
/*jQuery('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));*/
//target: '#job-form-result',
if (data.indexOf("ocation:") > 0) {
window.location = data.replace("Location:", "");
} else {
$('#job-form-result').html(data)
$('.form-process').fadeOut();
jQuery(form).find('.sm-form-control').val('');
jQuery('#job-form-result').attr('data-notify-msg', jQuery('#job-form-result').html()).html('');
SEMICOLON.widget.notifications(jQuery('#job-form-result'));
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="include/jobs.php" id="template-jobform" name="template-jobform" method="post" role="form">
<div class="form-process"></div>
<div class="col_half">
<label for="template-jobform-fname">First Name <small>*</small>
</label>
<input type="text" id="template-jobform-fname" name="template-jobform-fname" value="" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-lname">Last Name <small>*</small>
</label>
<input type="text" id="template-jobform-lname" name="template-jobform-lname" value="" class="sm-form-control required" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-jobform-email">Email <small>*</small>
</label>
<input type="email" id="template-jobform-email" name="template-jobform-email" value="" class="required email sm-form-control" />
</div>
<div class="col_half">
<label for="template-jobform-age">Age <small>*</small>
</label>
<input type="text" name="template-jobform-age" id="template-jobform-age" value="" size="22" tabindex="4" class="sm-form-control required" />
</div>
<div class="col_half col_last">
<label for="template-jobform-city">City <small>*</small>
</label>
<input type="text" name="template-jobform-city" id="template-jobform-city" value="" size="22" tabindex="5" class="sm-form-control required" />
</div>
<div class="col_full">
<label for="template-jobform-application">Application <small>*</small>
</label>
<textarea name="template-jobform-application" id="template-jobform-application" rows="6" tabindex="11" class="sm-form-control required"></textarea>
</div>
<div class="col_full">
<button class="button button-3d button-large btn-block nomargin" name="template-jobform-apply" type="submit" value="apply">Send Application</button>
</div>
</form>
The page loads indefinitely after clicking on the "send application" button due to this script.

preventDefault doesn't work [duplicate]

This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 7 years ago.
I have a problem with preventDefault function. It doesn't work. Here is my JS file:
(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
}());
My HTML code has 2 confirm button. Second step is hidden and should be display, when first step will be done. But I can't at least add preventDefault for first step.
Here is my HTML:
<form id="login">
<!-- #first_step -->
<div id="first_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Create a username" required="">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Create a password" required="">
</div>
<div class="form-group">
<label for="cpassword">Password</label>
<input type="password" name="password" id="cpassword" class="form-control" placeholder="Confirm your password">
</div>
</fieldset>
<fieldset id="actions">
<div class="form-group">
<input type="submit" class="submit" name="submit_first" id="submit_first" value="Next">
</div>
</fieldset>
</div>
<!-- #second_step -->
<div id="second_step">
<h1>Registration Form</h1>
<fieldset id="inputs">
<label>Name</label>
<input type="text" name="name" id="firstname" class="form-control" placeholder="Enter your name" autofocus="" required="">
<label>Surname</label>
<input type="text" name="surname" id="lastname" class="form-control" placeholder="Enter your last name" required="">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
</fieldset>
<fieldset id="actions">
<input class="submit" type="submit" name="submit_second" id="submit_second" value="Next">
</fieldset>
</div>
</form>
I'm sorry. I'm just a beginner in js and will be very thankful if someone help me

$(function() {
var app = {
initialize : function () {
this.setUpListeners();
},
setUpListeners: function () {
$('form').on('submit', app.submitForm);
},
submitForm: function(e){
e.preventDefault();
}
}
app.initialize();
});