In my application I need to submit forms via JavaScript. I know that I can do that with this code:
[...document.querySelectorAll('form')].forEach(form => {
form.addEventListener('submit', e => {
//doing the processing here
e.preventDefault();
})
})
From the server I get completely generated forms as HTML, which I inject into the DOM (or delete them from there), whenever necessary. By doing so, the registered event handlers stop to work, because the form element is either deleted or not registered.
Is it possible to register a global »Submission Listener«, comparable to that:
window.addEventListener('click' e => { … });
what will never be removed if the DOM changes, or will I have to register the submission handlers each time the DOM changes?
Is not a dublicate, because the mentioned delegation strategy is what I am looking for, but not for click events, for submission events instead.
You can definitely catch submit events as they bubble up, so what you want can be achieved by listening from a parent element that is always present as the dynamic forms are added and removed. I like doing this thing with a wrapper element with an ID, as opposed to listening a the body or html level. Here's a very simple example using just vanilla js. Codepen here: http://codepen.io/bsidelinger912/pen/RGbWYb
HTML:
<div id="form-wrapper">
<h2>Form 1</h2>
<form id="form1">
<input name="test" placeholder="enter something" />
<input type="submit" value="submit" />
</form>
<h2>Form 2</h2>
<form id="form2">
<input name="test" placeholder="enter something" />
<input type="submit" value="submit" />
</form>
</div>
<button id="form-adder">
+ Add a form
</button>
Javascript
var formWrapper = document.getElementById('form-wrapper');
// capture the submit event in the parent div
formWrapper.addEventListener("submit", function(e) {
e.preventDefault();
console.log('submit captured');
var thisForm = e.srcElement || e.originalTarget;
console.log('form id:' + thisForm.id);
console.log(thisForm.test.value);
});
// dynamically add divs and see we can still capture the submit
var divNum = 3;
function addDiv(e) {
e.preventDefault();
formWrapper.innerHTML += '<h2>Form ' + divNum + '</h2>\
<form id="form' + divNum + '">\
<input name="test" placeholder="enter something" />\
<input type="submit" value="submit" />\
</form>';
divNum++;
}
document.getElementById('form-adder').addEventListener('click', addDiv);
Related
I have the following HTML :
<button type="button" id="Button">Go</button>
<div id="validation"></div>
I'm trying to add event handlers to dynamically generated elements in the following way :
Click button -> Generate element X inside div #validation -> Attach event handler to element X
$(document).ready(function(){
ID = 1;
$("#Button").click(function(){
/*generate new div inside div #validation with id #validationID
1st one would be #validation1
it contains a form with name accepterID and a button with name refuserID
1st ones would be accepter1 and refuser1*/
var newline = `
<div id="validation${ID}">
<form name="accepter${ID}">
<input type="hidden" name="name" value="phoegasus">
<button type="submit" value="valider">
</form>
<button name="refuser${ID}">refuser</button>
</div>
`
$("#validation").append(newline);
/*attach event handlers to the generated elements
1st iteration would attach handlers to accepter1 and refuser1 */
$("#validation").on('submit',"form[name^='accepter"+ID+"']",function(e){
$("#validation" + ID).remove();
//remove div validationID after submitting form
});
$("#validation").on('click',"button[name^='refuser"+ID+"']",function(){
$("#validation" + ID).remove();
//remove div validationID
});
ID++;
});
});
When I submit the form or I click the generated button I want to remove the div that contains them. If I press the button refuser1, it should delete the div #validation1.
When the elements are generated the handlers aren't attached to them.
The code doesn't work when it's executed during the onclick event but when I execute it in the navigator console it works.
I tried using DOMSubtreeModified on the div with id #validation, but it didn't work.
you can manage it by using a class (or another element) in second argument of your on function.
For that, DO NOT declare your event listeners inside your add event.
This is a full working example :
$("#validation").on('submit',"form.validation-form",function(e){
e.preventDefault();
console.log('form', $(this).attr('data-id'), ' submitted');
});
$("#validation").on('click',"button.validation-refuser",function(){
console.log('clicked on refuser for form ', $(this).attr('data-value'));
//code
});
var ID = 1;
$('#my-adder').on('click', function () {
$('#validation').append('<form name="accepter'+ID+'" class="validation-form" data-id="'+ID+'"><input type="text" placeholder="my text field" /><button class="validation-refuser" name="refuser'+ID+'" data-value="'+ID+'">Refuser button</button><button type="submit">SUBMIT</button></form>');
ID++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="validation">
<form name="accepter0" class="validation-form" data-id="0">
<input type="text" placeholder="my text field" />
<button type="button" class="validation-refuser" name="refuser0" data-value="0">Refuser button</button>
<button type="submit">SUBMIT</button>
</form>
</div>
<button id="my-adder">ADD A FORM</button>
Hope it helps
I have a form inside the script tags and I would love to add more input fields before I submit. My submit button does not work and i think it a pblem with how am accessing the submit button when I try this.
below is my form inside the script tags
<script defer type="text/html" id="template-RegisterView">
<div class="modal">
<div class="signup-popup pwd ">
<div class="title">Sign up now</div>
<p>and we'll find your right geek!</p>
<form id="signup-form" action="bin/request/best.php" method="post">
<input class="email" autocapitalize="off" autocorrect="off" autocomplete="email" name="email" placeholder="Enter your e-mail" type="email">
<input class="password" name="password" placeholder="Create password" type="password">
<button class="signup-submit submitDialog" type="button">Sign up</button>
</form>
</div>
</div>
here is the script I want to use to add more input fields
<script type="text/javascript">
$(document).on('click', '.signup-submit', function () {
$("#signup-form").submit( function(eventObj) {
alert("fwf");
$('<input />').attr('type', 'hidden')
.attr('name', "something")
.attr('value', "something")
.appendTo('#signup-form');
return true;
});
});
</script>
Rather than return true add $("#signup-form").submit();
Further explanation
The current code that you have is doing the following.
$(document).on('click', '.signup-submit', function () {
The above line means when click event occurs on the button with the signup-submit class, then execute the function that is provided as the third argument to the $(document).on method.
When the function is executed it executes the following lines
$("#signup-form").submit( function(eventObj) {
alert("fwf");
$('<input />').attr('type', 'hidden')
.attr('name', "something")
.attr('value', "something")
.appendTo('#signup-form');
return true;
});
These lines are actually defining or attaching a function when the submit event will occur for form with id signup-form.
But they are not actually triggering the submit event.
To trigger the submit event you have write $("#signup-form").submit(); without anything within (). That will trigger the submit event on the form.
You can check further details on this link. Its the official document explaining the usage of submit to attach a handler function or if you want to trigger the submit event for a form then how to do that.
var Param=//input parametr
var form = $("#signup-form");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", "Param");
hiddenField.setAttribute("value", Param);
form.appendChild(hiddenField);
form.submit();
I'm building a multipage form. On a few of the form's pages, I have questions that allow the user to add inputs dynamically if they need to add a job, or an award, etcetera. Here's what I'd like to do/what I have done so far.
What I Want to Do:
As the user adds fields dynamically, I want to validate those fields to make sure they have been filled in, and they are not just trying to move to the next page of the form with empty inputs.
After all the fields are successfully validated, a "Next" button at the bottom of the page, which up until this point was disabled, will become reenabled.
What I know How To Do
With some help, I've been able to workout a validation pattern for the inputs that are not dynamically added (such as First Name, Last Name) and I can extend this same logic to the first set of inputs that are not added dynamically. I have also worked out how to re-enable the "Next" button once all fields are good.
What I do Not Know How To Do
How do I write a function that extends the logic of the simple validation test to also check for dynamically added iterations.
http://codepen.io/theodore_steiner/pen/gwKAQX
var i = 0;
function addJob()
{
//if(i <= 1)
//{
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'"> <input type="date" class="three-lines" name="years_'+i+'"> <input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
//}
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
function checkPage2()
{
var schoolBoard_1 = document.getElementById("schoolBoard_1").value;
if(!schoolBoard_1.match(/^[a-zA-Z]*$/))
{
console.log("something is wrong");
}
else
{
console.log("Working");
}
};
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<p class="subtitleDirection">Please list in chronological order, beginning with your most recent, any and all full-time or part-time teaching positions you have held.</p>
<div class="clearFix"></div>
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" id="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='School Board'" onfocus="this.placeholder=''" onkeyup="checkPage2()" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" onkeyup="checkPage2()" />
<input type="date" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
</div><!--end of previousTeachingExperience Div -->
Instead of trying to validate each individual input element, I would recommend trying to validate them all at once. I believe that is what your checkPage2 function is doing.
You can add the onBlur event handler or the onKeyUp event handler you are currently using to all added inputs to run your form wide validation. This has the effect of checking each individual form element if it is valid so you know for sure you can enable the submit button.
Lastly, when removeJob is called, you should also run the form wide validation. It would look something like this:
function addJob()
{
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" placeholder="School Board" name="schoolBoard_'+i+'" onkeyup="checkPage2()"> <input type="text" class="three-lines" placeholder="Position" name="position_'+i+'" onkeyup="checkPage2()"> <input type="date" class="three-lines" name="years_'+i+'" onkeyup="checkPage2()"> <input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
checkPage2();
};
For every element that you make with document.createElement(...), you can bind to the onchange event of the input element, and then perform your validation.
Here's an updated version of your CodePen.
For example:
HTML
<div id="container">
</div>
Javascript
var container = document.getElementById("container");
var inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.onchange = function(e){
console.log("Do validation!");
};
container.appendChild(inputElement);
In this case I'm directly creating the input element so I have access to its onchange property, but you can easily also create a wrapping div and append the inputElement to that.
Note: Depending on the freqency in which you want the validation to fire, you could bind to the keyup event instead, which fires every time the user releases a key while typing in the box, IE:
inputElement.addEventListener("keyup", function(e){
console.log("Do validation!");
});
I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:
Under the table I have buttons which perform CRUD operations using AJAX.
They communicate to a php script on a server outside of my domain using GET method.
When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.
This is my code for adding a product(delete and update are almost the same).
<div id="addProductPopup">
<div id="popupContact">
<form id="form" method="post" name="form">
<img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
<h2>Dodavanje proizvoda</h2>
<hr>
<input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
<input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
<input id="url" name="url" placeholder="URL slike" type="text" required>
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
</form>
</div>
When I click on submit this function is called:
function addProduct(){
var isValid = true;
var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";
var amount = document.form.kolicina.value;
var naziv = document.form.naziv.value;
var slikaurl = document.form.url.value;
var validity = validateFields(naziv, slikaurl, amount);
if(!validity) return false;
var product = {
naziv: naziv,
kolicina: amount,
slika: slikaurl
};
var requestObject = new XMLHttpRequest();
requestObject.onreadystatechange = function(event) {
if (requestObject.readyState == 4 && requestObject.status == 200)
{
loadProducts();
event.preventDefault();
}
}
requestObject.open("POST", url, true);
requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}
It is because you are not preventing the default action of the submit button click.
You can return false from an event handler to prevent the default action of an event so
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">
But since you have a form with a submit button, I think it will be better to use the submit event handler like
<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
....
<input type="submit" value="Pošalji" class="popupButtons">
Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.
Submit button performs default Submit action for HTML code.
Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put
return false;
Simple Change put input type="button" instead of tpye="submit"
<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">
i have this html form
<form action="" method="post" name="login_form">
Email : <input type="text" id="email2" name="email" /><br />
<span id="passwordT" >Password : </span>
<input type="password" name="password" id="password2"/><br />
<input type="button" id="submit_botton" value="Login" />
<div><input id="forgot" type="button" value="Forgot your Password?" /></div>
</form>
and the javascript here
var forgot = $('#forgot');
var forgot2 = $('#forgot2');
forgot.click(function() {
$('#password2').hide();
$('span#passwordT').hide();
$('input#submit_botton').prop('value', 'Reset Passowrd');
$('input#forgot').replaceWith('<input id="forgot2" type="button" value="Login here" />');
});
$('input#forgot2').click(function() { // this function didnt want to work
$('input#forgot2').prop('value', 'Forgot your Password?');
$('#password2').show();
$('span#passwordT').show();
$('input#submit_botton').prop('value', 'Login');
});
HERE JS-DEMO
what i want is :
when i click on second function i will get back the buttons as they were in first time.
I tried to make this second function inside the first but what i got is the function works but only one time , i mean if i click again to reset password will not work.
thanks for the help.
Your problem is that you're trying to attach an event handler to an element that doesn't exist yet. That's not possible with direct event handlers. Use delegated events instead.
$(document).on('click','#forgot2', function(){ ... });
document can be replaced with any #forgot2 container that exists at binding time.
As a side note, take into account that when you use selectors by id (e.g #forgot2) it's not necessary to add anything else since an id identify one and just one element (repeated ids are not allowed). So this selector input#forgot2 is not wrong but more complex than necessary.