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")
}
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 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
});
I'am having the following code in javascript in order to navigate from textboxes and textareas. The issue is the functionality is working fine but, when clicking on enter it is navigating to next textbox, at the same time it is navigating to next page, how to prevent to navigate to next page when clicking on enter key. Can someone help me thanks.
$('input[type="text"],textarea').keyup(function(e){
if(e.which==39 || e.which==13)
$(this).closest('td').next().find('input[type="text"],textarea').focus();
else if(e.which==37 || e.which==8)
$(this).closest('td').prev().find('input[type="text"],textarea').focus();
else if(e.which==40 || e.which==13)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
else if(e.which==38 || e.which==8)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input[type="text"],textarea').focus();
});
On keyDown for your text input, catch the input if it's the enter key and prevent the default behavior:
$('input[type="text"],textarea').keydown(function () {
if(event.keyCode == 13){
event.preventDefault();
}
});
If I recall correctly, keyDown is necessary to prevent the default enter action, rather than keyUp. But give both a try and see which works.
I create a multi step form. I add a validation on each step using jquery. If fields are empty then next button is disabled. If fields are not empty next button is enabled.
I used this code for validation
$('form.webform-client-form').bind("change keyup",function(){
var card_name = $('#edit-submitted-first-name1').val();
var card_number = $('#edit-submitted-card-number').val();
var expiration_year = $('#edit-submitted-expiration-year-year').val();
var expiration_month = $('#edit-submitted-expiration-year-month').val();
var cvv = $('#edit-submitted-cvv').val();
if (card_name != "" && card_number != "" && expiration_year != "" && expiration_month !="" && cvv != ""){
$('form.webform-client-form').find('#edit-submit').attr('disabled', false);
$('form.webform-client-form').find('#edit-submit').addClass('active');
}
else {
$('form.webform-client-form').find('#edit-submit').attr('disabled', true);
$('form.webform-client-form').find('#edit-submit').removeClass('active');
}
});
The problem is that when user fill the information in the form he clicks the next button and if he click to prev button and he back to first form all the information are prefilled but next button is not enabled until user enter some value because of keyup function. I want next button is enabled if user back to prev form.
Is there any way to resolve this problem or there is any other approach for this.
Any help would be appreciated.
First move all the logic from the binding in a different function, then call that in the binding, and when pressing the back button call the validation function you used for key-up. That way it will check for the fields and enable the button
You need to decouple your enabling and disabling of the next button from the key up being the only event that calls it. I would move it out to a common function which is called when there is a relevant keyup and a value next button click from the previous step.
we have a submit button with a checkbox and a hyper link in a view in mvc 3. we need validate both the check box and the hyper link on the click of the submit button.
For eaxmple in case the checkbox is not checked and the user hits the submit we need to show the error message "please check the checkbox".
in case if the checkbox is checked and the hyper link is not clicked by the user we need to show the error message "Please click the link".
how to solve this senario using jquery and mvc 3?
You need to have a way to keep track of the clicked action for the hyperlink on the client side. If you wish to keep track of it on the server then that's another thing. So suppose your hyperlink has an id Link1 and the checkbox has an id AcceptMe. You can do something like
<script>
var isLinkClicked = false;
$(function() {
$("Link1").click(function() {
isLinkClicked = true;
});
$("#submitButtonId").click(function(){
if (!isLinkClicked) {
alert("Please click the link"); // or show it somewhere
return;
}
if (!$("#AcceptMe").is(":checked")) {
alert("Please check the checkbox"); // or show it somewhere
return;
}
// else submit your form
});
});
</script>