I have form with input and submit button. I would like to open popup while user fills e-mail address and click submit button. In popup will be other button which clicked should make action from the submit button with input value. I have something like this so far:
$('form').on('submit', function (e) {
e.preventDefault();
//function opening popup goes here...
// confirm button in popup
$('#confirm_button').on('click', (e) => {
e.preventDefault();
$(this).unbind('submit').submit();
});
});
The problem is that I have no idea, how to pass value from the input to the confirming function in popup.
Thanks for your help!
To get a single value from a form, example of af an input element in html with id attribute set to username:
var userName = $('#username').val();
or to get all elements of a form where its id attribute is set to myform:
$("#myform").serialize()
To pass input value to other function you must first create a function:
function doSomething(first) {
if (first) {
console.log(first);
alert(first);
}
}
$('form').on('submit', function (e) {
e.preventDefault();
//function opening popup goes here...
});
// confirm button in popup
$('#confirm_button').on('click', (e) => {
e.preventDefault();
var userName = $('#username').val();
$(this).unbind('submit').submit();
doSomething(userName);
});
Note that the important part here is to use #id for accessing values in you page, this is how you access it with popup or not.
You could store the information in a variable or mutliple, for example:
var name;
$('form').on('submit', function (e) {
e.preventDefault();
// Get name from input and store it in the name variable.
name = $('#name').val();
//function opening popup goes here...
// confirm button in popup
$('#confirm_button').on('click', (e) => {
e.preventDefault();
$(this).unbind('submit').submit();
});
});
You could then use name anywhere else in the JS
Related
I submit a <form> in javascript with 'ENTER' key and call a function. This function returns false so that the page is not reloaded.
Unfortunately, the box is not cleared as shown in the picture.
the end of the list, but 'toto' and other entries were proposed. The suggestion box is not cleared.
How could I clear it?
Here is the code used
$('form').on('submit', function () {
var newUser = $('input.user').val()
displayPerson(newUser) // add the person
$('input.user').val('')
return false;
});
I would suggest to briefly remove the focus from the input:
$('form').on('submit', function () {
var newUser = $('input.user').val()
displayPerson(newUser) // add the person
$('input.user').val('').blur(); // <-- blur
setTimeout(function () { // Allow time for blur to happen
$('input.user').focus(); // <-- put focus back (if desired).
}, 0);
return false;
});
I have a webpage that opens a modal form. I validate the modal form using a JQuery function. The problem is that my function is checking all fields in both the modal AND the page behind it.
//validate function
function validateFields() {
var valid = true;
$('.required').each(function () {
if (!$(this).val()) {
addError(this, 'required');
valid = false;
}
});
}
//in my save function
function saveLead(){
if (validateFields()) {
//save
}
}
My validate function is checking all fields with the required class on both my page and modal. How can I get it to just use my page?
UPDATE:
this has complications because my validation function is reused on many pages and is not set up to accept a specific form to check
Is such a thing possible or do I have to do major revisions to the validation or modal in order for this to work?
You could detect the form from which the submit button is clicked. Something like the below should work.
//validate function
function validateFields($submittedForm) {
var valid = true;
$('$submittedForm .required').each(function () {
if (!$(this).val()) {
addError(this, 'required');
valid = false;
}
});
}
//in my save function
// Find the form there 'this' is the submit button
var $submittedForm = $(this).closest('form');
function saveLead($submittedForm){
if (validateFields($submittedForm)) {
//save
}
}
After my button click, I would check if my text fields are not empty. My check works, but if I show my message it's show for a few seconds. Probably the duration of my button click. Here is some code I've tried.
<form>
<div id="errorblock">
<p id="errortext">Error.</p>
</div>
<!-- here are my input fields-->
<button>Send</button>
</form>
This is where I add my event listener after initialisation of the page:
document.getElementsByTagName("button")[0].addEventListener("click", function(){
sendEmail();
});
function sendEmail() {
//check if all fields are fill in. If not do this code;
document.getElementById("errortext").innerHTML = "Fill in all the fields please.";
var errorblock = document.getElementById("errorblock");
errorblock.style.visibility = "visible";
errorblock.style.height = "46px";
}
Can anyone help me?
Thanks
By default HTMLButtonElement has type="submit". It means that on button click the form is submitted. You need to make sure you prevent this submission in case of errors in the form. For example by calling preventDefault methods of the event object:
document.getElementsByTagName("button")[0].addEventListener("click", function (e) {
if (!sendEmail()) {
e.preventDefault();
}
});
function sendEmail() {
//check if all fields are fill in. If not do this code;
document.getElementById("errortext").innerHTML = "Fill in all the fields please.";
var errorblock = document.getElementById("errorblock");
errorblock.style.visibility = "visible";
errorblock.style.height = "46px";
// if there are errors return false
// return true if input is correct
return false;
}
Also I recommend to listen onsubmit event on the form instead of button click event:
document.querySelector("form").addEventListener("submit", function (e) {
if (!sendEmail()) {
e.preventDefault();
}
});
I am currently using js function to submit data without page refresh or button click. The input field is inside tab #2 that executes the js once the user stops typing. The problem is that the js is making the page refresh thus taking me back to tab#1. How can I prevent the page from refreshing? I thought i had included the necessary code in the JS function to stop this. EXAMPLE
<script>
$(document).ready(function() {
var timer;
$('#video-input1').on('keyup', function() {
var value = this.value;
clearTimeout(timer);
timer = setTimeout(function() {
//do your submit here
$("#ytVideo").submit()
//alert('submitted:' + value);
}, 2000);
});
//submit definition once submit is executed
$('#ytVideo').submit(function(e){
e.preventDefault(); //prevent page refresh
var form = $('#ytVideo').serialize();
//submit.php is the page where you submit your form
$.post('index.php#tab-2', form, function(data){
var x = $(data);
$("body").html(x);
});
return false;
});
return false;
});
</script>
try changing this line
//do your submit here
$("#ytVideo").submit()
to
$("#ytVideo").trigger("submit");
i believe the problem is that you define what submit should do after the form has been submitted this causes the page to reload.
Edited
try this change
$('#ytVideo').submit(function(event){
event.preventDefault(); //prevent page refresh
event.stopPropagation(); //+
var form = $('#ytVideo').serialize();
//submit.php is the page where you submit your form
$.post('index.php#tab-2', form, function(data){
var x = $(data);
$("body").html(x);
});
//- return false;
});
//- return false;
made some changes
Instead of .submit() you should use .triggerHandler('submit'). Docs and related question.
I have initialized my form submission like following:
$(document).ready(function() {
$("#my_form").submit(function(e) {
...
...
}
}
As you see above, it is in $(document).ready(...). When user press "Submit" button on UI, the form will be submitted.
But, How can I also trigger this form submission in Javascript besides user input (e.g. press submit button on UI)?
Call the submit() DOCs method on the form.
$("#my_form").submit();
You can use $("#my_form").submit();
$(document).ready(function () {
$("#SubmitForm").click(function (e) {
var textContent = $("#TextContent").val();
textContent = jQuery.trim(textContent);
if (textContent == "") {
alert("Content field cannot be empty.");
$("#TextContent").focus();
return false;
}
else{ $("#my_form").submit();
}
});
});