Get value from button in while loop - javascript

I've got a while loop with multiple buttons, they are like this:
<button onclick="confirmDelete()" value="<?php echo $game['id'];?>" name="deleteButton">Delete </button>
It is followed by the following confirm message:
<script>
function confirmDelete() {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
if (r == true) {
// delete
} else {
// cancel
}
}
</script>
Each button has his own value, but now i want that value in my javascript when i click on that button. I tried multiple things but cant make it work.
EDIT:
If someone can tell me an better/easier way to do this, you're welcome to tell me

Use your function with this argument, i.e.:
<button onclick="confirmDelete(this)" id="myButton" value="someId" name="deleteButton">Delete </button>
<script>
function confirmDelete(elem) {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
var theValue = elem.value; //someId
var theId = elem.id; //myButton
if (theValue == "True") {
alert("True")
} else {
alert("False")
}
}
</script>
LIVE DEMO:
http://codepen.io/anon/pen/QyZgqO

Pass the game ID into the confirmDelete function as a parameter
<button onclick="confirmDelete(<?php echo $game['id'];?>)" name="deleteButton">Delete </button>
<script>
function confirmDelete(id) {
var r = confirm(id);
if (r == true) {
// delete
} else {
// cancel
}
}
</script>

Related

How do I manipulate a boolean in a function?

I'm trying to change inputX[0] from false to true, then get an alert if it worked. Unfortunately I don't get the message that inputX[0] was set to true. Do you have any ideas?
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
definedInputs();
btnManager();
question();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == (id = "S1")) {
inputX[0] = true;
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
try with this:
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
inputX[0] = false;
function btnManager(pressedBtn) {
inputX[0] = !inputX[0];
alert(inputX[0]);
}
</script>
</body>
With this, every you push the button the value will be set by the negation of the current value, hope it helps.
It is important that you understand the Js lifecycle.
First javascript objects and functions are built and
then the code is executed, in this case it happens as follows:
The array "inputX" is created
Using the function "definedInputs()" defines "inputX[0] = false"
"btnManager()" is executed but since it is not assigned a parameter, the value of "pressedBtn.id" is "undefined" so the state of "inputX[0]" does not change
The status of "inputX[0]" is queried using "question()", but since "inputX[0]" is still false, no alert is fired.
All of this happens before you can press the button.
Pressing the button executes "btnManager(this)" and since the id is equal to "S1" the state of "inputX[0]" changes to true.
But you can't see this change because the "question()" function has already been executed.
Try:
<!DOCTYPE html>
<html>
<body>
<div>
<button id="S1" onclick="btnManager(this);">Test</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1") {
inputX[0] = true;
}
question();
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
</html>
Add some console logs to see what is happening. If you do, you'll see that all of your functions are executing immediately. When you click the button and enter the btnManager() function what happens next? As you'll see, your code is executing the btnManager() function but then what about checking for your alert?
If you call question() after your if statement, then you'll run your check again.
You could do this with less lines, but for the sake of keeping your exact code and making it work, this is how you would achieve your goal:
<body>
<div>
<button id="S1" onclick="btnManager(this);"></button>
</div>
<script>
var inputX = new Array();
// You could really remove these and do it like Lucretius's Answer
definedInputs();
btnManager();
question();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == (id = "S1")) {
inputX[0] = true;
}
question();
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
You're comparing the value of pressedBtn.id which is a text string S1 to a true/false Boolean evaluation (id == "S1") which will always be false because text strings and boolean values are not the same. Since (id = "S1") is an assignment, and you can't compare an assignment, this is what I am guessing you're trying to do.
'S1' == true will always be false
'S1' == false will also always be false.
Instead of:
function btnManager(pressedBtn) {
if (pressedBtn.id == (id == "S1")) {
inputX[0] = true;
}
}
Just evaluate the id and then log it to console to make sure the input array is updated.
<body>
<div>
<button id="S1" onclick="btnManager(this);">Click</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1" ) { //fixed
console.log( pressedBtn.id == (id == "S1") ); // breaks, undefined
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>
Here is your code fixed.
You don't need to call btnManager(); or question(); immediately since these are called in a cascading fashion after the button click event is fired. The only "pre-work" your code needs to do on load is to defineInputs(); so those two lines were removed.
<body>
<div>
<button id="S1" onclick="btnManager(this);">Click</button>
</div>
<script>
var inputX = new Array();
definedInputs();
function definedInputs() {
inputX[0] = false;
}
function btnManager(pressedBtn) {
if (pressedBtn.id == "S1") {
inputX[0] = true;
console.log( "true" );
}
}
function question() {
if (inputX[0] == true) {
alert("inputX is set to true");
}
}
</script>
</body>

redirect to another page if (text area (input) === "something") when a button is clicked

This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>
There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>
You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>

How do I stop server side event getting called

I have made a method for adding an image to the page for user feedback. I have tried the method on its own and now want to use it over and over again so it matches the validation on the site.
function ValidateFields(div, imgDiv) {
var validPass = true;
var elem = document.getElementById(div).value;
if (elem == "") {
var img = document.createElement("img");
img.src = "/assets/img/errorIcon.png";
var src = document.getElementById(imgDiv);
src.appendChild(img);
validPass = false;
//document.getElementById('lbl_pdf_title').innerText = ("Please enter a title for the PDF");
}
return (validPass);
}
When I used this method by passing in the correct values it works ok, but now I want to use the method like this:
function ValidatePdf() {
ValidateFields('txt_pdf_title', 'imgPdfError');
if (!ValidateFields()) {
// make it false
}
}
I want to use the method lots of times in the ValidatePdf() but it shows the symbol then carries on to run the serverside method.
This is my button click:
<button id="btn_submit_pdf"
runat="server"
class="btn btn-default"
title="Submit PDF"
onclick="if (!ValidatePdf()) return false;"
onserverclick="btn_submit_pdf_Click">
Submit
</button>
Do I need to pass another value to the ValidateFields()
I am at a loss as why it doesn't work.But does when you pass the original values in and call the method on the button click
For multiplie validation you just need to add another boolean value:
function ValidatePdf() {
var isValidate=true;
isValidate=isValidate && ValidateFields('txt_pdf_title', 'imgPdfError');
isValidate=isValidate && ValidateFields('txt_pdf_title1', 'imgPdfError1');
isValidate=isValidate && ValidateFields('txt_pdf_title2', 'imgPdfError2');
return(isValidate);
}
Or
function ValidatePdf() {
return(ValidateFields('txt_pdf_title', 'imgPdfError') && ValidateFields('txt_pdf_title1', 'imgPdfError1') && ValidateFields('txt_pdf_title2', 'imgPdfError2'));
}
Just return the result of ValidateFields:
function ValidatePdf() {
return ValidateFields('txt_pdf_title', 'imgPdfError');
}
You can also change your onclick to:
onclick="return ValidatePdf();"
so that it returns the result of ValidatePdf, which is now the result of ValidateFields.
Wrong way, should be:
function ValidatePdf() {
if (!ValidateFields('txt_pdf_title', 'imgPdfError')) {
// alert('not valid');
}
}

How to put IF CONDITION with an AND CONDITION and the NOT OPERATOR in javascript?

<body>
<input type="radio" name="other_charges" value="To Pay" >To Pay
<input type="radio" name="other_charges" value="COD" >COD
<input type="submit" onclick="sum_cash()"/>
</body>
here is my html ...in this i am having two radio buttons with different values and i have called a function using onclick event....here is the code...
<script type="text/javascript">
function sum_cash() {
var elements_ocharges = document.getElementsByName('other_charges');
for (var i = 0; i < elements_ocharges.length; i++) {
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if (val_ocharges=="To Pay") {
alert("pay");
}
if (val_ocharges=="COD") {
alert("cod");
}
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") ) {
alert("hi");
}
}
</script>
Now in the function, I am checking the value of the radio button selected. If the user chooses the Pay radio button then on clicking the submit button it alerts the user for payment. When the user chooses the COD radio button then on submitting it alerts COD.
What I want is that when the user has selected nothing and clicked on the submit button then it should alert the user. Unfortunately, it is not checking the condition. Can anyone please help me?
You may try like this:
<script type="text/javascript">
function sum_cash()
{
var elements_ocharges = document.getElementsByName('other_charges');
var value_ocharges = null;
for (var i = 0; i < elements_ocharges.length; i++)
{
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if(val_ocharges=="To Pay")
{
alert("pay");
}
else if(val_ocharges=="COD")
{
alert("cod");
}
else
{
alert("hi");
} }
</script>
your problem is this conditional near the top:
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
since neither radio button is checked, value_ocharges is never set. this will cause an error when you attempt to access the value with var val_ocharges=value_ocharges; you should set the value of value_ocharges to something (null is fine) before entering your loop, then everything will work:
<script type="text/javascript">
function sum_cash()
{
var elements_ocharges = document.getElementsByName('other_charges');
var value_ocharges = null;
for (var i = 0; i < elements_ocharges.length; i++)
{
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if(val_ocharges=="To Pay")
{
alert("pay");
}
if(val_ocharges=="COD")
{
alert("cod");
}
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") )
{
alert("hi");
}
}
</script>
Try this ,
else if ((val_ocharges =="")
{
alert("hi");
}
Hope this helps!!
First, set your value_ocharges above the for loop:
var value_ocharges = false;
Then, instead of:
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") ) {
alert("hi");
}
use this outside of the loop:
if (!val_ocharges){
alert("hi");
}
Basically, this checks if val_ocharges is defined somewhere in the loop, and if it's not, it triggers the alert.

checkbox javascript shows status

what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".
<html>
<body>
<p id="demo"></p>
<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >
<script>
function myFunction() {
var box = document.getElementById("chkbox");
if(checkbox.checked)
{
var checked.value = "yes";
var txt = checked.value;
document.getElementById("demo").innerHTML = txt;
}
else if(checkbox.unchecked)
{
var unchecked.value = "no";
var txt = unchecked.value;
document.getElementById("demo").innerHTML = txt;
}
}
</script>
</body>
function myFunction() {
var box = document.getElementById("chkbox");
if(box.checked)
{
document.getElementById("demo").innerHTML = 'yes'
}
else
{
document.getElementById("demo").innerHTML = 'no';
}
}
The problems in your code were:
You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.
There are multiple problems.
There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid
Try
<input type="button" value="button" onClick="myFunction()">
then
function myFunction() {
var box = document.getElementById("chkbox");
box.value = box.checked ? "yes" : 'no';
document.getElementById("demo").innerHTML = box.value;
}
Demo: Fiddle
Since jQuery tag is used include jQuery library in the page then
<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and
//dom ready handler
jQuery(function ($) {
//cache the elements for future use
var $chk = $('#chkbox'), // id-selector
$demo = $('#demo');
//click event handler
$('#button').click(function () {
//use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
$demo.text($chk.is(':checked') ? 'yes' : 'no')
})
})
Demo: Fiddle
try:
You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.
Here is code:
function myFunction() {
var box = document.getElementById("chkbox");
if (box.checked) {
document.getElementById("demo").innerHTML = "yes";
} else {
document.getElementById("demo").innerHTML = "no";
}
}
Here is working Demo
Check this one
function myFunction() {
if(document.getElementById('chkbox').checked) {
alert("checked");
} else {
alert("not checked")
}
}
try something like this,Shorthand
function myFunction(){
var box = document.getElementById("chkbox").checked;
document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}

Categories