I want to copy the attribute value val="ok" of my link to an input field in my bootstrap modal :
$('#link').on('click', function() {
var x = document.getElementById("link").getAttribute("val");
$("#mail").find(".compose").value = x;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control" placeholder="To:" class="compose" value="" />
You should create custom data attribute data-val for example and then you can access it like yourElem.dataset.val
var a = document.getElementById('link');
a.addEventListener('click', function() {
var val = a.dataset.val;
document.querySelector('.compose').value = val;
})
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />
You can also use JQuery use data()
$('a').click(function() {
$('input').val($(this).data('val'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="modal" data-target="#mail" id="link" data-val="ok" class="btn btn-warning btn-flat" title="Mail"><i class="fa fa-envelope"></i>Link</a>
<input class="form-control compose" placeholder="To:" value="" />
Related
I have a list of store items. Each item is showing its values as a form.
<?php
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" style="text-align:right;"/>
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" name="restar" id="'.$row["id"].'" " >
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" name="sumar" id="sumar"">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
</div>
';
}
}
?>
I need to identify when the user clicks on button 'restar' from a certain form item.
This is my current script, but it doesn't launch the expected alert.
<script type="text/javascript">
$(document).ready(function(){
var product_id = $(this).attr("id");
$('#restar'+'product_id+').on('click', function(event) {
alert("ssssspp2");
});
});
</script>
Use class for describing similar objects, e.g.:
$('.js-some-btn').click(function() {
console.log("I'm button");
console.log("My id is " + $(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar1" id="id1">btn 1</button>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar2" id="id2">btn 2</button>
This approach allows you to write only one click handler for all buttons with provided class.
I am stuck with creating a function in ajax that would take a value from variable "code2" and send it to controller which would send it to database. Problem I am getting all the time is :
Is This Really Working? Oh by the way: newLat: code2
So it kind of works however instead of newLat: code2 it should be newLat: (html code defined in variable code2) So how can I fix this?
JS:
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this).attr("href"), function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
var code2 = "";
document.getElementById("content-link2").onmousedown = function() {
mousedown();
};
document.getElementById("content-link2").onmouseup = function() {
mouseup();
};
function mousedown() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
AJAX:
function updateDatabase(newCode)
{
code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
// make an ajax request to a PHP file
// on our site that will update the database
// pass in our lat/lng as parameters
$.post('http://localhost/template', {
_token: $('meta[name=csrf-token]').attr('content'),
newCode: ("code2"),
})
.done(function(code2) {
alert(code2);
})
.fail(function() {
alert("error");
});
}
Route:
Route::group(['middleware' => ['web']], function () {
Route::get('home', 'BuilderController#homepage');
Route::get('template', 'BuilderController#templates');
Route::post('template', 'BuilderController#postDB');
Route::get('logout', 'BuilderController#getLogout');
});
Controller:
class BuilderController extends Controller
{
function templates()
{
$templates = Template::all();
return view('layouts/template', ['templates' => $templates]);
$id = $templates->id;
}
function homepage()
{
return view('layouts/home');
}
public function getlogout()
{
\Auth::logout();
return redirect('/home');
}
public function postDB(Request $request) {
$newLat = $request->input('newCode');
return "Is This Really Working? Oh by the way: newLat: $newLat";
return redirect('layouts/template', ['templates' => $templates]);
}
}
Blade:
#extends('layouts.master') #section('title', 'Website Builder') #section('content')
<div class="container template_class ">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img src="{{ asset($template->image )}}"/>
</a> #endforeach
</div>
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo" data-size="sm" data-badge="false" onchange="readURL(this);" />
<button onClick=" updateDatabase(this);"</button>
<script>
$( function() {
$( document ).tooltip();
} );
</script>
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input title="Choose a color and then click on any box" style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select title="Choose a font and then click on any box" style="display: none" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select title="Choose a font and then click on any box" style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select title="Choose a font size and then click on any box" style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
<button type="button" class="form-control margin btn btn-warning" id="getRequest">Save</button>
</div>
<div id="content-link2"></div>
</body>
<link href="{{asset('css/bootstrap-colorpicker.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/bootstrap-formhelpers.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset ('//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{!! asset('js/bootstrap-colorpicker.min.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/bootstrap-formhelpers.js') !!}">
</script>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
<script type="text/javascript" src="{!! asset('js/bootstrap-filestyle.min.js') !!}">
</script>
</html>
#endsection
Check /path/to/project/root/storage/logs/laravel.log for what Internal Server Error is occurring. If there is no log file make sure APP_DEBUG in /path/to/project/root/.env is set to true.
There are two problems that I have with my Javascript, first I think function is very long and I would like to find out if there is a way to reduce it, the problem is it needs to be working together as all of this Javascript is allowing to edit a page.
2nd problem is that when I change font and/or choose font size it will change both things, so for example if I change font-size in one div and then I want to change font-family for other it will change font-size and font-family, so what should I do so that after each edit it turns off click function but if pressed again it will add it back so that feature can be used again, so basically only one feature can be used at the time.
$(function() {
$('#cp4').colorpicker().on('changeColor', function(e) {
$('#content-link2')[0].style.backgroundColor = e.color.toString(
'rgba');
});
});
$(document).ready(function() {
$("#startEdit").click(function () {
if ($("#startEdit").on('click')) {
$(document).ready(function() {
var font;
$("#fonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var font;
$("#googlefonts1").on("change", function(){
font = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-family',font);
});
});
$(document).ready(function() {
var fsize;
$("#fontsizes1").on("change", function(){
fsize = $(this).val();
});
$("#content-link2").on("click", "*", function() {
$(this).css('font-size',fsize);
});
});
$(document).ready(function() {
var color;
$("#colorChoice").on('input', function(){
color = $(this).val();
});
$('#content-link2').on('click', '*', function() {
$(this).css('background',color);
});
});
} else {
$( "#content-link2" ).off( "click" );
}
});
});
<div class="features form-group">
<input class="filestyle form-control margin images" data-input="false" type="file" data-buttonText="Upload Logo"
data-size="sm" data-badge="false" onchange="readURL(this);" />
<!--<button onClick=" updateDatabase(this);"</button>-->
<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>
<button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>
<input style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">
<a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>
<button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>
<select style="display: none" data-font="Arial" id="fonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
<button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
<select style="display: none" id="googlefonts1" class="form-control margin"></select>
<button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
<button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
<select style="display: none" id="fontsizes1" class="form-control margin"></select>
<button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
<button class="form-control margin btn btn-default" id="startEdit">Edit</button>
</div>
In my case, I want to make plus or minus button with add or minus to count number into text box. I can do it. But I've got the error. There have multi row with same design but different ID (I mean working with auto increment ID). When I click on plus button of top or middle row but it doesn't work on it's own row. It's always work on the last row.
Here is my Screenshot
Here is my HTML in JQuery Code. When Click on Add button at right top corner, this code work. It's doesn't the problem.
<input id="qty1" type="text" class="form-control dateadd" style="border- radius:0px;" name="count_date[]" value="0">
Here is my processing JQuery codes.
var test;
$('.dateadd').each(function() {
var test = this.id;
console.log("ID is",test, "Hello, world!");
});
$(document).ready(function(){
$('.plus').click( function() {
var counter = $(test).val();
counter++ ;
$(test).val(counter);
});
});
$(document).ready(function(){
$('.minus').click( function() {
var counter = $(test).val();
counter-- ;
$(test).val(counter);
});
});
Here is my Row HTML Code
<div class="col-sm-5" style="padding-right:0;">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
</div>
Here is my Row Add Jquery + HTML Code
var perDayHtml = '<div class="col-sm-5" style="padding-right:0;">'+
'<div class="input-group">'+
'<span class="input-group-btn">'+
'<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>'+
'<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>'+
'</span>'+
'<input id="qty1" type="text" class="form-control dateadd" style="border-radius:0px;" name="count_date[]" value="0">'+
'</div>'+
'</div>'
$("#optionBox").on('click', '.addPerDay', function(){
$('.remove').prop('disabled', false);
if (rowNo<maxi && rowNo<minusmaxi) {
rowNo++;
plan++;
$(".perDay:last").after(perDayHtml.replace(/qty1/g,"qty" + rowNo));
I guess that you've plus/minus button in same div with the dateadd input so you could just go up to the parent div then find the dateadd input :
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter-- ;
parent.find('.qty').val(counter);
});
});
NOTE 1: NO need for multiple ready function.
NOTE 2: You should use event delegation .on() instead of .click() since your code is added dynamically to the DOM.
NOTE 3: Check in minus click event if the qte is greater than 0 before decreasing the counter :
counter>0?counter--:counter;
Hope this helps.
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter>0?counter--:counter;
parent.find('.qty').val(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked
HTML
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>
JQUERY
$('#submit1').click(function() {
$('#tes').prop("disabled",true);
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
Use this Generalized function in your project to make things enabled / disabled.
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#submit1').click(function() {
$('#tes').toggleDisabled();
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>
You can use this one.
$('#submit1').click(function() {
$('#tes').prop("disabled",!$('#tes').prop("disabled"));
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>
.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.
if( $('#tes').prop("disabled") )
$('#tes').prop("disabled",false);
else
$('#tes').prop("disabled",true);
You could reduce this to:
$('#tes').prop("disabled", !$('#tes').prop("disabled") )
This fetches the current value of the property, negates it with !, then sets that as the new value
If what you want is to toggle the disable prop:
$('#submit1').click(function() {
$('#tes').prop("disabled", !$('#tes').prop("disabled"));
});