Here am using Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel to insert more values and its working but the problem am facing here is when i select a value from the select box used by addel the corresponding data is appearing in the corresponding box and if i choose another select box by clicking add button the corresponding value comes in the first field not in the corresponding field.
here is my view
<div class="form-group ">
<label class="col-lg-3 control-label">Select Tools<span
class="required">*</span></label>
<div class="col-lg-6">
<div class="addel">
<div class="form-group target">
<div class="input-group">
<div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
<button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
here is my script
<script>
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data)
{
alert("Value: " + $("#avail").html(data));
});
}
</script>
here is my controller
public function ajax_available()
{
$data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
//var_dump($data['available']);
$this->load->view('admin/tool/ajax_available',$data);
}
here is my ajax_available view
<input type="text" class="form-control" name="available" id="available" placeholder="" value="<?php echo $available->available;?> available">
my picture looks like this
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG.
You are not giving your elements unique identifiers. Every time you add a new row with a dropdown and textbox, it generates the same IDs again for these new elements. This is invalid HTML, all elements must have a unique id.
So when you do
$("#avail").html(data)
it finds the first instance of an element with that ID - because there should only be one. As far as javascript is concerned, the others don't exist, because they are not valid.
Since you will have multiple "Available" textboxes in the page, you can't rely on ID to populate the right one. Give your "avail" div a class instead of an id, and then tell the script to find the related one by using its position in the markup:
<div class="col-lg-3 avail">
<input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>
And then in your code, instead of $("#avail").html(data), do:
$(this).parent().parent().find(".avail").html(data);
This goes up the DOM by two divs, to find the common ancestor of both the select (this in the context of the function), and the div you want to change, and then searches within it for an element with the avail class, and populates it with the data.
You should also remove "id" attributes from any other elements which can be duplicated, such as "quantity", for example.
P.S. I'm not sure why you use a textbox for this "Available" property - it seems like a status value coming from the database which the user should not change. Therefore it should be a label or span, really. Textboxes are for input, not output. Plus your user could type and change the value, which might confuse them. But I will leave you to sort that.
Related
I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.
"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010
So i have done "select option" when user select i need show some data in inputs and it works,but only when i chose any value from select it shows my inputs,but i need always show my inputs,because i need this inputs for another actions
It is my select.
<select size="2" style="height: 200px;width: 200px" class="selection
data-bind="options:solutions, optionsText:'name',value:selectedSolutions"></select>
It is inputs which i must show always,they show only when i chose parameter from select which above
<form class="col-md-5" data-bind="with: selectedSolutions" style="margin-left:128px;">
<div class="form-group">
<label for="inputsm">Solution Name:</label>
<input class="form-control input-sm" data-bind="value:name" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Brief description:</label>
<input class="form-control " style="height: 100px" data-bind="value:briefDescription" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="url">Read more:</label>
<input class="form-control input-lg" data-bind="value:readMore" style="height:150px" data-bind="value:" id="url" type="text">
</div>
<div class="form-group">
<label for="inputlg">Solution manufacture URl:</label>
<input class="form-control input-sm" id="inputlg" data-bind="value:manufactureUrl" type="text">
</div>
</form>
thanks for help and sorry for english.
Because you are using with binding, anything inside your form tag will not being shown unless selectedSolutions is not null.
I guess inside your ViewModel, you are initializing the selectedSolutions property like this viewModel.selectedSolutions = ko.observable();
So, you have to set a default value for selectedSolutions to make sure anything inside your form tag is always shown. Something likes below:
viewModel.selectedSolutions = ko.observable({
name: "", // you could put any default value you want here, not just blank
briefDescription: "",
readMore: "",
manufactureUrl: ""
});
I am having hard time understand how jQuery Validation Plugin works with custom method.For all the guides here i found, are either for input form or static values but mine is a bit different.
I have 2 div's like 2 values and one is value of "user_credit" which store how much user have credit. And another is "total_cost" which store total cost of some special options.
The problem and difference that i have and didn't found on any guide is that my "total_cost" is dynamically changed based on previous checkbox values.
Here's part of code from that:
<div class="row">
<div class="col-lg-12">
<label for="link_to_video">Link to video <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product video. Youtube videos will be automatically embedded"></i></label>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" name="show_video" id="show_video" value="1" data-price="40">
</span>
<input type="text" class="form-control" name="link_to_video" id="link_to_video" placeholder="https://youtube.com/watch?v">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label for="link_to_product">Link to product <i class="fa fa-question-circle" aria-hidden="true" data-toggle="tooltip" title="Add link to your product"></i></label>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" name="show_product" id="show_product" value="1" data-price="40">
</span>
<input type="text" class="form-control" name="link_to_product" id="link_to_video" placeholder="http://yourwebsite.com/product-page">
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-lg-12">
<h4>Your credit <span class="label label-default" id="user_credit">2000</span></h4>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-lg-12">
<h4>Total cost <span class="label label-default" id="total_price">0</span></h4>
</div>
</div>
</div>
And here is part of code that change "total_price" value when some of checkboxes are checked from above.
$inputs=$('#show_product,#show_video').change(function(){
var total=0;
$inputs.filter(':checked').each(function(){
total+= $(this).data('price');
});
$("#total_price").text(total);
});
And another thing is that all guides activate validator in javascript while i activate in form it self
<form action="" name="createListingForm" id="createListingForm" method="POST" role="form" data-toggle="validator" enctype="multipart/form-data">
I have been following documentation from here https://jqueryvalidation.org/documentation/ and searched for alot of guides but no luck in finding solution.
First off, you can not validate the text within a span container. Using this plugin, you can only validate textarea, select, certain types of input elements, and elements with the contenteditable attribute... and they all must be within a form container.
Secondly, if you dynamically change the value of one of these form inputs, you simply call the .valid() method to programmatically trigger validation on this input.
$('#myinput').valid(); // trigger a validation test of #myinput element
This is my view please have a look :
<div class="form-group target" id="tools" >
<div class="input-group">
<div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
<option value="">Select</option>
</select></div>
<div class="col-lg-3">
<input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
</div>
<div class="col-lg-3" id="avail">
<p class="available">0 available</p>
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
</button>
</span>
</div>
</div>
This is my script :
function tool(sel)
{
var tools=sel.value;
alert(tools);
var url='<?php echo base_url(); ?>admin/tool/ajax_available';
$.post(url, {tools:tools}, function(data){
alert("Value: " + $(".available").html(data));
});
}
The problem is whenever I goes on selecting values from the select box the corresponding value and all the previously selected values are becoming same.
the image am showing here.
Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool1.PNG.
Working fiddle.
Problem : When you use .available selector it will affect all the element with class available in your document.
Suggested solution :
The id should be unique in the same document so if you've multiple tools you should replace the id with a class for the valid structure :
<div class="form-group target tools">
Then you should refer to the current element in your selector, so use :
$(sel).closest('.tools').find('.available').html(data);
Hope this helps.
I have used below code for bootstrap textbox and textarea and also in the last div I have used button type="reset" .But when I entered invalid shop name and valid Address and click on Reset button it reset it and after only entering invalid shop name and click on Add shop then it is successfully adding new shop.Both the textbox show green background-color and correct sign even after it is empty.
Please help me.
Please see below image after onclick of reset button:
<form id="defaultForm" method="post" class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Shop Name</label>
<div class="col-xs-4">
<input type="text" class="form-control" pattern="^[a-zA-Z\s]+$"
data-bv-regexp-message="The shop name can consist of alphabetical characters only" name="shopName" placeholder="Shop Name" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop name is required and cannot be empty" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Shop Address</label>
<div class="col-xs-4">
<textarea id="id_txt_addr" type="text" class="form-control" name="shop_address" placeholder="Shop Address" style="height:100px" maxlength="200" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop address is required and cannot be empty"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<input type="submit" name="add" class="btn btn-primary" value="Add Shop">
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
On reset button click, remove all relevant validation classes and elements handling error message inside closest form. Here an example:
$(':reset').on('click', function(){
var $form = $(this).closest("form");
$form.find('*').removeClass('has-success has-error glyphicon-ok glyphicon-remove');
$form.find('.help-block').remove();
});
-DEMO-
Now maybe there is a bootstrap method to reset validation, you should check bootstrap DOC maybe.
$(document).ready(function () {
$("#ibtReset").on("click", function () {
$('#ShopName').val("");
$('#id_txt_addr').val("");
$('.glyphicon ').remove();
});
});
On reset button click both the values become empty.
It may help You.