I,m working on an angular form and need to resolve a bug.
Here is the issue :
1)- Select type : value-1
2)- Select Data-1 : All Data-1
3)- Select Data-2 : All Data-2
4)- Now change type to : Value-2 (instead of value-1).
The fields of data-1 and data-2 should disappear.
5)- Now select the type again to value-1.
Now click on data-1 or data-2 again...you would see an empty space
again.
I don't want this empty space here...
instead it should be back to --choose one--
again...
I am attaching screenshot and code...please take a look.
<form class="addAlert settings_form" ng-submit="createAlert(newAlert)">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create a New Model</h4>
</div>
<div class="modal-body">
<div class="form_fieldset">
<div class="form_item">
<label for="title">Name</label>
<input name="title" type="text" class="form-input title" required placeholder="Alert Name" ng-model="newAlert.title">
<div class="error"></div>
</div>
<div class="form_item">
<label for="alertformat">Type</label>
<select class="form-input alertformat"
name="alertformat" ng-model="newAlert.alertType"
ng-init="newAlert.alertType='Threshold'">
<option value="Threshold" selected>Value-1</option>
<option value="Pipeline Failure">Value-2</option>
</select>
</div>
<div class="form_item" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-1 </label>
<select class="form-input alertformat" name="alertformat"
ng-model="newAlert.site" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-1</option>
<option ng-repeat="item in assetsData" ng-value="{{item.sitename}}">
{{item.sitename}}
</option>
</select>
</div>
<div class="form_item" ng-show="newAlert.site" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-2</label>
<select class="form-input alertformat" name="alertformat" ng-model="newAlert.asset" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-2</option>
<option ng-repeat="item in assetsData | filter:newAlert.site" ng-value="{{item.sitename}}">
{{item.name}}
</option>
</select>
</div>
<div class="form_item">
<label for="alertformat">Color</label>
<div class="severity">
<input type="radio" class="radioBtnClass" name="numbers" value="Red"checked required>
<span>Red</span>
</input>
<input type="radio" class="radioBtnClass" name="numbers" value="Ember">
<span>Blue</span>
</input>
</div>
</div>
<div class="form_item">
<label for="users">Users</label>
<div class="user_select">
<span ng-repeat="user in userList" style="display:block">
<input class="alert_user_class" value="{{user.pk}}" type="checkbox">
{{user.email}}
</input>
</span>
</div>
</div>
</div>
</div>
</form>
On change event of your 'type' dropdown, you need to assign $scope.newAlert.site = ''; and $scope.newAlert.asset = '' as 'Choose one' option has value Empty String("").
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
i have a table that i want the user to be able to edit, when the edit button is clicked i want the value of the field shown in the modal. i managed to do that however all values are being displayed i only want the values of the field related to the edit button clicked.
this is my code
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
{%for element in data%}
<form method="post">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<input name="_id" value="_id" id="the.id" hidden></input>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" name="UPusername" value="{{ element['username'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="UPlast_name" value="{{ element['last_name']}}" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="UPemail" value="{{ element['email'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Registration number</label>
<input type="text" name="UPrej_num" value="{{ element['rej_num'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Position</label>
<select class=" position-form" id="exampleFormControlSelect1" name="UPposition">
<option value="">Choose Option...</option>
<option value="President">President</option>
<option value="Manager">Manager </option>
<option value="Managing Director">Managing Director</option>
<option value="R department">HR department </option>
<option value="Accountant">Accountant</option>
<option value="Project Manager">Project Manager</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-info" value="Save">
</div>
</form>
{%endfor%}
</div>
</div>
</div>
And this is how it's currently shown:
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';
<div class="addMore">
<div class="row addPlus">
<p class="emergencyTitle">Child 1</p>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" name="ch1_name">
</div>
<div class="form-group">
<label for="name">Class</label><br>
<select name="ch1_class">
<option value=""> 1 </option>
<option value=""> 2</option>
<option value=""> 3 </option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">DOB</label>
<input type="text" class="form-control" name="ch1_dob" id="datepicker">
</div>
<div class="form-group">
<label for="name">Section</label><br>
<select name="ch1_secion">
<option value=""> A </option>
<option value=""> B </option>
<option value=""> C </option>
</select>
</div>
</form>
</div>
</div>
</div>
On the click of a button I am doing this ..
$child = $('.addPlus')
$('.addMore').append($child)
But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.
if you want to clone the item - you can use
$('.addPlus').first().clone().appendTo('.addMore')
.addPlus is already appended to .addMore, so your jQuery would work but have no effect.
Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:
var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.