I have form where used can enter zip code and based on that City and State will be automatically populated. So these three fields are in the same form next to each other. Here is example of my form:
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
console.log($(this).closest('.form-group'));
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
//Send Ajax request and populate closest State and City fields.
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
This function is used in few other forms in my application so I need this to work in any form. I'm wondering what is the easiest way to populate State and City that are above Zip input field? I tried to use closest() but that won't work since I need to specify which input exactly I need to populate. If anyone have better idea on how to achieve this please let me know. Thank you.
This will always post to the nearest input forms of state and city!
Hope I helped!
$('.get-zip').keyup(getZipCode);
function getZipCode(){
var fldZip = $(this);
// Testing Purpose
$(this).closest("form").find(".state").val($(this).val());
$(this).closest("form").find(".city").val($(this).val());
if(fldZip.val().length === 5 && fldZip.val().match(/^[0-9]+$/)) {
$(this).closest("form").find(".state").val("YOUR VALUE");
$(this).closest("form").find(".city").val("YOUR VALUE");
}else{
//$(cityID).val('');
//$(stateID).val('');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="city"><span class="label label-primary">City:</span></label>
<input type="text" class="form-control city" name="frm_city" id="frm_city" maxlength="50" placeholder="City auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="state"><span class="label label-primary">State:</span></label>
<input type="text" class="form-control state" name="frm_state" id="frm_state" maxlength="2" placeholder="State auto populate based on the zip code" readonly>
</div>
<div class="form-group">
<label class="control-label" for="zip"><span class="label label-primary">Zip:</span></label>
<input type="text" class="form-control get-zip" name="frm_zip" id="frm_zip" maxlength="5" placeholder="Enter 5 digits ZIP code" pattern="[0-9]{5}$" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frmSave_message"></div>
</div>
</div>
</form>
The following may work as long as all the different forms have the elements arranged in the same way.
jQuery .prev()
jQuery .find()
var stateFormGroup = $(this).closest('.form-group').prev();
var stateElement = stateFormGroup.find('input');
var cityElement = stateFormGroup.prev().find('input');
Posting the comment here as answer.
$(this).closest('.form-group') will select the parent form-group. Try selecting the closest form and then traverse down to the form groups.
$form_group = $(this).closest('form').find('.form-group');
$form_group.find('input.city').val(city);
$form_group.find('input.state').val(state);
Related
I have been working on my new application and I use JQuery,HTML5 and Bootstrap 3 to develop my front end pages. However, in all the form in my app I need to show the message to the user after they submit the form. I tried to do the research and see what is the best way to do that but there is a lot of different opinions/options. Here is my example:
$('#frmSave').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = e.target.id,
formData = $('#' + frmID).serialize();
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
if (formData) {
$('#frm_message').show().addClass('alert-success').html('Record successully saved!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
} else {
$('#frm_message').show().addClass('alert-danger').html('Error!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-danger').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="active"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frm_active" id="frm_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frm_code" id="frm_code" maxlength="4" required>
</div>
<div class="form-group">
<label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
<input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frm_message" class="alert alert-Submit"></div>
</div>
</div>
</form>
While I was researching on the web I noticed that some application do not use time out for the message. They simple just leave the message on the form. To me that was bit confusing and I do not see a purpose of leaving that message on the screen. I use the timer and message disappears after 7 seconds. I'm wondering if there is better way to do this? Or the way I'm doing is one of the ways to go.
enter code hereI have an issue with my html. I am trying to save an input to my localstorage. For some reason, whenever I inspect my website I don't see the word I typed in my field. In other words it is not loading the input to my localstorage.
I am new to html and javascript and I am hoping you guys can help me out. I'm providing a picture to demostrate what I am trying to approach.
function getInput(){
var nameInput = document.getElementById('inputName').value;
localStorage.setItem('text', dataInput);
var dateInput = document.getElementById( 'inputDate').value;
localStorage.setItem('text1', dateInput);
}
<form class="form-horizontal">
<fieldset>
<legend>Endorse me</legend>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button onCLick="getInput()" type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</fieldset>
</form>
i just want make some added text next to my input.
im using code igniter, here is my view code.
<div class="form-group" >
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<span ><input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" value="<?=#$registration->tinggi_badan?>" > cm</span>
</div>
</div>
the top code result "cm" is below the input text.
it will be good if just using additional inline code.
the result i want is like this |---input text---|cm
Try using input-addon with input-group
<div class="form-group">
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<div class="input-group">
<input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" placeHolder="input text" ><span class="input-group-addon"> cm</span>
</div>
</div>
</div>
DEMO: https://jsfiddle.net/michaelyuen/crvzn2Lq/
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
I have this code:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Testing </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaces" value="" required>
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Network: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionIp" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Netmask : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="mascaraSub" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionGat" value="" required>
</div>
</div>
As you can see I have 4 inputs tag..
And I have this code as well:
with open("/etc/network/interfaces", "r") as file:
content = file.read()
print content
Where I'm getting the information I need from the following path : "/etc/network/interfaces".
Something like this:
Now, My question is: Is there a way to show the data I'm getting from my python or my local machine ("etc/network/interfaces") to my input tags?
There are two ways which you can use:
Make the python file generate the output html file, which you can use. HTML.py is a good option to start with it.
You can use XmlHttpRequest to read local files using javascript and populate the data automatically using JQuery.