i have a modal that looks like this and i wanna auto fill the price input value whenever i choose a product from the article list. How do I go about to achieve this ? Thank you
<div class="modal-body">
<div>
<label for="type">article</label>
<select id="article" name="article" class="form-control">
{{#each articles}}
<option>{{name}}</option>
{{/each}}
</select>
</div>
<input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
<input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
<input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
<button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>
any help ??
I didn't test it, but something like this..?
<div class="modal-body">
<div>
<label for="type">article</label>
<select id="article" name="article" class="form-control">
{{#each articles}}
<option data-price="{{price}}">{{name}}</option>
{{/each}}
</select>
</div>
<input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
<input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
<input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
<input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
<button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>
<script>
$(document).ready(function () {
$('#article').change(function () {
var price = $(this).find(':selected').attr('data-price');
$('#price').attr('value', price);
});
});
</script>
Related
I was trying to create other fields to be unclickable when the first input is focused but it seems it doesn't work. I did an illustration so that it will be understandable and my code looks like this.
May I know where I did it wrong?
$('.form-control').click(function() {
$(this).parent('div').next().children('.form-control').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
You want something like this:
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
$(this).parent('div') returns something like <div class="name"> and then using .next() will not find anything since it don't have any siblings.
Demo
$('.form-control').click(function() {
$(this).closest('form').find('.form-control:disabled:first').prop('disabled', false);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<div class="name">
<input class="form-control" type="text" placeholder="name" />
</div>
</div>
<div>
<div class="age">
<input class="form-control" type="text" placeholder="age" disabled="disabled" />
</div>
<div class="city">
<input class="form-control" type="text" placeholder="city" disabled="disabled" />
</div>
</div>
<div class="submit">
<input class="form-control" type="submit" value="Submit" disabled="disabled" />
</div>
</form>
I already have form object like this in a variable:
<form method="post" id="modal_form1" action="http://localhost/bookmark/post_crud_model_form">...</form>
How can I serialize it using jQuery only?
JS
function submit_form(form){
var se = String(form);
console.log($(se).serialize());
}
Form in Console
<form method="post" id="modal_form1" action="http://localhost/bookmark/post_crud_model_form"><input type="hidden" id="input1" value="1"><div class="form-group">
<label for="recipient-name" class="col-form-label">Link</label>
<input type="text" class="form-control" id="input1" value="FIRST LINK"></div><div class="form-group">
<label for="recipient-name" class="col-form-label">Category</label><select class="form-control"><option>cat 1</option><option value="1">cat 1</option><option value="2">cat 2</option><option value="3">cat 3</option><option value="4">cat 4</option></select></div><div class="form-group">
<label for="recipient-name" class="col-form-label">Detail</label>
<input type="text" class="form-control" id="input1" value="ASDASDASASF"></div><div class="form-group">
<label for="recipient-name" class="col-form-label">Created_at</label>
<input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21"></div><div class="form-group">
<label for="recipient-name" class="col-form-label">Updated_at</label>
<input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21"></div><div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" onclick="submit_form(this.form);" class="btn btn-primary">Send message</button>
</div></form>
HTML
<button type="button" onclick="submit_form(this.form);" class="btn btn-primary">Send message</button>
</div>';
$return .= '</form>';
There are two issues in your code. Firstly you're sending a Form Element object to the submit_form() function which you then attempt to coerce to a string. This is the source of your error. If you skip that step, the jQuery object can be created correctly.
Secondly to serialise data in a form all the fields must have name attributes on them, so you need to amend your HTML. Once those points are addressed, the logic works fine.
Also note that I changed the button to a submit so that the form is submit and then hooked a an unobtrusive event handler to listen for that event on the form. You should not be using on* event attributes at all as they are incredibly outdated.
$('#modal_form1').on('submit', function(e) {
e.preventDefault();
console.log($(this).serialize());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="modal_form1" action="http://localhost/bookmark/post_crud_model_form"><input type="hidden" id="input1" value="1">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Link</label>
<input type="text" class="form-control" id="input1" value="FIRST LINK" name="link"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Category</label>
<select class="form-control" name="category">
<option>cat 1</option>
<option value="1">cat 1</option>
<option value="2">cat 2</option>
<option value="3">cat 3</option>
<option value="4">cat 4</option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Detail</label>
<input type="text" class="form-control" id="input1" value="ASDASDASASF" name="detail"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Created_at</label>
<input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21" name="created_at"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Updated_at</label>
<input type="text" class="form-control" id="input1" value="2019-01-12 22:25:21" name="updated_at"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="send_message">Send message</button>
</div>
</form>
I am trying to implement on click add a new input field.So, There are 2 buttons to add and remove input box after clicking on add button it should add a set of the input box and on clicking remove button it should remove the particular input box. But on Clicking "add" it only adds 1 input field and refreshes the whole page and the form data of that page is showing in the search bar but on the other side "remove" button works fine. Both the functions are right I guess but I don't understand what is wrong? What do I do? I don't want add button to refresh the page and showing data in the search bar. And it must add many no of input boxes after clicking on it. What needs to be done here. please help!!
Here is my code:
index.php
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square"
ng-click="addNewChoice()" >
add
</button>
<button ng-show="$last" ng-click="removeChoice()"
class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >
Remove
</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
angular script
<script type="text/javascript">
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
</script>
The default type of a button element is submit. That is the reason your form gets submitted. In order to avoid this behaviour you can set the type to button as in the below code.
References w3.org
Reference Html Standard
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form method="post">
<div class="form-group " >
<input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
<div class="row col-md-12">
<div class="form-group col-md-6">Start Date
<input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
</div>
<div class="form-group col-md-6">End Date
<input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
</div>
<div class="row col-md-12">
<div class="form-group">
<label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
<div class="col-md-6 c-margin-b-20">
<select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
</div>
</div>
<div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<label for="inputPassword3" class="col-md-1 control-label">Elements</label>
<div class="form-group col-md-3 ">
<input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele">
</div>
<label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
<div class="form-group col-md-3" >
<select class="form-control c-square c-border-2px c-theme" name="store">
<option value="1">All Stores</option>
<option value="2">Phoenix Mall</option>
<option value="3">1MG Mall</option>
<option value="4">Orion Mall</option>
</select>
</div>
<button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square"
ng-click="addNewChoice()" >
add
</button>
<button type="button" ng-show="$last" ng-click="removeChoice()"
class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >
Remove
</button>
</fieldset>
</div>
</div>
</div>
<div class="form-group">
<input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
</div>
<input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">
</form>
Hope this helps :)
I have make the html by javascript. how we can find out the which delete button is pressed
<div id="maindiv">
<div id="product_1">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_1">Delete</button>
</div>
<div id="product_2">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_2">Delete</button>
</div>
</div>
use this
var btn = document.querySelectorAll('button')
btn.forEach(function(item) {
item.addEventListener('click', function() {
console.log('clicked id: ' + this.id);
});
});
<div id="maindiv">
<div id="product_1">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_1">Delete</button>
</div>
<div id="product_2">
<input placeholder="Add Product Name" type="text">
<input placeholder="Cost per unit" type="number">
<input placeholder="Number of products" type="number">
<button id="delete_2">Delete</button>
</div>
</div>
You can try this. Hope this helps.
var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener('click',function(){
console.log(this.id);
})
}
<body>
<button id='delete'>Delete</button>
<button id='save'>Save</button>
</body>
I'm stuck on part of my project where user should just keep filling the form and new lines should be added automatically when user focused on last input in the form. I'm not forged in JS/jQ so maybe one of you could help me... It is working but still just from the 1st line, not from the duplicated ones. Thanks is advance
<form class="form-inline" method="post" action="loadin.php">
<!-- form header -->
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
<?php
foreach($vendors_ as $v){
echo"<option value='".$v['ID']."'>".ucfirst($v['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="<?php echo date("Y-m-d") ?>">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<!-- form lines -->
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
<?php
foreach($types_ as $t){
echo"<option value='".$t['ID']."'>".ucfirst($t['name'])."</option>";
}
?>
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
$(".duplicate:last input").focus(function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function(){
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
As last element is being changed every time new elements are appended, listen the event on the parent body or any other fixed parent.
var count = 0;
$('body').on('focus', ".duplicate:last input", function() {
count++;
var $clone = $('.duplicate:last').clone();
$clone.find("input,select").each(function() {
$(this).attr({
id: $(this).attr("id") + count,
});
});
$("form").append($clone);
$(".duplicate:last .cleanVal").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline" method="post" action="loadin.php">
<hr>
<div class="form-group">
<select class="form-control" name="vendor" id="vendor">
</select>
<input type="text" class="form-control" name="invoice" id="invoice" placeholder="Faktrura">
<input type="text" class="form-control" name="date" id="date" placeholder="Datum" value="">
<button type="submit" name="LoadItems" class="btn btn-default"><i class="fa fa-check" aria-hidden="true"></i> Nahrát</button>
</div>
<hr>
<div class="duplicate" style="margin-bottom: 5px;">
<div class="form-group">
<input type="hidden" class="form-control cleanVal" name="row[]" id="row">
<select class="form-control" name="category[]" id="category">
</select>
<input type="text" class="form-control cleanVal" name="item[]" id="item" placeholder="Položka">
<input type="text" class="form-control cleanVal" name="package[]" id="package" placeholder="Balení">
<input type="text" class="form-control cleanVal" name="amount[]" id="amount" placeholder="Množství">
<input type="text" class="form-control cleanVal" name="price[]" id="price" placeholder="Cena">
<input type="text" class="form-control cleanVal" name="atest[]" id="atest" placeholder="Atest">
<input type="text" class="form-control cleanVal" name="batch[]" id="batch" placeholder="Sarže">
<input type="text" class="form-control cleanVal" name="expire[]" id="expire" placeholder="Expirace" style="width:80px">
<input type="text" class="form-control cleanVal x" name="vat[]" id="vat" placeholder="DPH" style="width:45px">
</div>
</div>
</form>
Fiddle Demo
You must define your focus event as bellow:
$('body').on('focus', ".duplicate:last input", function() {
// codes here
}