I have this line of Javascript:
if (true){
$('#custom-tag').html('HTML');
}
else {
$('#custom-tag').html('DifferentHTML');
}
If a variable is yes, it will run this html code at startup.
If the variable is not yes, then it will run this line of html at startup.
How can I do this?
EDIT: I'm afraid I forgot to say, I was wanting this to detect your browser. If using chrome, it will put out no HTML. If using other browsers than chrome, it will put out HTML.
EDIT#2: I have this code. I need to fix this for the popup that identifies if it's chrome.
$(function() {
$('#in').on('keyup', function() {
validate();
});
});
function validate() {
var x = $('#in').val();
if (navigator.userAgent.indexOf("Chrome") != -1) {
$('#result').html('<h3>Chrome</h3>');
} else {
$('#result').html('');
}
}
<input type="text" id="in" onChange="validate()" />
<div id="result">
<div id="popup" class="overlay">
<div class="popup">
<h2>Browser</h2>
<a class="close" href="javascript:popupClose();">×</a>
<div class="content">
</div>
</div>
</div>
Just need to connect all of these. EDIT: I need to add the last line of html into the java code if it's not chrome.
Here it works
var name;
if(name.checked == true){
$('#custom-tag').html('HTML');
}else{
$('#custom-tag').html('DifferentHTML');
}
Try the one line snippet which use ternary operator.
// Check if not chrome
if(!$.browser.chrome){
// If its variable.
$('#custom-tag').html( (variable == 'yes') ? 'html' : 'different html' );
}
// If its checkbox.
$('#custom-tag').html( $('#checkboxId').is(":checked") ? 'html' : 'different html' );
var x = true; // Your dynamic result True or False is stored in x
if(x)
{
$('#selector').html();
}
else
{
$('#selector').html();
}
You can also do it by defining var x = ''; in the beginning of script and then depending upon your other script statements, it would get value either true or false. Then you need to check x = '' or not. That's it!
$(function(){
$('#in').on('keyup',function(){
validate();
});
});
function validate(){
var x = $('#in').val();
if(x == "x"){
$('#result').html('<h3>x entered</h3>');
}else{
$('#result').html('<h5>something other than x entered</h5>');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="in" onChange="validate()"/>
<div id="result">
</div>
You can check if its chrome this way:
if( navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ){
// chrome, do nothing
}
else {
// not chrome put html
$('#custom-tag').html('HTML');
}
Related
First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');
So the issue I seem to having is a bit of a weird one. So I have a form that is hidden until a button is clicked, once it's clicked the table is visible and has a .blur function on the inputs to check if they're empty. I've tried adding alert() throughout the pcontroller and it just never get's into the function.
Here's what's in the controller (document ready is done earlier on)
var newQuestionName = $('#questionName');
function basicValidate(object) {
var val1 = object.val();
if (val1 != null && val1 != ' ' && val1 != '') {
// invalid
object.removeClass('error');
return true;
// alert('true');
} else {
// true
object.addClass('error');
return false;
// alert('invalid');
}
}
newQuestionName.blur(function () {
alert('TEST');
if (basicValidate($(this))) {
add_newQuestionName_valid = true;
alert('new question true')
} else {
add_newQuestionName_valid = false;
alert('new question false')
}
});
Here's the HTML
<form action="">
<div class="row">
<label for="questionName">
FAQ Question:
</label>
<div class="input-container">
<input id="questionName" type="text" class="text" value="">
</div>
</div>
<div class="row">
<label for="questionAnswer">
FAQ Answer:
</label>
<div class="input-container">
<textarea id="questionAnswer" cols="30" rows="10"></textarea>
</div>
</div>
<div class="row">
<div class="submit-container submit" >
<div type="submit" ng-click="newFaq()" id="addNew" class="button" value="save">save</div>
</div>
</div>
</form>
Since I don't have all your code, I can't for sure know whether this is your problem. But I am, however, almost certain that it is, so hear me out.
The problem is that when this statement is run:
var newQuestionName = $('#questionName');
the element with id questionName hasn't yet loaded, due to the order that the DOM loads in. In order to solve this, you can wrap your JavaScript code in:
$(document).ready(function() {
...
});
Try replacing your JavaScript with the following:
$(document).ready(function() {
var newQuestionName = $('#questionName');
function basicValidate(object) {
var val1 = object.val();
if (val1 != null && val1 != ' ' && val1 != '') {
// invalid
object.removeClass('error');
return true;
// alert('true');
} else {
// true
object.addClass('error');
return false;
// alert('invalid');
}
}
newQuestionName.blur(function () {
alert('TEST');
if (basicValidate($(this))) {
add_newQuestionName_valid = true;
alert('new question true')
} else {
add_newQuestionName_valid = false;
alert('new question false')
}
});
});
EDIT: Not sure if it was added afterwards, but since you're saying that "document ready" is done earlier on, the problem is still probably related to that, considering that it works fine when I use the code I provided. Make sure that the newQuestionName variable is referring to what you want. You can check it using alert(newQuestionName.length).
This code works fine on IE, but fails on Chrome.
Theory: When you click on the input, the input marks with an X or when you hit again the X is deleted (just like a checkbox) , when any of these conditions are met, the script should send the forms Y ( if X is checked) or N (if X is empty ).
HTML
Note: The values are generated dynamically using the data from a external database).
<input type="text" READONLY id="65535" class="chk" iffalse="N" iftrue="Y" value=""
onclick="fchkboxclick();" />
JavaScript
function fchkboxclick() {
object = window.event.srcElement;
if (object.id == '65535') {
if (object.value == 'X') {
activevalue = object.getAttribute("iffalse");
objet.value = '';
} else {
activevalue = object.getAttribute("iftrue");
object.value = 'X';
}
} else {
if (object.value == 'X') {
sendevent(object.id, 'check', object.getAttribute("iffalse"));
} else {
sendevent(object.id, 'check', object.getAttribute("iftrue"));
}
}
}
When I run this on any version of IE, the forms (sendevent function) receive the value from the attribute (Y or N) but in Chrome I just receive X.
Any help would be appreciated. Thanks.
if you use an onclick event in an element, far easier to do this
<input onclick="dosomething(this);" />
Then your code can do
function dosomething(element) {
// element is the element that was clicked
}
Ok, i done with this:
<html>
<body>
<input type="checkbox" name="chb[]" id="pepe" class='chk' iffalse="N" iftrue="Y" value="0" onchange="validate()" />
<br/> Value sent
<input type="text" id="1234" value="" />
<script type="text/javascript">
var inputcb = document.getElementById('1234');
function validate() {
if (document.getElementById('pepe').checked) {
inputcb.value = document.getElementById('pepe').getAttribute("iftrue");
} else {
inputcb.value = document.getElementById('pepe').getAttribute("iffalse");
}
}
</script>
</body>
</html>
<script>
function KeepCount() {
var x=0;
var count=0;
var x;
for(x=0; x<document.QuestionGenerate.elements["questions"].length; x++){
if(document.QuestionGenerate.elements["questions"][x].checked==true || document.QuestionGenerate.elements["option"][x].checked==true || document.QuestionGenerate.elements["Description"][x].checked==true || document.QuestionGenerate.elements["fillups"][x].checked==true){
count= count+1;
document.getElementsByName("t1")[0].value=count;
}
else
{
document.getElementsByName("t1")[0].value=count;
//var vn=$('#t1').val();
// alert(vn);
//alert(vn);
//alert("value is"+count);
}
}
// var cc = document.getElementsByName("t1")[0].value;
var vn=$('#t1').val();
alert(vn);
if(vn==0){
alert("You must choose at least 1");
return false;
}
}
</script>
<form action="SelectedQuestions.jsp" method="post" name="QuestionGenerate">
<input type="text" name="t1" id="t1" value="">
<input type="submit" id="fi" name="s" value="Finish" onclick="return KeepCount();">
</form>
I use the above code for checking how many check box are checked in my form my form having many check box. and if no check box are selected means it shows some message and than submit the form but for loop is working good and textbox get the value after the for loop the bellow code doesn't work even alert() is not working
**
var vn=$('#t1').val();
alert(vn);
if(vn==0){
alert("You must choose at least 1");
return false;
}
This code is not working why?
**
I change my KeepCount() function code shown in bellow that solve my problem
function KeepCount()
{
var check=$("input:checkbox:checked").length;
alert(check);
if(check==0)
{
alert("You must choose at least 1");
}
return false;
}
The bug is : document.QuestionGenerate.elements["questions"] it is undefined that's why the code is not even going inside for loop use instead :
document.QuestionGenerate.elements.length
I have a form and a span. When i click on the submit button, it calls a function.
<form action="" method="post">
<span id="msg_check">
checkingfgr
</span>
<br/>
<input type="submit" value="save" onclick="return valid()" />
</form>
<script type="text/javascript">
function valid() {
a = document.getElementById("msg_check").innerHTML;
if (a = "checking") {
alert("hi")
} else {
return false;
}
}
</script>
Now what i want is that if span contains checking then it should alert else return false...but it is alerting in all cases it is not going to the else part. When i am putting something else in the span tag still it is alerting, it is not calling function properly.
it is going in if, because if(a="checking") you are assigning a not comparing, so thats the reason its goes always in if block
use
if(a=="checking")
{
alert("hi");
}
if it containg checking
if (a.indexOf("checking") > -1) {
alert('Hi');
}
If you want to check whether the span contains (instead of equals) checking, you need the following.
if (a.indexOf("checking") > -1) {
alert('Hi');
}
For comparing the value of "a" with "checking", use the following code :
if(a==="checking") {
alert("hi")
}
else {
alert("hello");
return false;
}