I want to change the color of the button when it is clicked using this code
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
if(!(status == '1')){
if(type == '1'){
self.css("color","orange");
}
else if(type == '2'){
self.css("color":"red"});
}
}
});
And it is not working. But when I try to put this line self.css("color","orange"); outside the IF statement it is working :
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
self.css("color","orange");
if(!(status == '1')){
if(type == '1'){
//if statement here
}
else if(type == '2'){
//if statement here
}
}
});
The problem is that it is not what I want to happen. How can I make it happen using the first code above.
The problem appear to be in the following line :
self.css("color":"red"});
You've missed to open bracket { here :
self.css({"color":"red"});
_________^
Or just use comma , as you do in first example :
self.css("color","red");
Hope this helps.
var status = '2';
$('.vote').click(function(){
var self = $(this);
var type = $(this).data("type");
var action = $(this).data("action");
var parent = self.parent();
if(!(status == '1')){
if(type == '1'){
self.css("color","orange");
}
else if(type == '2'){
self.css({"color":"red"});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='vote' data-type='1'>Vote type 1</button>
<button class='vote' data-type='2'>Vote type 2</button>
Related
I want a Boolean for a button stat but i cant what's wrong in my code?
`
<button id="read-more" class="read-more" onclick="Openreadmore()"> Read More </button>
``
`
<script>
var status = false;
var myopacity = 0;
function Openreadmore() {
if (status == false) {
document.getElementById("text-more").style.display = "none";
document.getElementById("text-more").classList.remove("is-active");
document.getElementById("small-text").style.display = "block";
document.getElementById("read-more").textContent = 'Read More';
status == true;
}
if (status == true) {
document.getElementById("text-more").style.display = "block";
MycomeFadeFunction();
document.getElementById("text-more").classList.toggle("is-active");
document.getElementById("small-text").style.display = "none";
status == false;
document.getElementById("read-more").textContent = 'Close Paragraph';
}
}
function MycomeFadeFunction() {
if (myopacity < 1) {
myopacity += .075;
setTimeout(function() {
MycomeFadeFunction()
}, 100);
}
document.getElementById('text-more').style.opacity = myopacity;
}
</script>
`
I wanted to hide some divs when the boolean is true or false, there is a var status = false; I set it as default value then checked with if but things didn't work out
The issue seems to be that your var status takes a string value instead of a boolean.
var status = false;
function Openreadmore() {
if (status == "false") {
status="true";
document.getElementById("textDiv").style.color= "red";
/*Your code*/
}
else if (status == "true") {
status = "false";
document.getElementById("textDiv").style.color= "blue";
/*Your code*/
}
}
<button id="btnReadMore" class="read-more" onclick="Openreadmore()"> Read More </button>
<div id="textDiv">
button changes color of this.
</div>
Something like this in JS code should give your desired result.
change var type to let type and check
//var status = false;
//var myopacity = 0;
let status = false;
let myopacity = 0;
You are using the wrong number of ='s when setting the value of status inside the if statement, as i understand you are trying to create some sort of "toggle"
if (status == true) {
document.getElementById("text-more").style.display = "block";
MycomeFadeFunction();
document.getElementById("text-more").classList.toggle("is-active");
document.getElementById("small-text").style.display = "none";
//this was status == false previously, which would return a boolean rather than set the value
status = false;
document.getElementById("read-more").textContent = 'Close Paragraph';
}
So i have a simple code that tells that if there is a paragraph and user clicks on it, It should show text field and button. When you enter information in textfield and go the value in text field should be changed with textfield value. My code works fine but it gives error Cannot read property 'nodeName' of null at HTMLDocument.catchIt. Can anyone please tell how to solve it?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>jobgo</p>
<script type="text/javascript">
var editing = false;
if (document.getElementById && document.createElement) {
var butt = document.createElement('BUTTON');
var buttext = document.createTextNode('Ready!');
butt.appendChild(buttext);
butt.onclick = saveEdit;
}
function catchIt(e) {
if (editing) return;
if (!document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
while (obj.nodeType != 1) {
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
obj = obj.parentNode;
}
if (obj.nodeName == 'HTML') return;
var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
editing = true;
}
function saveEdit() {
var area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P');
var z = area.parentNode;
y.innerHTML = area.value;
z.insertBefore(y,area);
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]);
editing = false;
}
document.onclick = catchIt;</script>
</body>
</html>
You have onclick event attached on the whole document and are handling everything inside that function. Now you are correctly returning when it is a TextArea or an anchor tag but are forgetting to do so for the BUTTON tag.
Since you have one more onclick handler attached for your button called saveClick() which is doing the actual job you want, your code is working as expected. You only need to return from the other onclick event handler (catchit) when you have a button. Edit like this, it will work :
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A' || obj.tagName == 'BUTTON') return;
I am getting the error below when I click the button that calls the JavaScript to do the validation. The strange thing is that everything was working before but I am not what happened now. If I select to ignore this error:
Error: '0.type' is null or not an object
then the code works fine but I get the error first then it asks me if i want to debug it, if i select No then the code works fine. Please help. thanks
it seems the code stops at this line:
if (areas[0].type == "textarea") {
but here is my entire code:
<script type ="text/javascript">
function Validate_1() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
}
}
}
}
if (!flag) {
alert('Please note that comments are required if you select "No" from the dropdown box. Thanks');
document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'hidden';
// areas[i].focus();
// areas.[i].style.backgroundColor = "red";
}
return flag;
}
// document.getElementById('<%=btnSubmit.ClientID%>').style.visibility = 'visible';
</script>
var areas = gridView.rows[i].getElementsByTagName('textarea');
getElementsByTagNane does not return null, the length would be zero
So your if check needs to change.
if (selects != null && areas != null)
should be
if (selects.length && areas.length)
I am trying to make a form validate where there are radio buttons and textarea. I want nothing to be left empty i.e the form should be completely filled. I have done the radio buttons part of validation where if a user does not select a radio button he will get an error for that particular question. you can see the code here for detailed code.
Please help me out. I am not getting error for textarea.
Just add another check for textarea
function RadioValidator() {
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++) {
var name = AllFormElements[i].name;
if (AllFormElements[i].type == 'radio') {
....
} else if (AllFormElements[i].type == 'textarea') {
if (AllFormElements[i].value == '') {
ShowAlert += name + ' textarea must be filled\n';
}
}
}
if (ShowAlert !== '') {
alert(ShowAlert);
return false;
} else {
return true;
}
}
you didn't write any validation for 'textarea' block. I have updated it with one textarea... add rest validations.
function RadioValidator()
{
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++)
{
if (AllFormElements[i].type == 'radio')
{
var ThisRadio = AllFormElements[i].name;
var ThisChecked = 'No';
var AllRadioOptions = document.getElementsByName(ThisRadio);
var problem_desc = document.getElementById("problem_desc");
for (x = 0; x < AllRadioOptions.length; x++)
{
if (AllRadioOptions[x].checked && ThisChecked === 'No' && problem_desc.value === "")
{
ThisChecked = 'Yes';
break;
}
}
var AlreadySearched = ShowAlert.indexOf(ThisRadio);
if (ThisChecked == 'No' && AlreadySearched == -1 && problem_desc.value === "")
{
ShowAlert = ShowAlert + ThisRadio + ' option must be selected\n';
}
}else if(AllFormElements[i].type =='textarea')
{
// add your rest of text area validations here
var problem_desc_1 = document.getElementById("problem_desc");
if(problem_desc_1.value === "")
{
ShowAlert = ShowAlert + '"Services (Please Specify)" can not be blank. \n';
}
}
}
if (ShowAlert !== '')
{
alert(ShowAlert);
return false;
}
else
{
return true;
}
}
You need to add a check for textarea as well
In your javascript check you have only added a condition for type radio.
check for textarea type as well and add error if the value is blank.
I need to disable the submit button until all fields are filled with the rules any tips?
window.onload = $("input[type=submit]").attr("disabled", "disabled");
$(function(){
$("input[type=submit]").attr("disabled", "disabled");
var total = document.getElementById('valor_total'),
descontado = document.getElementById('valor_descontado'),
valor_final = document.getElementById('valor_final'),
vendedor = document.getElementById('vendedor'),
cliente = document.getElementById('cliente'),
no_contrato = document.getElementById('contrato'),
validation;
var f_total = total.value;
var f_descontado = descontado.value;
var f_final = valor_final.value;
var f_vendedor = vendedor.value;
var f_cliente = cliente.value;
var f_no_contrato = no_contrato.value;
$("#numero_contrato").blur(function() {
if ( f_vendedor == "0" || f_cliente == "0" || f_no_contrato == "" || f_total == "0,00" || f_final == "0,00") {
validation = false;
} else {
validation = true;
}
if (validation = true) {
$("input[type=submit]").removeAttr("disabled");
} else {
$("input[type=submit]").attr("disabled", "disabled");
}
});
});
what i'm doin wrong?
I want that user type in the field with id numero_contrato the function runs and enable or not the submit
For starters, try fixing this conditional:
if (validation === true) {
$('input[type=submit]').removeAttr('disabled');
} else {
$('input[type=submit]').attr('disabled', 'disabled');
}
You had a single equals which is used for assignment. You want double or preferably, triple equals. But you can drop those entirely since you're using a boolean: if (validation) { ... }