My Html
I wanted to implement a single click edit button to change all my fields to input,
Here is my HTML
<div class="col-md-3">
<div class="add-details">
<span>LemonCandy, #78, IG Circle,</span>
<span>JP Nagar Phase 1, Bangalore</span>
<span>Karnataka, 560078</span>
</div>
</div>
<div class="col-md-2">
<div class="id-details">
<span>info#lemoncanday.in</span>
<span>skipper#lemoncanday.in</span>
<span><a (click)="editDetails()" title="Edit Details">Edit Details</a></span>
</div>
</div>
<div class="col-md-2"></div>
Use input instead of span and disable it based on flag . If required do some CSS tweeks to change textbox view like span
<div class="col-md-3"><div class="add-details"><input type="text" [disabled]={{typeflag}}>LemonCandy, #78, IG Circle,</input><input type="text" [disabled]={{typeflag}}>JP Nagar Phase 1, Bangalore</input><input type="text" [disabled]={{typeflag}}>Karnataka, 560078</input></div></div><div class="col-md-2"><div class="id-details">
<input type="text" [disabled]={{typeflag}}>info#lemoncanday.in</input><input type="text" [disabled]={{typeflag}}>skipper#lemoncanday.in</input><input type="text" [disabled]={{typeflag}}><a (click)="editDetails()" title="Edit Details">Edit Details</a></input></div>
Related
I have a form for searching items in table
<div class="container">
<h4>Search product</h4>
<form>
<div class="row">
<div class="form-group col-md-8">
<label for="productName">Product name:</label>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" type="text" class="form-control search-box">
<div>
<div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result">
{{ product.name }}
</div>
</div>
</div>
</div>
</form>
</div>
And when I click the input then slides out the history of entered data and lower divs which I want to show.
How to hide the history of entered phrases?
I need only div with found products.
Turn off autocomplete in your input field.
autocomplete="off"
Turn off autocomplete
Try to add autocomplete="off" attribute to your input
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});
I have a row divided into two parts(col-md-5 and col-md-7). First part contains a question and the second part has 6 input fields(5 text inputs and 1 selectbox).
So, i divided the second part into 6 fields(col-sm-2). Everything works fine. Now i want to add input-group-addon to two of the text field. But when, i'm trying to add input-group to the parent div of that input box, the size of input box increases and it pushes all the input boxes(next to it) to the next row.
Here's the code
<div class="row">
<div class="col-md-5">
<p class="text-info">How many PRI"s? How much are you paying per month?</p>
</div>
<div class="col-md-7">
<div class="form-group">
<div class=" col-sm-2">
<input type="text" value="" name="pri_qty" class="form-control input-sm" placeholder="QTY">
</div>
<!-- i want to add input-group to the next input field -->
<div class=" col-sm-2">
<input type="text" value="" name="pri_mrate" class="form-control input-sm" placeholder="$/M">
</div>
<div class=" col-sm-2">
<select name="pri_competitor_id" class="form-control input-sm"><option selected="selected" value="">Provider</option><option value="1">ALLSTREAM</option><option value="2">BELL</option><option value="3">BV</option><option value="4">CONVERGIA</option><option value="5">DISTRIBUTEL</option><option value="6">ONE CONNECT</option><option value="7">TELSYNERGIE</option><option value="8">TELUS</option><option value="9">VIDEOTRON</option><option value="10">SELECTCOM</option><option value="11">OTHER</option></select>
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_avaya" class="form-control input-sm" placeholder="Avaya">
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_our_rate" class="form-control input-sm" placeholder="$/M">
</div>
<div class=" col-sm-2">
<input type="text" value="" name="pri_install" class="form-control input-sm" placeholder="Setup">
</div>
</div>
</div>
</div>
`
From the bootstrap docs on input-groups (http://getbootstrap.com/components/#input-groups):
Don't mix with other components
Do not mix form groups or grid column classes directly with input
groups.
Instead, nest the input group inside of the form group or grid-related element.
So, rather than adding .input-group-addon to your .col-sm-2, wrap the input in another div.input-group-addon.
I have validation form in angularjs with input and select elements.
When form is submitted focus should jump to first element (input or select) which has class ng-invalid.
I have code to focus on input element, how to add rule with select element...
Focus on first element witch class ng-invalid. Without specifying input or select it will not work because very first element with this class is .
$('form').submit(function() {
var invalid = $.find("input.ng-invalid:first");
$(invalid).focus();
});
html:
<form id="form" method="post" name="form" role="form" novalidate class="form-horizontal" ng-submit="submitForm()">
<fieldset class="attributes col-md-12" ng-disabled="readOnly" ng-cloak>
<div class="form-group">
<label for="select" class="col-sm-wrap-4 control-label">Select:</label>
<div class="col-sm-6" ng-switch="readOnly">
<select id="select" name="select" ng-model="form.select" ng-required="true">
</select>
<div class="validation-error" ng-show="form.submitted">
<span ng-show="form.select.$error.required">This field is required</span>
</div>
</div>
</div>
<div class="form-group">
<label for="input" class="col-sm-wrap-4 control-label">Input:</label>
<div class="col-sm-6" ng-switch="readOnly">
<div ng-switch-default="false">
<input type="text" id="input" name="input" ng-model="input.value"
class="form-control" ng-required="true"/>
<div class="validation-error" ng-show="form.submitted">
<span ng-show="form.input.$error.required">This field is required</span>
</div>
</div>
</div>
</div>
<button type="submit" id="saveButton" class="btn btn-sm btn-primary btn-header" ng-click="update(form)">Save</button>
</fieldset>
Try this selector:
$("input.ng-invalid, select.ng-invalid, textarea.ng-invalid").eq(0).focus();
I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.
you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks
I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr
ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.