bootstrap tooltip/popover on a button not working - javascript

I am using php to authenticate a user login and I would like to show a popover/tooltip saying "invalid username or password" under the sign in button in case the user/password were invalid.
my php part is working, tested with echo, but I can't make the tooltip to work.
I have included the following import
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
created the following javascript function
$(document).ready(function() {
function invalid(){
$('#userNameField').tooltip({
'selector': '',
'placement': 'bottom',
'content' : 'bbbbblblblbl'
});
$('#userNameField').tooltip('show');
}
</script>
my button has the userNameField id
<form class="navbar-form pull-right" action="" method="post">
<input type="submit" class="btn" id="userNameField" value="Sign in">
</form>
and my php stops before I am calling the invalid function (I tested this part with an alert("test") and it is working
?>
<!--Code for invalid username/password combo goes here-->
<script type="text/javascript">
invalid();
</script>
<?php
any ideas what am i doing wrong?

Tooltip doesnot have content property instead you need to use title
Demo
Doc
$('#userNameField').tooltip({
'placement': 'bottom',
'title' : 'bbbbblblblbl'
});
$('#userNameField').tooltip('show');

Related

PHP 2 actions from a single Button

I am wondering how to get 2 actions in PHP from a single Button.
Attached here is an screenshot of the page:
I have the following code:
For the Submit button
<form method='POST'>
<div class="form-group">
<input type="text" name="s_amount" style='width:20%;' required>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" />
</div>
</form>
<?php
$s_amount = $_POST['s_amount'];
echo $s_amount;
?>
AND for the Submit Code button
<button id="submitcode"type="button" class="btn btn-default">Submit Code</button>
<pre><code id="output">.../...</code></pre>
When the Submit code is pressed, this executes the following script
<script>
$(document).ready(function(){
$("#submitcode").on("click", function(){
ocpu.seturl("https://public.opencpu.org/ocpu/library/base/R")
//arguments
var mysnippet = new ocpu.Snippet("V_CT="+$('[name="CT"]:radio:checked').val()+"\r V_TP="+$('[name="LENGTH"]:radio:checked').val()+$('#input2').val());
//perform the request
var req = ocpu.call("identity", {
"x" : mysnippet
}, function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
});
});
})
});
</script>
What I would like to have is a single button, which not only gets the value next to the first submit button (here 12, see attached pciture) but also executes the script.
Many thanks !
try giving id to form tag and on click on submitcode button call the form using its id.
for ex.
<form method='POST'>
function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
// using form id call the form
$("#formdata").submit(); // it will simply submit the form.
});
});
<form method="post" id="formdata"> <!--assign id to form tag-->
</form>
Could finally do it very easily using js.
<input type="text" id="VTP" value="0">
and get the value in the javascript form
document.getElementById("VTP").value
# nikhil borikar: Thanks but it did not work

Could not show the modal after if condition

I have a problem regarding bootstrap modal: I have an input box and a button, in the input box, the user should type their code, then click the check button:
<form class="form-inline" action="" method="post">
<div class="form-group">
<input type="text" class="form-control input-sm input-inverse" name="appcode" required="" data-form-field="appcode" placeholder="Insert Your Code"></div>
<div class="buttons-wrap">
<button name="Xcheck" class="btn btn-secondary display-4 " type="submit" role="button" data-toggle="modal" data-target="#modalID">Check</button>
</div>
</form>
When the button is clicked, it will run a PHP code in the same page, also check either the inserted code exists in the database or not.
Here is the php code:
<?php
$con= mysqli_connect("localhost", "root", "");
mysqli_select_db($con, "cobathesis");
if (isset($_POST['Xcheck'])){
$appcode= $_POST['appcode'];
$check=mysqli_query($con,"select * from applicantdata where appcode='$appcode'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0) {
// the modal should be loaded here
}else{
echo "<script>alert('You Inserted either the wrong Code or the Code is unregistered'); location.href='';</script>";
}
}
?>
Is it possible to use the same button (check button) to post the value and load the modal at the same time?
Thank you for your response.
You could use something like
$('#myForm').on('submit', function(e){
$('#myModal').modal('show');
e.preventDefault();
});
CodePen by Hana Piers

Displaying the content of a DIV on submit

I have a HTML form. On submission the form POST values to page.php. The view then navigates to page.php and displays a success message. I want to prevent the user from navigating to page.php, and display <div id="first">
In other words, what i want to do is a reset. (Displaying <div id="first"> after user clicks the Done button)
<form action="page.php" method="post">
<div id="first" class="m span3">
THIS DIV CONTAINS FEW TEXT BOXES
</div>
<div id="second" class="m2 span3">
THIS DIV CONTAINS FEW TEXT BOXES AND COMBOBOXES
</div>
<div id="last" class="m3 span3">
THIS DIV CONTAINS FEW TEXT BOXES
</div>
</form>
Once the user clicks the DOne button the following function gets fired
function onComplete() {
$('form').submit();
alert("clicked");
}
if you want to post data to main.php without redirecting the page I recommend you to use Ajax. this is a simple code but can give you an idea to build your application :
<html>
<head>
<script type="javascript" src="jquery.js"></script>
<script type="text/javascript">
function complete() {
$.ajax({
type : "post",
data : "text="+$("#"+textbox_1).value,
url : "page.php",
success : function(response){
alert("Done!");
}
});
}
</script>
</head>
<body>
<form action="page.php" method="post">
<input type="text" id="textbox_1">
<button onclick="complete()">submit</button>
</form>
</body>
</html>
and use $_POST['text'] in page.php
$('form').submit(function (e) {
e.preventDefault();
$('first').show();
}
Try something like this.
you can ad a value to the url and use that one value to call the div.
eg:
<form action="page.php?action=formSent" method="post">
// form data
</form>
then use some php to get the action call and use it to show the div:
<?php
if(isset($_GET['action']) && $_GET['action'] == "formSent" ){
<div id="first">
div content
</div>
}
?>
you can place the php code above of the form

Form doesn't work inside fancybox

I have a form that works just fine when I try it out (with the correct address of course).
When I use that for in my site, inside a fancybox it doesn't work. Nothing happens (no error in the console either).
The relevant code is:
<a class="fancybox" href="#inline1" id="link_consultar">
Consultar
</a>
<div style="display: none">
<div id="inline1">
Producto: {$product->
name|escape:'htmlall':'UTF-8'}
<br>
<br>
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
Nombre:
<input type="text" name="firstname">
<br>
<br>
Consulta:
<br>
<textarea rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Enviar Consulta" />
</form>
</div>
</div>
The JS:
$(document).ready(function() {
$('#myForm').submit(function(){
alert("submitted");
});
});
I have also tried:
$(document).ready(function() {
$("#myForm").on("submit", function(event){
alert("submitted");
});
});
I have included the form plugin like this:
<script src="http://malsup.github.com/jquery.form.js"></script>
With no success, the end goal is to send form by AJAX, this is a simplified example to debug.
What I don't understand either is that even when I remove all js it wont direct me to the action page.
You can see a live example here (When you click consulta).
The problem is shown on your live site. Upon examining the source code, you can see that you're adding a form within another form
<form id="buy_block" action="http://danielvi.com/index.php?controller=cart" method="post">
[...]
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
[...]
</form>
</form>
Which invalidates the second form you're working with. That is why it's not doing anything. Other than that, the code is valid.
On the live site, you seem to be missing the <form> element in the #fancybox-content.
You've got the contact form inside form#buy_block which is invalid. Try moving the whole <div id="inline1"> outside of the <form id="buy_block
$("input[type='submit']").click(function(){
$.ajax: {
type : "POST",
cache : false,
url : "http://danielvi.com/send_mail.php",
success: function(data) {
$.fancybox({
'width': 400,
'height': 400,
'enableEscapeButton' : false,
'overlayShow' : true,
'overlayOpacity' : 0,
'hideOnOverlayClick' : false,
'content' : data
});
}
}
});

jQuery exception with document.ready() - Object doesn't support this property or method

I'm trying to perform some simple validation, and I'm following some instructions in the book JavaScript & jQuery, The Missing Manual. My code is simply this:
<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<form> form code here </form>
<script>
$(document).ready(function() {
$('#vaporizerForm').validate();
});
</script>
And I'm getting this error:
Unhandled exception at line 1039, column 15 in /Scripts/jquery-1.6.2.js
0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method
If I remove the $(document).ready part, and just do this, it works:
<script>
$('#vaporizerForm').validate();
</script>
Any idea why the $(document).ready() part isn't working?
EDIT -- jQuery call stack and code
EDIT - Entire code in the view
#model IEnumerable<DistributorManagement.Models.Vaporizer>
#{
ViewBag.Title = "Vaporizer";
}
#{
var grid = new #WebGrid(
source: Model,
rowsPerPage: 10);
}
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#vaporizerForm').validate();
});
</script>
<form action="#" method="post" name="vaporizerForm" id="vaporizerForm">
<div>
<label>Manufacturer</label>
<input name="manufacturer" type="text" class="required" />
<label>BuildDate</label>
<input name="buildDate" type="text" class="required date" />
<label>Rating</label>
<input name="rating" type="text" class="required number" />
</div>
<div>
<input type="submit" name="submit" value="Submit" />
</div>
</form>
<br />
<h1>Vaporizer Info</h1>
<div class="webgrid-wrapper">
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-rows",
columns: grid.Columns(
grid.Column("Id", "ID"),
grid.Column("Manufacturer"),
grid.Column("Status"),
grid.Column("BuildDate", "Build Date"),
grid.Column("Rating")))
</div>
</div>
I'll go for the obvious answer, are you sure the file at ~/Scripts/jQuery/jquery.validate.js is ok? It is acting like that file is empty, or broken.
To check if the file is ok, navigate to that directory observe the file and open it in the editor, does it have any content.
If you take out the document ready stuff you probably need the following code to see an error:
try {
$('#vaporizerForm').validate();
}
catch () {
alert('still have error');
}
Put your validation script before the <form>.
<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('#vaporizeForm').validate();
});
</script>
<form> form code here </form>
Here is a fiddle as an example.
Try with this:
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
-- EDITED --
And put the $(document).ready(.......) in the bottom of your page.
This happens with some versions of IE, when your page is too long.... put it before the body !

Categories

Resources