I'm using jhuckyaby WebcamJS. If there is no detected webcam show the id #forHide, else show the id #upload:
<div class="row" id="forHide">
<div class="d-inline-block ml-3">
<div id="my_camera" class="mb-2"></div>
<input type=button value="Configure" class="btn btn-primary btn-sm ml-1" onClick="configure()">
<input type=button value="Take Snapshot" class="btn btn-primary btn-sm" onClick="take_snapshot()">
<input type=button value="Save Snapshot" class="btn btn-primary btn-sm" onClick="saveSnap()">
</div>
<div class="d-inline-block ml-5">
<div id="results"></div>
</div>
</div>
<div id="upload">
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
I read the docs on GitHub and I tried to implement this code but somehow no result.
Webcam.on( 'error', function(err) {
// hide element
} );
Check below code to hide forHide id using pure JavaScript:
Webcam.on('error', function(err) {
var x = document.getElementById("forHide");
x.style.display = "none";
});
For more information read this : https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
Related
I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?
You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!
I wanted to work on a form which, when clicking on a button, let the parent-form disappear. I tried several things with Javascript and after I while I got a working function that works with a click on an a-tag, but not when trying the same with the button. I don't understand why, but assume it has something to do with the button-element.
Then I have the whole form and div which contains the form (shortened, just to show the structure, the form / construction works).
The following is my function:
function hideFunction() {
$("#submit").closest("#fullbody").css({"display":"none"});}
<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">
<div id="register" role="form" class="r_form_elements">
<form method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
<div class="w3-row">
<button type="submit" id="submit" name="login" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction();">Add</button>
<button class="w3-button w3-black w3-half w3-hover-pale-yellow" id="forgot">Forgot Password</button>
<a id="submit" onclick="hideFunction();">CLICK</a>
</div>
</form>
</div>
</div>
So as I said, the function works when clicking on the a-tag, but not when clicking on the button. Does anybody have an idea?
Thanks in advance.
you can use event.preventDefault() like this:
function hideFunction(event) {
event.preventDefault();
$("#submit").closest("#fullbody").css({"display":"none"});}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">
<div id="register" role="form" class="r_form_elements">
<form method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
<div class="w3-row">
<button type="submit" id="submit" name="login" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction(event)">Add</button>
<button class="w3-button w3-black w3-half w3-hover-pale-yellow" id="forgot">Forgot Password</button>
<a id="submit" onclick="hideFunction(event)">CLICK</a>
</div>
</form>
</div>
</div>
when you clicked on the button that type is "submit", page has refreshed and your code does not work correctly.
test the following HTML Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">
<div id="register" role="form" class="r_form_elements">
<form method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
<div class="w3-row">
<input type="submit" id="submit" name="login" value="Add" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction(event)" />
<input type="button" id="forgot" value="Forgot Password" class="w3-button w3-black w3-half w3-hover-pale-yellow"/>
</div>
</form>
</div>
</div>
And following jQuery Code:
$(function(){
$("#submit").on("click",function(e){
e.preventDefault();
$(e.target).parents("form").submit()
$(e.target).parents("#fullbody").css("display","none");
});
});
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>
I am trying to incorporate into a button group 2 forms and a page redirect, using Bootstrap 3 and Laravel 5.2.
I cannot get the buttons to format correctly, primarily because two of them are wrapped by a "form" element.
My HTML is as follows:
<div class="btn-group pull-left">
<a class="btn btn-primary btn-sm" href="{!! route('client.create') !!}">
<i class="ion-plus"></i> New
</a>
{!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
<input name="visibility" class="hidden" value="true">
<button type="submit" class="btn btn-primary btn-sm">
<i class="ion-ios-eye"></i> Visible
</button>
{!! Form::close() !!}
{!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
<input name="visibility" class="hidden" value="false">
<button type="submit" class="btn btn-primary btn-sm">
<i class="ion-ios-locked"></i> Hidden
</button>
{!! Form::close() !!}
</div>
Is this possible without using jQuery? Thanks!
The below link has a working solution that should work for you
How to group buttons in different forms tags in Bootstrap
Create multiple BTN Form Groups
http://jsfiddle.net/isherwood/TRjEp/
<br />
<form class="btn-group">
<button class="btn">Button One</button>
<input type="hidden" class="btn" />
</form>
<form class="btn-group inline">
<input type="hidden" class="btn" />
<button class="btn">Button Two</button>
</form>
<form class="btn-group inline">
<input type="hidden" class="btn" />
<button class="btn">Button Three</button>
</form>
Additional CSS:
.btn-group+.btn-group {
margin-left: -5px;
}
The code seems to work with that HIDDEN Btn, not sure why.
I not sure how to code works, but this works for me in datatables column:
<div class="btn-group btn-group-sm">
<?php echo form_open('edit_files', 'class="btn-group"');?>
<button type="submit" class="btn btn-primary" name="id">Edit</button>
</form>
<?php echo form_open('view_files', 'class="btn-group"');?>
<button type="submit" class="btn btn-success" name="id">View</button>
</form>
I am a noob in web development so I am stuck at getting data from a modal and saving it to database.
I have made model with bootstrap. Below is the code of the modal
code of modal
<form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
What I am trying to accomplish is get the data entered in this popup modal save it in database by pressing save button in the modal and clear the pop so that user can enter data again. I want to save the data by using PHP Query .Kindly suggest me a way to get it done . I have seen a lot of tutorials and almost every question on stack overflow as well but I am unable to get it done.
You can use ajax to do that; Try this
Your contact page
<div id="contact">
<h3>Contact Us For Any Query</h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();
var info = $("#form").serialize();
$.ajax({
type: "POST",
url: "add.php",
data: info,
success: function(result){
//$("#form")[0].reset();
$('#notification').html(result);
}
});
e.preventDefault();
});
});
</script>
<!--div for notification -->
<div id="notification"></div>
<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add parts</h4>
</div>
<div class="modal-body">
<input type="text" name="field1" placeholder="Part Name" id="pName" />
<br>
<br>
<input type="text" name="field2" placeholder="Piece Code" />
<br>
<br>
<input type="text" name="field3" placeholder="Piece Price" />
<br>
<br>
<input type="text" name="field4" placeholder="Quatity" />
<br>
<br>
<input type="text" name="field5" placeholder="Total" />
<br>
<br>
<input type="text" name="field6" placeholder="Comments" />
<br>
<br>
<input type="text" name="field7" placeholder="Shipped" />
<br>
<br>
</div>
<div class="modal-footer">
<button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
</div>
</div>
</div>
</div>
</div>
And the PHP page i.e. add.php for adding the data
<?php
//connection to your database
//remember to change the host, dbname, and password to yours,
$db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8',
'root',
'',
array(PDO::ATTR_EMULATE_PREPARES => false,
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
<?php
if (isset($_POST['field1'])) {
$field1 = $_POST['field1'];
$field2 = $_POST['field2'];
$field3 = $_POST['field3'];
$field4 = $_POST['field4'];
$field5 = $_POST['field5'];
$field6 = $_POST['field6'];
$field7 = $_POST['field7'];
$stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
$stmt->bindParam(':field1', $field1);
$stmt->bindParam(':field2', $field2);
$stmt->bindParam(':field3', $field3);
$stmt->bindParam(':field4', $field4);
$stmt->bindParam(':field5', $field5);
$stmt->bindParam(':field6', $field6);
$stmt->bindParam(':field7', $field7);
$stmt->execute();
echo 'added';
}
?>
Hope my answer would be of some help to you:
Keep form inside modal, and give a php file(ex: test.php) as action.
Here is the code I would suggest you to try:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form action="test.php" method="POST">
<!-- Modal content-->
</form>
</div>
</div>
Write a test.php file and retrieve values using $_POST method.