<div id="success">
<button class="btn btn-primary btn-xl" type="submit" id="btnShow">Send</button>
</div>
I am not able to write javascript(facing errors, as i am new to javascript) to display success alert on click event.
the script i wrote is :
$("#btnShow").click(function(){
$(".alert").show();
});
As easy as this:
<script>
function success() {
alert("success!");
}
</script>
<div id="success">
<button onclick=success() class="btn btn-primary btn-xl" type="submit" id="btnShow">Send</button>
</div>
Elements can have an onclick property, with a function's name.
what you need is a simple built-in java script function
<script type="text/javascript">
$(document).ready(function() {
$('button#btnShow').click(function(){
alert("Success");
});
});
</script>
Related
I have a SendMail button which on click calls the JavaScript function. Which upon validating gives the alert message. But that is a default alert which I am using. How can I create a customised alert in JavaScript.
My HTML Code:
<div id ="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id ="cancel" style='margin-right:16px' class="btn btnprimary btn-lg pull-right" a href="javascript:window.history.back()">Cancel</button>
<button id ="sendMail" style='margin-right:16px' class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
And this is my index.js file
function sendMail(){
console.log(employee_id);
var employeeid = employee_id;
$.ajax({
url:'http://localhost:8088/JirasTrackingApp/reporter/
Reportees/JiraNames/'+employeeid,
type:'GET',
success: function(Jiranumbers){
alert("Mail is sent successfully"); //here I need to be able to call the customized alert instead of that default alert
},
error: function(Jiranumbers){
alert("Mail is not sent successfully");
}
});
Please advice, Thanks.
Your question very similar to this and I know you got your answer in this query.
how to change the style of alert box
I used a loop to get and display all the details for each event that a user added. Inside the loop i included a button for a modal. The thing is if i have more than one event, the <button class="btn btn-success" id="read">Read More</button> won't work. How will work around this?
This the php code
<?php
while ($event_row = mysqli_fetch_array($event_data)){
$event_img = $event_row['event_img'];
$img_src = "../admin/eventImages/".$event_img;
echo '<div class="col-sm-6 p0">
<div class="box-two proerty-item">
<div class="item-thumb">
<img src="'.$img_src.'">
</div>
<div class="item-entry overflow">
<h5>'.$event_row['event_name'].'</h5>
<div class="dot-hr"></div>
<span class="pull-left"><b> Date: </b>'.date("Y-m-d h:i A", strtotime($event_row['event_start'])).'</span>
<span class="pull-left"><b>Location: </b>'.$event_row['event_location'].'</span>
<div class="property-icon">
<button class="btn btn-success" id="read">Read More</button>
</div>
</div>
</div>
</div>';
}
?>
and this is my jquery code:
$(document).ready(function(){
$("#read").click(function(){
("#readmore").modal("show");
});
});
Add class selector. Also add some unique attribute to each button for identification.
<button class="btn btn-success read-more" id="read-more-1">Read More</button>
$(document).ready(function(){
$(".read-more").click(function(){
console.log($(this).id);
$("#readmore").modal("show");
});
});
If you have multiple buttons, than you need to use class instead of id as ID is always unique:
Change in HTML:
<button class="btn btn-success readmore">Read More</button>
Change in JQuery:
$(document).ready(function(){
$(".readmore").click(function(){
("#readmore").modal("show");
});
});
I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.
Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit
I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>
When I click on a button "Click Me" it change into "Loading" and after loading it becomes "Loading Complete".
How can I change this text "Loading" to "Saving" and "Loading Complete" to "Saved Successfully"?
You can view what I want from this link
<script type="text/javascript">
$("#myButton").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
$(this).dequeue();
});
});
});
</script>
<div class="bs-example">
<button type="button" class="btn btn-info"
id="myButton" data-complete-text="Loading Completed"
autocomplete="off">Click Me</button>
</div>
In the bottom of the code you have the following:
<button type="button" class="btn btn-info" id="myButton" data-complete-text="Loading Completed" autocomplete="off">Click Me</button>
There is a property named data-complete-text="Loading Completed"
Here you can change the text when the button is loaded.
To add text while loading. Add the following property:
data-loading-text="loading-text.."
The product looks like this:
<button type="button" class="btn btn-info" id="myButton" data-loading-text="YOUR LOADING TEXT" data-complete-text="YOUR LOADED TEXT" autocomplete="off">Click Me</button>
I have a toggle buttons:
<div class="btn-group btn-group-vertical btn-block no-padding" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-block full-width">button1</button>
<button type="button" onclick="admLayer();" class="btn btn-block full-width">button2</button>
</div>
When i press button2 i call admLayer() function. All works fine but like simple button. How to send to function when button pressed or unpressed?
UPDATE
I try use http://www.larentis.eu/bootstrap_toggle_buttons/ :
<script>
$('#btn-group btn-group-vertical btn-block no-padding').toggleButtons({
onChange: function ($el, status, e) {
console.log($el, status, e);
}
});
</script>
But its not work.
Whats can be wrong?
You are mistakenly selecting the div on the basis of Id, If you want to select the div, you should do something like this :-
<script>
$(".btn-group").toggleButtons({
onChange: function ($el, status, e) {
console.log($el, status, e);
}
});
</script>
Classes are selected with Dot('.') and ids are selected with Hash('#').
Thanks