I'm trying to display a warning message when a user types certain text into an input box. The problem is I only want to return false one time so the user can submit the form on the second click even if they don't change the text. I've tried adding a counter but jquery is not remembering the count on a second sumbit click. What is the best way to go about this?
if (email.val().indexOf("gmail") > -1))
{
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
return false;
}
I would use a flag to determine if they have already tried to submit, and if they haven't, then you give them the warning and return false:
var triedSubmit = false;
$(/* Your jQuery Object */).click(function() {
if (email.val().indexOf("gmail") > -1))
{
if (!triedSubmit){
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
triedSubmit = true;
return false;
}
}
}
Just set up some kind of flag
var flags = {}; // in some higher scope
// then later, in your verification function
if (email.val().indexOf("gmail") > -1 && !flags.warnedGmail) {
$('input[name=email]').css('border-color','red');
$("#submit").after('<p>Error - Do you want to use a gmail account?</p>');
flags.warnedGmail = true;
return false;
}
Why don't you put a class on your text box and remove it in the first failure? Thus when you look for it with jQuery a second time you won't be able to find it it and won't be able to apply the rule. I implmented it like so:
var submit = function()
{
var email = $('.emailFirstTry')
if (email.length > 0 && email.val().indexOf("gmail") > -1)
{
$('input[name=email]').css('border-color','red');
$("#submit").text('Error - Do you want to use a gmail account');
$('.emailFirstTry').removeClass('emailFirstTry');
return false;
}
$('input[name=email]').css('border-color','none');
$("#submit").text('Success!');
return true;
};
You can see it in action on this fiddle right here: http://jsfiddle.net/ozrevulsion/39wjbwcr/
Hope the helps :)
Related
I have a drop down box as shown :
When I change the subject, the alert box shown below appears:
Code :
$("#createquiz_subject").bind("change", (function() {
if(quiz.length !== 0){
var r = confirm("The questions selected will be cleared");
if (r === true) {
$("#leftValues").empty();
} else {
}
}
}));
If I click on OK, then the topic and lesson changes. The same happens when I click on cancel.
When the user clicks on cancel, I want the subject to remain the same which was present before changing it.
How do I carry out this functionality.
You can work around this by first remembering the currently selected section and then manually reverting to it.
var subject = $('#creatquiz_subject');
var currentSubj = subject.val();
subject.bind("change", (function() {
if (!quiz.length) { return; } // Better to just short-circuit here?
if (confirm("The questions selected will be cleared")) {
$("#leftValues").empty();
currentSubj = subject.val(); // Update the current subject var
} else {
subject.val(currentSubj); // Reset to current subject
}
}));
Only one way . Pseudocode is :
<script>
var lastvalue = null;
</script>
<select .... onmousedown="lastvalue = this.index">
....
</select>
oncancel
select.index = lastvalue
tweak the code as per your implementation and jquery used(if used)
<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?
Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/
I am trying to prevent a radio button not to be checked if a false is returned from the onclick.
Following is the jsbin link for the code I am using.
http://jsbin.com/oruliz/2/
Is there anything I am missing; BTW, I am trying to use JS with no framework.
However, if pure js has this issue is there a workaround for prototyoe.js ?
Try this
function propertyDamageType_click(elem) {
if(yourconditionfails){ // or if(yourconditionfails && !elem.checked)
elem.checked = false;
alert('Please select an incident type');
}
}
Demo
You should user return propertyDamageType_click() .
See the http://jsbin.com/uvopek/1/edit
You can use a flag and return false whenever the pre codition is not met....
var IsIncidenntTypeSelected = 0; // flag - sets to 1 when pre condition is met
$("input[type='radio']").click(function()
{
if(IsIncidenntTypeSelected == 0)
return false;
}
I need to change the back button functionality of my phonegap project, which I've succeeded in doing without any problem. The only issue now, is that I need to further change the functionality based on if the user has a certain field selected.
Basically, if the user has clicked in a field with the id of "date-selector1", I need to completely disable the back button.
I was attempting to use document.activeElement, but it only returns the type of the element (input in this case), but I still want the functionality to work when they are in a general input, but not when they are in an input of a specific id.
EDIT
I tried all of the suggestions below, and have ended up with the following code, but still no success.
function pluginDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
var sElement = document.activeElement;
var isBadElement = false;
var eList = ['procedure-date', 'immunization-date', 'lab-test-done', 'condition-onset', 'condition-resolution', 'medication-start-date', 'medication-stop-date', 'reaction-date'];
console.log("[[ACTIVE ELEMENT: --> " + document.activeElement + "]]");
for (var i = 0;i < eList.length - 1;i++) {
if (sElement == $(eList[i])[0]) {
isBadElement = true;
}
}
if (isBadElement) {
console.log('Back button not allowed here');
} else if ($.mobile.activePage.is('#main') || $.mobile.activePage.is('#family') || $.mobile.activePage.is('#login')) {
navigator.app.exitApp();
} else {
navigator.app.backHistory();
}
}
if you're listening for the back button you can add this if statement:
if (document.activeElement == $("#date-selector1")[0]) {
/*disable button here, return false etc...*/
}
or even better (Thanks to Jonathan Sampson)
if (document.activeElement.id === "date-selector1") {
/*disable button here, return false etc...*/
}
You can have a flag set when a user clicks on a field or you can have a click event (or any other type of event) when a user clicks on the field that should disable the back button.
From the documentation it looks like for the specific page that the backbuton is conditional on you can drop back-btn=true removing that back button.
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
If you need complex conditional functionality you can just create your own button in the header or footer, style it using jquery-mobile widgets and implement your own click functionality.
I'm trying to create a div with contenteditable like the Facebook status update. Then I mean I want to show an autocomplete box when the user have written #.
How would you do that. Currently I'm just playing with keypress and check if the keycode = 64. Somehow that works, but it doesn't validate if there's a space before the alfa, or if the user has unfocused the box, then focused it again.
Any ideas? Or do you know about any plugin that works something like that?
Tnx
I'd probably do it with keypress too.
but we need to check the cursor position to check the character before the '#'.
here's the function I used from http://javascript.nwbox.com/cursor_position/cursor.js
function getSelectionStart(o) {
if (o.createTextRange) {
var r = document.selection.createRange().duplicate();
r.moveEnd('character', o.value.length);
if (r.text == '') return o.value.length
return o.value.lastIndexOf(r.text);
} else {
return o.selectionStart;
}
}
then with jquery I wrote this keypress callback function:
txt.keypress(function(event) {
if (event.which == 64) {
var index = getSelectionStart(this)
var prevChar = txt.val().substring(index - 1, index);
// now you can check if the previous char was a space
}
});