I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning as expected:
<script>
function abc(){
alert("This is an alert!");
}
function xyz(){
var a = 150;
alert(a);
}
<body>
<input type="button" value="Submit 1" onClick="abc();">
<input type="button" value="Submit 2" onClick="xyz();">
</body>
To change the behavior of the first button when the second button is clicked, you can utilize jQuery to unbind the click event. Make sure to assign unique id attributes for easier manipulation.
<body>
<script>
function abc(){
alert ("This is an alert box!");
}
function xyz(){
$('#btn1').unbind('click');
var a=150;
alert(a);
}
</script>
<input id="btn1" type="button" value="Submit 1" onClick="abc();"></input>
<input id="btn2" type="button" value="Submit 2" onClick="xyz();"></input>
</body>
You can enhance your code by avoiding inline onclick attributes.
$(document).ready(function(){
$('#btn1').click(abc);
$('#btn2').click(xyz);
})
Utilizing jQuery (as one of the specified tags) allows you to manipulate unbind.
Avoid using inline click handlers to enhance code readability and maintainability. Consider the following improved approach:
<script>
$(document).ready(function(){
function showAlert(){
alert("This is an alert box!");
}
function showNumber(){
var number = 150;
alert(number);
}
var btn1Enabled = true;
$('body').on('click', 'input[type=button]', function(){
if(this.id==="btn1" && btn1Enabled) {
showAlert();
} else if (this.id==="btn2") {
btn1Enabled = false;
showNumber();
}
});
}):
</script>
<body>
<input id="btn1" type="button" value="Submit 1"></input>
<input id="btn2" type="button" value="Submit 2"></input>
</body>
give this a shot
<div>
<button id="btnOne" type="button">Click Here</button>
<button id="btnTwo" type="button">Or Click Here</button>
</div>
<script>
$('#btnOne').on('click', btnOneClick);
$('#btnTwo').on('click', btnTwoClick);
function btnOneClick() {
alert("You have clicked the first button");
}
function btnTwoClick() {
alert("You have clicked the second button");
}
My project includes a build.js file that is responsible for building the project. It has two main objectives: Compile .ts files and store them in a new directory. Create an asar archive containing the compiled files. Since typescript (or tsc) is availabl ...
Is there a way to extract input text values from an array using JavaScript? Here is the code snippet: Item : <input id="t_item" name="t_item[]" type="text" class="teks3"> Cost : <input id="t_cost" name="t_cost[]" type="text" class="teks3"> &l ...
Currently, I am utilizing Tailwind CSS to style my Next.js website and incorporating the Next.js Image element for an image on the page. My goal is to display a modal over the existing page without completely blacking out the background; instead, I want i ...
Currently developing a JavaScript application, but having some confusion with Regular Expressions. The main goal is to allow users to input a specific format of strings in a text area for the application to process accordingly, thus requiring restriction o ...
Currently, I am delving into the world of JavaScript and my instructor has assigned a task that involves utilizing information from a JSON file within our JavaScript code. The issue I'm facing is deciphering how to effectively convert the JSON data i ...
Is it possible to pass all HTML tag values to another file using AJAX? $.ajax({ url:"myp.php", type:'POST', data: //here I want to include all possible element values in the current HTML document }); Any suggestions or ideas on how to ...
I am currently diving into the world of DataTable.js, a jQuery plugin, and working hard to articulate my questions effectively. For my specific needs, I need to retrieve only 10 records initially whenever an AJAX request is made, even if there are 100 rec ...
I have a PHP file containing two functions. <?php function first () { //in real case more conditions echo "first"; return true; } function second () { //in real case more conditions echo "second"; return true; } first(); second(); ?> And in an ...
My backend server is built using Flask, while my frontend client utilizes JavaScript with jQuery-Ajax to communicate with the server. I have successfully been able to retrieve JSON objects from a POST request, but encountering difficulties when attempting ...
I've encountered an issue with my responsive design. While all elements adjust properly when resizing the height and width of the browser, the background image only changes when I resize the height. When I resize the width, it remains the same. Origi ...
I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...
I have a dynamic select list in my app built with vue.js. I am trying to update a "details" box on the page with information fetched through an ajax request. You can view the code here: https://jsfiddle.net/pznej8dz/1/ I am puzzled as to why the sf_detail ...
https://i.stack.imgur.com/bIbOD.pngI am facing an issue with my Express JS application. Despite having both post() and get() requests, the post() request is not working on my local machine. It keeps throwing a 404 error with the message "Cannot POST / ...
Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...
I've been working on sorting an array that is generated by a PHP script. The PHP script retrieves HTML files from a directory and then utilizes jQuery to fetch and display them on the webpage. Below is a snippet of my current code: <script> $( ...
I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perpl ...
My current setup involves using koa and stripe for processing a one-time payment. Although the functionality is there, I'm facing an issue where the page renders before the 'data' assignment takes place. This results in the 'id' sh ...
My viewModel includes a function: function resetForm(){ loanSystem("lis"); status(""); processor(""); fileType("funded"); orderDate(""); loanNumber(""); team(""); borrower(""); track ...
After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches. I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than abov ...
Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...