Checking if values of a form in a modal are empty - javascript

When the program starts a modal opens and I want it to disable a button within the modal if the 9 entries of the form are filled in but despite finding the button and the modal document.getElementById('pE').elements.item(n).value was returning as if it was not finding it. I forget what I did to get the error to go away but now the code is not working. the while loop is not running because when i removed the (document.getElementById("ManuSub").disabled = false;) the button did not go disabled but all of the other programs and functions I have program work. What adjustment do I have to make to make this program work.
window.onload = function(){
var n = 0
var formName = document.getElementById('pE')
document.getElementById('myModal').style.display = "block"
while((n<=9) && (formName.elements.item(n).value === undefined)){
document.getElementById("ManuSub").disabled = true;
for(n=0;n<9;n++){};
}
document.getElementById("ManuSub").disabled = false;
}
Edit: I fixed my stated above issue I think with this code but now my program is not even loading which I believe is because of the while loop.
window.onload = function(){
document.getElementById('myModal').style.display = "block"
var n = 0
var formName = document.getElementById('pE')
while(n<=8){
setTimeout(5000,function(){if(formName.elements.item(n).value == '') {
document.getElementById("ManuSub").disabled = true;
n=n+1
}
if(formName.elements.item(8).value == ''){
n = 0
}
});
}
}

Related

Make images become unavailable when screen is not on fullscreen

I'm currently making my own card game with JS. The board randomly generates your deck with 5 images and displays them on the screen.
I've tried to make it so when you click on an image, it shows up in the game area, like simulating that you've "chosen that card" to play. With JQuery:
$("#img5").click
(
function()
{
var carta = document.images["img5"].src;
document.images["carta2"].src = carta;
}
);
Ok, but the thing is that I only want that to happen when you are on fullscreen mode, so I made this logic:
pantallaCompleta = false;
contadorScreen = 0;
document.onfullscreenchange = function(event)
{
contadorScreen = contadorScreen + 1;
if(contadorScreen % 2 === 0)
{
pantallaCompleta = false;
console.log("Exiting fullscreen");
console.log(contadorScreen);
console.log(pantallaCompleta);
}
else
{
pantallaCompleta = true;
console.log("Entering fullscreen");
console.log(contadorScreen);
console.log(pantallaCompleta);
}
};
The logic works so when you load the page, you're not on fullscreen mode so counter equals = 0 and check = false. Then, when document.onfullscreenchange = function(event) happens counter equals counter++ and check changes to true.
Okay, so with all of that combined and working, I try to put the JQuery code inside this:
if(pantallaCompleta == true)
It never works. The console.log(pantallaCompleta); is telling me that the check is true or false with accuracy, but the click on images never works.
Does anyone have an idea of what could be wrong?
Currently you have
if(pantallaCompleta == true) {
$("#img5").click(function() {
var carta = document.images["img5"].src;
document.images["carta2"].src = carta;
});
}
This will only set an event listener on img5 if pantallaCompleta is true when this code runs, which is likely on page load.
I suggest you want an event listener that is always assigned (no matter the state of pantallaCompleta), but checks to see if that value is true or false before changing the img src.
$("#img5").click(function() {
if(pantallaCompleta == true) {
var carta = document.images["img5"].src;
document.images["carta2"].src = carta;
}
});

How can I continue checking validation after first regex passes in javascript?

I have a regex in a javascript that is checked onclientclick. The code I have below works properly if the first check is false, I have a message displayed and it stops before submitting as I would like it to. However, if the first validation checks fine, I want it to check the next set of validations but it just skips the rest and submits. Am I missing something here?
<script type="text/javascript">
function checkall() {
var isValid21 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
document.getElementById("TimeTest")
return isValid21;
var isValid2 = false;
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
document.getElementById("DropDownA")
return false;
}
var submit = 0;
if (++submit > 1) {
alert('Give me a second.');
return false;
}
return true;
}
</script>
<asp:Button ID="Button1" runat="server" Text="Submit" onclientclick="return checkall();" OnClick="Button1_Click" />
Your code is returning immediately after the first check, which is why the second one is never checked. You'll need to change your code to return an aggregate of the two "checks" at the end of your function. Also, your submit variable is declared inside the scope function, which means it will always get initialized to 0. I think you need to declare that outside your function. In addition, what are those empty document.getElementById("...") calls for? They dont do anything. Finally, you are returning true at the very end of your function. You'll need to tweak your logic rules and return the aggregate of isValid21 and isValid2 at the end. You'll have to do the tweaking yourself, as we don't know the required business rules.With all that, I'm not sure that this logic is sound, but this should at least get you going in the right direction:
var submit = 0;
function checkall() {
var isValid21 = false;
var isValid2 = false;
var regex21 = /(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]/;
isValid21 = regex21.test(document.getElementById("TimeTest").value);
document.getElementById("spnError21").style.display = !isValid21 ? "block" : "none";
var DDLOne = document.getElementById("DropDownA");
if (DDLOne.value == "") {
document.getElementById("spnError2").style.display = !isValid2 ? "block" : "none";
isValid2 = false;
}
if (++submit > 1) {
alert('Give me a second.');
isValid2 = false;
}
//SOME OTHER LOGIC RULES THAT CHANGE isValid2 TO TRUE...
//YOU WILL NEED TO DO SOME ADDITIONAL LOGIC TWEAKING BEFORE THIS LINE. AS IT STANDS NOW, THIS WILL ALWAYS RETURN FALSE.
return isValid21 && isValid2;
}

Javascript execute once

How do i get a javascript code to only execute or be used once? example is
var stringToMatch = 'christopher';
function toggle (){
var input = document.getElementById('text').value;
if (input == stringToMatch){
document.getElementById('divColor1').style.display = 'block';
}
else {
document.getElementById('divColor1').style.display = 'none';
}
}
this code or stringToMatch i want to execute once, after that i dont care if it is deleted in the sense. for this is for coupons. and i am making multiples of this, so once someone has typed this i want it to delete
If I got you right, you could overwrite toggle() with an empty function.
if (input == stringToMatch){
document.getElementById('divColor1').style.display = 'block';
window.toggle = function() { };
}

How to send Gmail talk messages using Gmails built it method

I want to create a Google Chrome extension that, among other things, will modify the chat text based on what is inputed. I will add a button next to the video, call, and add people buttons below the name, and when clicked will activate the modifications. I don't want to have to put any more scripts on the page than I have to, so I would like to be able to send the messages the way Gmail would be pressing "return" in the chat box. Also I want to to be able to show that both of the people chatting are using my extension by displaying text in the chat box just like the "This chat is off the record" text is, and possibly if both are using it add extra stuff to the chat. What I tried to do was make an imitation textarea and when the user 'sends' it, grab it and modify it, then insert it into the real one and send the new text. I can change the text but can't seem to send it...
Heres what I have so far, I enclosed everything in a setInterval to check if chat box exists and add appropriate stuff to it:
var chatBtnClone = setInterval(function() {
if ($("body").find(".nH .NG").length > 0) { //if chat is active
var clone = $("body").find(".nH .NG .NJ").first();
if (clone.children()[0].className.indexOf("chat") < 0) { //if already added my class
var clonned = clone.clone();
var clonnedChd = clonned.children().first();
clonnedChd.attr("title", "Start encrypted chat");
clonnedChd.on('click', function() {
console.log("clicked chatBtn!"); //make sure it works
var self = $(this);
if (self[0].className.indexOf("chatEncX") >= 0) { //toggle button pic
self.removeClass('chatEncX').addClass('chatEnc');
self.attr("title", "Stop encrypted chat");
} else {
self.removeClass('chatEnc').addClass('chatEncX');
self.attr("title", "Start encrypted chat");
}
});
clone.parent().prepend(clonned);
clonned.find('.NK').removeClass("NK-Y8").addClass("chatEncX");
}
var chatBoxs = $('body').find(".nn .AD");
var chatArea = chatBoxs.first().find(".nH textarea"); //get chat textareas
if (chatArea.length === 1) {
var clonChatArea = chatArea.first().clone();
clonChatArea.removeAttr("id");
chatArea.first().parent().append(clonChatArea);
// chatArea.first().hide();
var chatTextDiv = chatBoxs.first().find(".jp .nH .nH").first();
clonChatArea.focusin(function() {
chatTextDiv.removeClass("gv").addClass("f7");
});
clonChatArea.focusout(function() {
chatTextDiv.removeClass("f7").addClass("gv");
});
clonChatArea.on('keyup', function(event) {
var self = this;
//console.log(this.style.height); //make sure height it working
if (self.scrollHeight === 38) {
self.style.overflowY = "hidden";
self.style.height = "36px";
} else if (self.scrollHeight === 47) {
self.style.height = "54px";
} else if (self.scrollHeight === 62) {
self.style.height = "72px";
} else if (self.scrollHeight >= 77) {
self.style.height = "80px";
self.style.overflowY = "scroll";
}
if( event.keyCode === 13 && event.shiftKey ){
//regular, just insert a newline
} else if (event.keyCode === 13) {
//grab text and modify then reinsert into real textarea
var chatTxt = $(this).val();
var chatHidden = chatBoxs.first().find(".nH textarea").first();
var chatEncTxt = Crypto.AES.encrypt(chatTxt, "pass"); //modify text
//console.log(chatEncTxt);
chatHidden.val(chatEncTxt);
chatHidden.focus();
chatHidden.trigger({ type : 'keypress', which : 13 }); //try to imitate the return key and send (NOT WORKING!!!)
// $(this).focus();
}
});
}
}
},150);
This might be a bit late, but if anyone else is interested then I managed this by doing the following:
var e = new Event("keypress");
e.keyCode = e.which = 13;
// :mc is an example textarea id, but the OP has the code for finding that already
document.getElementById(':mc').dispatchEvent(e);

jJavascript select box hanging on second select in IE7

I have a drop down select box inside a div. When the user clicks on change, a dropdown box appears next to the change/submit button and the user makes a selection which then updates the database and the selection appears instead of the dropdown. All works fine in IE8 and Firefox but in IE7 it allows one selection (there are several identical dropdowns) but the second time a selection is made it hangs on "please wait". This is the relevant code:
<td width=200>
<input type="button" onclick="startChanging(this)" value="Change" /></td>
<script type="text/javascript">
var selectBox, isEditing = false;
var recordvalue;
if( window.XMLHttpRequest ) {
recordvalue = new XMLHttpRequest();
} else if( window.ActiveXObject ) {
try {
recordvalue = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {}
}
window.onload = function () {
selectBox = document.getElementById('changer');
selectBox.id = '';
selectBox.parentNode.removeChild(selectBox);
};
function startChanging(whatButton) {
if( isEditing && isEditing != whatButton ) { return; } //no editing of other entries
if( isEditing == whatButton ) { changeSelect(whatButton); return; } //this time, act as "submit"
isEditing = whatButton;
whatButton.value = 'Submit';
var theRow = whatButton.parentNode.parentNode;
var stateCell = theRow.cells[3]; //the cell that says "present"
stateCell.className = 'editing'; //so you can use CSS to remove the background colour
stateCell.replaceChild(selectBox,stateCell.firstChild); //PRESENT is replaced with the select input
selectBox.selectedIndex = 0;
}
function changeSelect(whatButton) {
isEditing = true; //don't allow it to be clicked until submission is complete
whatButton.value = 'Change';
var stateCell = selectBox.parentNode;
var theRow = stateCell.parentNode;
var editid = theRow.cells[0].firstChild.firstChild.nodeValue; //text inside the first cell
var value = selectBox.firstChild.options[selectBox.firstChild.selectedIndex].value; //the option they chose
selectBox.parentNode.replaceChild(document.createTextNode('Please wait...'),selectBox);
if( !recordvalue ) {
//allow fallback to basic HTTP
location.href = 'getupdate.php?id='+editid+'&newvalue='+value;
} else {
recordvalue.onreadystatechange = function () {
if( recordvalue.readyState != 4 ) { return; }
if( recordvalue.status >= 300 ) { alert('An error occurred when trying to update'); }
isEditing = false;
newState = recordvalue.responseText.split("|");
stateCell.className = newState[0];
stateCell.firstChild.nodeValue = newState[1] || 'Server response was not correct';
};
recordvalue.open('GET', "getupdate.php?id="+editid+"&newvalue="+value, true);
recordvalue.send(null);
}
}
</script>
If anyone has any idea why this is happening I'd be very grateful
ok managed to solve it. I moved the recordvalue.open line near the bottom inside te last else loop and it works perfectly in all browsers just don't ask me why

Categories