I want to show a tooltip when the user didn't click the specific button while submitting a form. I prevent the form from submitting and I want to show just the tooltip to say "you should click first the button". Thank's in advance.
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
</form>
<script>
$('#signUpForm').submit(function(e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
}
});
</script>
try this, make button type as button instead of submit:
<form id="signUpForm" >
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7" >I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="button" id="btn-submit" value="submit">
</form>
<script>
$('#btn-submit').click(function(e){
if($('#hidden').val()=='0'){
}
else {
$('#signUpForm').submit();
}
});
</script>
Check below script it will helpful to you for display the tooltip.
<script>
$(".tooltip").hide();
$('#signUpForm').submit(function (e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
$("#signUpForm").find(".tooltip").stop().fadeIn();
setTimeout(function () {
$("#signUpForm").find(".tooltip").stop().fadeOut();
}, 1000);
}
});
</script>
HTML Part
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
<div class="tooltip">
you first click the agree button
</div>
</form>
Related
I want to have the btnDisableFilteredList disabled during the initial page load. Then I want to enabled the enable it after the btnSearch button is click. How do I do it using jQuery?
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" /><input type="submit" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
You need to give the btnDisableFilteredList the disabled prop first:
disabled="disabled"
Then setup an on click event listener on the btnSearch input to remove the disabled prop from the btnDisableFilteredList input.
$(function() {
$("#btnSearch").on("click", (e) => {
e.preventDefault();
$("#btnDisableFilteredList").prop("disabled", false);
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" />
<input type="submit" id="btnSearch"value="Filter"/>
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" disabled="disabled"/>
</form>
Try in this way:
$(document).ready(function() {
$("#btnSearch").click(function () {
$("#btnDisableFilteredList").css("display", "inline-block");
});
});
#btnDisableFilteredList {
display: none;
}
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search:
<input type="text" name="SearchString" />
<input type="button" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
Look at this codepen
I used type="button" instead of type="submit" to avoid reloading the page, then to submit the form you can use jQuery's AJAX Function
I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code
I am working on Yii2 application which has one submit button, as below
<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">
When I click the button, it is disabled and the text changes, as below
<button id="next" class="btn btn-primary btn-submit disabled" data-loading-text="Please wait, processing..." value="1" name="next" type="submit" disabled="disabled">Please wait, processing...</button>
Now I have added one text field with required attributes, as below
<input id="name" class="form-control" type="text"maxlength="255" required="required" title="">
My issue is that when I click on the submit button when the text field is empty, it shows me that field is required but at he same time the button becomes disabled.
How do I return this button to its original enabled state if the text field is empty?
You should use both removeAttr('disabled') and removeClass('disabled')
Try the below approach.
$name = $('#name');
$next = $('#next');
$next.on('click', function() {
$(this).addClass('disabled').attr('disabled', 'disabled').text($(this).data('loading-text'));
// Your work here
})
$name.on('input', function() {
changeState($(this));
})
changeState($name);
function changeState(elem) {
if (elem.val().trim().length) {
$next.removeClass('disabled').removeAttr('disabled');
} else {
$next.addClass('disabled').attr('disabled', 'disabled').text('Next');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" class="form-control" type="text" maxlength="255" required="required" title="">
<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">Next</button>
I'd like to have two buttons that submit the same value (determined by the input field).
<form action="index.html">
<button type="submit" name="btn1">Btn1</button>
<button type="submit" name="btn2">Btn2</button>
<input type="text" value="50">
</form>
It should result in:
Btn1 => index.html?Btn1=50
Btn2 => index.html?Btn2=50
call index.html according to teh button clicked.
<script type="text/javascript">
function setButton1Value(){
//call index.html?Btn1=50
}
</script>
<script type="text/javascript">
function setButton2Value(){
//call index.html?Btn2=50
}
</script>
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="setButton1Value()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="setButton2Value()">Btn2</button>
</form>
Two buttons can not send the same value as only one is clicked at a time. For one button to send the value you can try this :-
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="putValue()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="putValue()">Btn2</button>
</form>
<script type="text/javascript">
function putValue(){
document.getElementById('btn1').value=document.getElementById('input').value;
document.getElementById('btn2').value=document.getElementById('input').value;
}
</script>
I would like to have ajax submit (without reloading the page) on multiple inputs.
So I have a form which has several input fields with edit and save buttons. When a user click on edit, it focuses on that input field and save with ajax.
The question is, how to make the save button with ajax submit without reloading the page and only that edited field will be changed on save.
Here's my html and js:
HTML
<br>
<br>
<label>Fullname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
<br>
<label>Nickname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
JS
jQuery(document).ready(function () {
$('.btn-save, .btn-cancel').hide();
var inputVal;
$('.btn-edit').click(function () {
$(this).closest('div').find('.btn-edit').hide();
$(this).closest('div').find('.btn-save, .btn-cancel').show();
$(this).closest('div').find('input').removeAttr('readonly').focus();
inputVal = $(this).closest('div').find('input').val();
});
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
$('.btn-cancel').click(function () {
$(this).closest('div').find('input').val(inputVal);
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
});
I created a demo on JSFiddle. Please help....
DEMO
In your save button put ajax request onclick:
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
var inputValue=$(this).closest('div').find('input').val();
$.ajax({ URL:"submit url",
type:"POST",
data:{ inputValue:inputValue },
success:function(data){
// do whatever you want with the response
}
});
});
Please read more about jQuery ajax documentation as what Euphoria said.