I need some help
The "close modal" button that you see in the line below is hidden at load because i want to force users to write their names and emails before accessing the content.
<div class="mc-closeModal" data-action="close-mc-modal" data-dojo-attach-point="modalClose" style="">close</div>
What i want to do now is to make it appear again after people have entered their names and emails and pressed on the "Subscribe" button.
I've tried this code below in the console and it works. It submits the details and makes the "close" button appear again.
$(document).ready(function() {
$('iframe').contents().find('input.button').click() //this line targets the submit button "Subscribe"
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show() //this line makes the "close" button appear again
});
The problem is that it doesn't work when i add it in the website though.
What i want is pretty simple
When this event happens
$('iframe').contents().find('input.button').click()
I want this to execute
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()
Your code is just two statments one after another. You're not actually binding anything to the click event. If you wanted to use jquery's click you could do something like this:
$('iframe').contents().find('input.button').click(function() {
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()
});
But then you have no idea if the user actually filled in the form. Instead you can
try this:
$('#content__formFields').submit(function() {
var isValid = true;
// Check if empty of not
$(this).find('input[type!="hidden"]').each(function() {
if (!$(this).val()) {
isValid = false;
//change the element's css here so user knows whats missing
}
});
if (isValid)
$("#PopupSignupForm_0 > div.mc-modal > div.mc-closeModal").show()
return isValid
});
Related
I have the "chips" form link you can see in the attached image here and I want to create a condition such as if someone press "Enter" he can note the item added but what happens here is that form sends the data to backend.
I tried many times to modify the behavior using the "event" but it didn't work you can see the approaches I sticked with:
Approach1:
// input to submit job
const submit_job = document.getElementById("submit-job");
submit_job.onclick = (e) => {
e.preventDefault();
if (e.key !== "") {
console.log(e.currentTarget)
} else if (e.pointerType === "mouse") {
submit_job.onsubmit = () => {
return true
}
}
}
// This approach won't work because I found that "e.key" worked only when typing by Keyboard
Approach 2:
function getEventType(event) {
if (event.type === "keydown") {
event.preventDefault();
}
}
submit_job.addEventListener('keydown', getEventType, true);
submit_job.addEventListener('click', getEventType);
so, any help in that issue, please?
Note:
No need to see the full code because the code is working fine but when I place it into the form this problem occurs so, you can spire me using that variable only "submit_job" in your answer.
Your implementation of the form submission does not seem like a good idea. You should not prevent users from submitting the from when pressing "Enter". Clicking "Enter" should trigger a form submission which is common for most forms. Why not add a unique button beside the input field that when clicked allows the user to enter a note or text? If you take your current approach users will only be able to submit by clicking the submit button which is bad practice. I suggest creating an additional button and adding an event handler to that button so you have a button that adds notes when clicked, so pressing "Enter" will not clash with what you are trying to accomplish.
I have a Paypal Digital Express form which works fine. However, I would like to add a bit of jQuery to the submit button which will fire -before- the Paypal popup window opens and can prevent the Paypal code from firing. Unfortunately, the Paypal window always open first.
jQuery('#buyLink').click( function(e) {
e.preventDefault();
// if no boxes are checked; no songs selected
if ( jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
});
Is there a way to prioritise my code so that it fires -before- the Paypal code?
EDIT: I added e.preventDefault() per the first answer, but what that does is:
a) the popup window still opens but
b) the Paypal site is never reached.
Instead, it displays the calling page in the popup.
So... I want to prevent that Paypal popup window from opening. Perhaps I need to change the 'action' on the form and trigger that action from inside my jQuery? If so, how do I do this?
Look into the preventDefault() function:
jQuery('#buyLink').click( function(event) {
event.preventDefault();
if (jQuery("#buysongs input:checkbox:checked").length == 0) {
alert('Please select at least one song!');
return false;
}
else{
// submit form
}
});
I am building a form and alerting the user that they can not move to the next step until the input is successful
var location=document.getElementById("zip").value;
if(location==null || location==""){
alert("Please insert a valid location!");
return false;
}
If the user continues to the next step, the submit button is activated. If the user returns to this step, I want to hide the submit button only on this step if the same input is null. How can I do this using only javascript? The class of the submit button is 'btFinish'.
Thanks!
EDIT
I am using jQuery. I have tried
$(btPrevious).click(function(e) {
$(btFinish).hide();
});
$(btNext).click(function(e) {
$(btFinish).show();
});
This hides the Finish button through the progression, but if there is an error in the input box, and the user clicks 'btNext', 'btFinish' will show even if the user must fix their input on the first step.
ok so from my understanding here you have two steps:
1) Zip must be filled in then user clicks to go to next step.
2) User can either submit finished or go back to the zip code step.
I would do something like this:
$(btPrevious).click(function(e) {
$(btFinish).hide();
});
$(btNext).click(function(e) {
$(btFinish).show();
});
$('#zip').keyup(function(){
if ($(this).val() === null || $(this).val() === ""){
$(btFinish).hide();
}
else{
$(btFinish).show();
}
});
this will prevent them from clicking on btFinish unless they have something written in the zip. I'm thinking that since they would hve to press the delete button, it should trigger the event handler. In the event that they can somehow elsewise clear the zip code, you could also check on blur or for whatever other event they can clear the box with.
I would suggest you are trying something like that:
var location = document.formname.inputname.value;
if(location == ""){
alert("No Valid Location")
}
I have a ASP.NET form and it has a bunch of user inputs, text boxes, checkboxes, etc. I need to be able to check if the user has made an edit on the form without saving and if so prompt then beforeunload.
I have a dirty flag that set once the user edits one of the text boxes. If they save the data on the form then I reset the flag. Therefore the flag should only ever be set when the user edits but has not saved.
I then use this flag to decide whether or not to prompt the user “Are you sure you want to leave this page?”
Code snippet:
var _isDirty = false;
$(function () {
try {
$("#MainContent_txtSometextBox").change(function () {
_isDirty = true;
});
} catch (e) { }
});
The problem is I don’t want to have to set this on every control. Is it possible to set it at a page level? I don’t think it will be that easy as we also have custom user controls on the page.
You could pass a different selector
$("input, select, textarea").change(function () {
_isDirty = true;
});
you may extend this as needed.
If you need to restrict it, wrap it in a div, then find.
$("#myForm").find("input, select, textarea").change(function () {
_isDirty = true;
});
You can use jquery's input selector to target all input, textarea, select and button elements. For button you would need an on click event and for textboxes and areas, the dirty flag is triggered on loss of focus.
Demo
$('#body :input').change(function () {
_isDirty = true;
});
I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?
I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.