I want to get an answer from the php file if I click on one of the radio buttons, but if I use the radio button, the alert appers in an endless loop. Why? And how do I get the alert only once?
I try it with only a „normal“ button, then it works:
If I click on the button, the ajax responds the values in the alert once.
Thank you
<!doctype html>
<html lang="de">
<head>
<title>test</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<br>
<br>
<button type="button" class="btn btn-dark" id="go">Go</button>
<div class="row">
<div class="btn-group" id="auswahl" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="aktionswahl" value="alles" checked autocomplete="off"> Alles
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="blue" autocomplete="off"> blue
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="red" autocomplete="off"> red
</label>
</div>
</div>
</div><!--Container-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">></script>
<script>
$(function() {
$("input[name=aktionswahl]").focus(function () {
//var auswahl = this.value;
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
$(function() {
$("#go").click(function () {
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
function ask(sqlwhere) {
$.ajax({
type: 'POST',
url: 'read_sql.php',
data: { sqlwhere:sqlwhere }
}).done(function(data) { alert(data); });
return false;
}
</script>
</body>
</html>
As the alert appears, the radio button will lose focus. As you close the alert, the focus will return which triggers the alert which causes the radio button to lose focus but when you close that alert ...
Use console.log instead
Try this, your code is right just need one change...
write return false; immediately after alert.
means...function(data) { alert(data); return false; }
Related
// Detele Videos
var checkboxes = $("input[type='checkbox']"),actions = $("#actions");
checkboxes.click(function () {
actions.attr("hidden", !checkboxes.is(":checked"));
});
// Delete All Videos
var checked = false;
$('.select-all').on('click', function () {
if (checked == false) {
$('.settings').prop('checked', true);
checked = true;
} else {
$('.settings').prop('checked', false);
checked = false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show / Hide a Button onclick</title>
</head>
<body>
<div class="col-md-9 dl-dir-block">
<div class="card">
<div class="card-body">
<button class="select-all btn btn-primary">Select All</button>
<input type="checkbox" id="selectCheckbox" class="btn btn-primary">
<input type="submit" id="actions" class="btn btn-primary settings" value="Delete" hidden>
</div>
</div>
</div>
</body>
</html>
Condition1:
When the checkbox is checked I need to show a Delete Button, if not checked then I need to hide the button.
Condition 2:
There is a button called Select All even if I click on this button also I need to show the Delete Button else I need to hide the button
Currently, only one condition is getting satisfied, but I need to satisfy both conditions at the same time like when I click on the checkbox or on the Select All Button I need to show a Delete Button.
If non of the checkbox is checked then I need to hide the Delete Button.
I need to satisfy both conditions within the same logic itself.
You can do it by changing some codes in your javascript. Do not need the condition "checked == true" since the "Select All" button does check the checkbox and doesn't do anything if the checkbox is checked.
Here's the full code.
var checkboxes = $("input[type='checkbox']");
var actions = $("#actions");
var checked = false;
checkboxes.click(function() {
actions.attr("hidden", !checkboxes.is(":checked"));
checked = checkboxes.is(":checked");
});
// Delete All Videos
$('.select-all').on('click', function() {
if (checked == false) {
$('#selectCheckbox').prop('checked', true);
actions.attr("hidden", !checkboxes.is(":checked"));
checked = true;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show / Hide a Button onclick</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="col-md-9 dl-dir-block">
<div class="card">
<div class="card-body">
<button class="select-all btn btn-primary">Select All</button>
<input type="checkbox" id="selectCheckbox" class="btn btn-primary">
<input type="submit" id="actions" class="btn btn-primary settings" value="Delete" hidden>
</div>
</div>
</div>
</body>
</html>
FYI: You may need to change the "Select All" button text to "Deselect All" after the "Select All" button is clicked.
You can use the following code:
var checkboxes = $("input[type='checkbox']");
var actions = $("#actions");
var checked = false;
checkboxes.click(function() {
actions.attr("hidden", !checkboxes.is(":checked"));
checked = checkboxes.is(":checked");
if (checked == false) {
$('.select-all').text("Select All");
} else {
$('.select-all').text("Deselect All");
}
});
// Delete All Videos
$('.select-all').on('click', function() {
checkboxes.click();
});
Check below code, this considers possibility of multiple check boxes.
var checkboxes = $("input[type='checkbox']"),
actions = $("#actions");
checkboxes.click(function() {
ToggleDeleteButton();
});
// Delete All Videos
$('.select-all').on('click', function() {
checkboxes.prop("checked", true);
ToggleDeleteButton();
});
function ToggleDeleteButton() {
actions.attr("hidden", true);
$.each(checkboxes, function(index, item){
if($(item).is(":checked")) {
actions.attr("hidden", false);
return false;
}
});
}
I'm trying to make a menu for a Memory Game type game. I created the html page that contains a form consisting of 2 radio buttons with different values. On the submit input I called my function from the javascript file. And in the js file I created an if else function to redirect me, but it doesn't work.
Code:
`
let button = document.getElementById("button");
let solo = document.getElementById("solo");
let multiplayer = document.getElementById("multiplayer");
let level1 = document.getElementById("3x4");
let level2 = document.getElementById("4x4");
let radio1 = document.getElementsByName("radio1");
let radio2 = document.getElementsByName("radio2");
// button.addEventListener("click", gameMenu);
function gameMenu() {
if ((radio1.value = "solo") && (radio2.value = "3x4")) {
// location.href = "sg_34.html";
console.log("solo/3x4");
}
else if ((radio1.value = "solo") && (radio2.value = "4x4")) {
// location.href = 'sg-44.html';
console.log("solo/4x4");
}
else if ((radio1.value = "multiplayer") && (radio2.value = "3x4")) {
// location.href = 'mp-34.html';
console.log("mp/3x4");
}
else if ((radio1.value = "multiplayer") && (radio2.value = "4x4")) {
// location.href = "mp-44.html";
console.log("mp/4x4");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="./css/styleIndex.css">
<title>Memorizer JS</title>
</head>
<body>
<div class="container">
<h1>Memorizer JS</h1>
<form class="form menu">
<section class="game cf">
<h2>Choose game mode:</h2>
<input type="radio" name="radio1" id="solo" value="solo">
<label class="solo-label four col" for="solo">Solo</label>
<input type="radio" name="radio1" id="multiplayer" value="multiplayer">
<label class="multiplayer-label four col" for="multiplayer">With a friend</label>
</section>
<section class="level cf">
<h2>Level:</h2>
<input type="radio" name="radio2" id="3x4" value="3x4">
<label class="3x4-label four col" for="3x4">3x4</label>
<input type="radio" name="radio2" id="4x4" value="4x4">
<label class="4x4-label four col" for="4x4">4x4</label>
</section>
<input class="submit" id="button" type="submit" value="Play" onclick="gameMenu()">
</form>
</div>
<script src="./scripts/index.js"></script>
</body>
</html>
`
Code pen: https://codepen.io/sebastian-mihai-ciuc/pen/BaVagNM
I created the conditions in an if else structure to check the values in the radio buttons. I expected it to redirect me to other pages or at least display the cases in the console.log.
You should remove form tags for not reloading the window
I'm learning Javascript and now I'm making to-do list.I've finished the basic one but I want to add the delete button which delete all the checked lists to my to-do list.
I've tried some ways that I came up with and they all failed and I cannot find the answer by googling.
How can I do this ? If there is someone who know, please teach me . I'd appreciated if you could show me how.
this is my code ↓ the error happened saying cannot read property 'parentElement' of null at Object.deleteAll
deleteAll: function() {
let taskListItem, checkBox, checkBoxParent;
for (i=0; i<this.taskListChildren.length; i++){
taskListItem = this.taskListChildren[i];
checkBox = taskListItem.querySelector('input[type = "checkbox"]:checked');
checkBoxParent = checkBox.parentElement;
checkBoxParent.remove();
}
document.getElementById('deleteChecked').addEventListener('click', () => {
tasker.deleteAll();
});
🙏
// this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body onLoad = "tasker.construct();">
<div class="tasker" id="tasker">
<div class="error" id="error">Please enter a task</div>
<div class="tasker-header" id="tasker-header">
<input type="text" id="input-task" placeholder ="Enter a task">
<button id="add-task-btn"><i class="fas fa-plus"></i></button>
</div>
<div class="tasker-body">
<ul id="tasks">
</ul>
</div>
<button id="deleteChecked">Delete</button>
</div>
<script src="js/main.js"></script>
</body>
</html>
You can use the jQuery library and solve it as follows.
Step 1) Define in your html button element:
<button id="button" onclick="reset()"> RESET </button>
Step 2) define the 'reset ()' function, like this
function reset()
{
$("input:chceckbox").removeAttr("chcecked");
}
Good luck!!
GIF1(In this GIF my checkboxes are disabled by default and auto check if i click the phase buttons)
GIF2(In this GIF my first checkbox is enabled, and if the first checkbox is clicked the submit button works)
My end goal is to actually have the submit button work if they re automatically checked like in the first GIF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Bootstrap</title>
</head>
<body>
<button onclick="enableShadowButton()">Click me to submit Phase1</button>
<input type="checkbox" id="c1"/ disabled> Phase1
<br>
<button onclick="phase2Function()">Click me to submit Phase2</button>
<input type="checkbox" id="c2"/ disabled> Phase2
<br>
<button onclick="phase3Function()"> Click me to submit Phase3</button>
<input type="checkbox" id="c3"/ disabled> Phase3
<br>
<button onclick="phase4Function()"> Click me to submit Phase4</button>
<input type="checkbox" id="c4"/ disabled> Phase4
<br>
<button onclick="phase5Function()"> Click me to submit Phase5</button>
<input type="checkbox" id="c5"/ disabled> Phase5
<br>
<button onclick="shadowFunction()" id="shadowbutton" disabled>Shadow Button</button>
<!--This script defines the functionalilty of the buttons which is 1.Autochecking and 2.Alerting-->
<script>
function enableShadowButton() {
document.getElementById("c1").checked=true;
alert("You have completed Phase 1!");
}
function phase2Function() {
document.getElementById("c2").checked=true;
alert("You have completed Phase 2!");
}
function phase3Function() {
document.getElementById("c3").checked=true;
alert("You have completed Phase 3!");
}
function phase4Function() {
document.getElementById("c4").checked=true;
alert("You have completed Phase 4!");
}
function phase5Function() {
document.getElementById("c5").checked=true;
alert("You have completed Phase 5!");
shadowFunction();
}
//This function uses .checked(which makes sure the box is check marked) for 1-5 before moving on. Previously we used .checked=true which actually marks the boxes rather than verifying it
function shadowFunction(){
if((document.getElementById("c1").checked) &&
(document.getElementById("c2").checked) &&
(document.getElementById("c3").checked) &&
(document.getElementById("c4").checked) &&
(document.getElementById("c5").checked))
{
document.getElementById("shadowbutton").disabled=false;
}
}
</script>
<!--This script defines the functionalilty of the buttons which is 1.Autochecking and 2.Alerting-->
<!--best practice is to put script at the bottom of body so the page loads first, if in between head page wont load along with script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!--<li>Reviews <span class="badge">1,118</span></li>-->
[1]: https://i.stack.imgur.com/uRmFg.gif
[2]: https://i.stack.imgur.com/Xrh35.gif
You need to run the functionality of shadowFunction() in phase1Function(). If the button is disabled the if statement in shadowFunction() never runs.
I think you should call the shadowFunction() at the end of the fifth button, like this:
funct
function phase5Function() {
document.getElementById("c5").checked=true;
alert("You have completed Phase 5!");
shadowFunction();}
I'm trying to inject into the header of a page(JQM) a title by using Javascript.
I also want to enable a Subscription feature so I need to insert the button via Javascript aswell. However, whenever I inject it, it's getting messy.
I want the button to align with the title, and I want the title in the middle of the header.
Here's a picture to demonstrate how it looks right now
and I want it to align perfectly, with no line-breaks at all(like it has now)
Im using these lines to insert the button and the title(JS):
document.getElementById("forum_name").innerHTML = fName;
document.getElementById("subscribe_btn").innerHTML = " <a href='#' class='ui-btn'>Unsubscribe</a>";
And Im using these lines in the HTML File:
<div data-role="header"><span style="display:inline;" id="subscribe_btn"></span><center><div id="forum_name" style="display:inline-block"></div></center></div>
With JQM you can do it following way:
var subscribeText = "Subscribe", unsubscribeText = "Unsubscribe";
function changeSubscription() {
var choiche = $('input[name=rg-subscription]:checked'),
value = choiche.val(),
label = choiche.parent().text();
$("#toggleSubscription").toggleClass("ui-screen-hidden", value == "no-subscription");
if (value == "no-subscription") {
$("#toggleSubscription").text(subscribeText);
}
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
$("#" + pageId + " [data-role='header'] h1").text(label);
}
$(document).on("pagecreate", "#page-1", function(e) {
$("input[name='rg-subscription']").change(changeSubscription);
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
$("#injectButton").click(injectButton);
});
$(document).on("pagebeforeshow", "#page-1", function(e, ui) {
changeSubscription();
});
function injectButton() {
$("#toggleSubscription").off();
var html = [
'<button id="toggleSubscription" ',
'class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">',
'Subscribe',
'</button>'
].join("");
$("#toggleSubscription").remove();
$("#page-1 [data-role='header']").prepend(html).enhanceWithin();
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-1" data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div role="main" class="ui-content" id="page-1-content">
<fieldset data-role="controlgroup" data-mini="true">
<input name="rg-subscription" id="rc-subscription-0" value="no-subscription" checked="checked" type="radio">
<label for="rc-subscription-0">no subscription</label>
<input name="rg-subscription" id="rc-subscription-1" value="alt-binaries-mp3" type="radio">
<label for="rc-subscription-1">alt.binaries.mp3</label>
<input name="rg-subscription" id="rc-subscription-2" value="alt-binaries-linux" type="radio">
<label for="rc-subscription-2">alt.binaries.linux</label>
<input name="rg-subscription" id="rc-subscription-3" value="alt-binaries-games" type="radio">
<label for="rc-subscription-3">alt.binaries.games</label>
</fieldset>
<button id="injectButton" class="ui-btn ui-btn-inline ui-mini ui-corner-all">Inject "Subscribe" Button</button>
</div>
</div>
</body>
</html>