I have two form fields.if clicked the text from <div class="offer-text"> RS.750/- </div> the RS.750/- could be appear in the button. since I am new to bootstrap. Can anyone help me to do this?
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block"/>SEND</button>
</div>
</form>
</div>
<div class="col-sm-3"></div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
To send the value to the form button use the following code:
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
demo
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
$("img").click(function() {
$("form button[type=submit]").text($(this).attr("value"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block" />SEND</button>
</div>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"> </div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
<img src="img/Sar Utha Kay Jeo.png" alt="IMG" style="width:100%" value="RS.1750/-" class="hover-shadow cursor">
Related
I am making a CV builder, and I already made a button with jQuery to add and delete a form, but when I add, it just goes down, so I can add more, but the first form stays there, and I cannot delete the first form.
Example
You see how it goes down, and I need a button so I can remove the first one also:
As you can see in the pictures, i add a form, and a form comes up, but the add button moves down, as it should, because I put it aside of the div. But I need to add a red button to delete the first form, if someone wants to.
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
Consider the following.
$(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
if (!$(this).hasClass("clicked")) {
console.log("Adding Button");
$("<div>", {
class: "input-group-btn"
}).appendTo($(".row:eq(0) .input-group:eq(0)").eq(0));
$("<button>", {
class: "btn btn-danger remove",
type: "button"
}).html("<span class='button ripple-effect' style='background-color: #B31C1C;'>Ukloni</span>").appendTo($(".row:eq(0) .input-group:eq(0) .input-group-btn"));
$(this).addClass("clicked");
}
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
It seems you only want to add the button the first click. We can check to see if a Class exists as a quick check, if it does NOT exists, we can perform the one-time action, and add the Class.
Then it is just a matter of adding the proper elements.
In this example I have the onclick function on the main div and i dont want the button to execute the same onclick, only execute its own? how should i paroach this?
<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
<div>
<button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
Thank you in advance!
You can do that by calling event.stopPropagation(); in the button.
<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
Read more about it from Here
But I would suggest a cleaner solution,
Separate the card body from the card footer where the button exist.
<div class="card card-body item">
<div onclick="$('#extra-info').slideToggle();">
<div class="row">
<h6 style="position:absolute;left:2%;">Comanda #1</h6>
<h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
<div class="col col-md-10">
<h5>Cristian Cutitei</h5>
<h6>0737032567</h6>
</div>
</div>
</div>
<div>
<button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
</div>
</div>
<div id="extra-info" style="display:none;">
<br>
</div>
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
I have a problem,and I don`t understand.. absolute..
So I tried to use html2canvas.js. I want to render html to img. The content is in modal. Till here no any problems.
When I try to render that area what I want the toDataUrl() is empty.
But when I try to render a simple button,its working!
Both of is in a Modal. My code:
<div class="modal-body ">
<div class="print" id="printDiv">
<div class="rows nopm">
<div class="full">
<div class="head">
Make & Model
</div>
<div class="data">
{{$data['make']}} {{$data['model']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/age.png')}}"> Age
</div>
<div class="data">
{{Carbon\Carbon::parse($data['age'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/enginesize.png')}}"> Engine Size
</div>
<div class="data">
{{$data['eng_size']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/vrt.png')}}"> VRT
</div>
<div class="data">
{{Carbon\Carbon::parse($data['vrt_date'])->format('m/Y')}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/power.png')}}"> Power
</div>
<div class="data">
{{$data['eng_hp']}}PS ({{$data['eng_kw']}}KW)
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/roadlicence.png')}}" > Road tax
</div>
<div class="data">
{{$data['vrt_price']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/fuel.png')}}" > Fuel
</div>
<div class="data">
{{$data['fuel']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/mileage.png')}}" > Mileage
</div>
<div class="data">
{{$data['mileage']}}
</div>
</div>
<div class="half">
<div class="head">
<img src="{{asset('img/vehicle_icon/transmission.png')}}"> Transmission
</div>
<div class="data">
{{$data['trans']}}
</div>
</div>
</div>
<div class="rows nopm">
<div class="quatrohead">
Extras
</div>
<div class="quatro">
#foreach($data_extra as $extra)
#if ($loop->last)
{{$extra}}
#else
{{$extra}},
#endif
#endforeach
</div>
<div class="quatrohead">
Price
</div>
<div class="quatroless">
€{{$data['price']}}
</div>
</div>
</div>
</div>
<div id="targetCanvas">
<img class="imageCanvas" src="">
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-default" id="print">Print</button>
</div>
</div>
</div>
</div>
<script>
$('#printModal').on('shown.bs.modal', function (e) {
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
})
Place your script in
$(window).load(function (){
//Your script here
})
Or you could try with
setTimeout(function (){
html2canvas($('#print'), { //like that its working ,with #printDiv no
onrendered: function (canvas) {
theCanvas = canvas;
console.log(theCanvas.toDataURL());
document.querySelector('.imageCanvas').src = theCanvas.toDataURL();
}
});
},1000)
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).