I have been trying to implement an auto-complete to an input in my form in angular2. I want to show second hidden div if the input is invalid. Could you help me how to do that please?
<div class="form-group">
<div *ngSwitchCase="'organisation'">
<label [attr.for]="parameter.ObjectID" [innerHtml]="parameter.paramLabel"> </label>
<input [id]='parameter.ObjectID' class="form-control" type="text" [(ngModel)]="parameter.value" (keyup)="filter()" (change)="filter()" (blur)="filter()" [required]="parameter.mandatory" name="mandatory" #mandatory="ngModel">
<div *ngIf="companyNames.length > 0">
<ul *ngFor="let item of filteredCompanyList">
<li>
<a (click)="select(item)">{{item}}</a>
</li>
</ul>
</div>
<div [hidden]="!parameter.mandatory || mandatory.valid || mandatory.pristine" class="alert alert-danger">Please do not leave this field blank</div>
<div [hidden]="temp(mandatory)" class="alert alert-danger">The organisation entered was either not found or does not subscribe to the product</div>
</div>
The second hidden div will be displayed if your function temp() returns false.
All your checks (input valid?) you have to do in this function.
UPDATE:
Just use this [hidden]="filteredCompanyList.length > 0" to show/hide your div.
Related
i have a dropdown list when i select any one option from list i should display an another form with name of the teacher and subject of the teacher in textbox.The form is not displaying.when i select one item it should display the selected name and description box to add subjects of teachers that they interested please help me
view page
<div class="portlet light bordered row">
<h1>Add teacher subject</h1>
<div class="row">
<form action = "{{ url('subjectby/adding/process') }}" method = "POST">
{{ csrf_field() }}
<div class= "col-md-12">
<div class="form-group">
<h3>Choose Teachers </h3>
<div class="input-group">
<div class="ui-widget border-dropdown" style="margin-left:50px;">
<select id="teacher" name="teachers" placeholder="Select Teacher">
<option value="">Select Teacher</option>
#foreach($user as $tec)
<option value="{{$tec->id}}">{{$tec->name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="new">
<div class="form-group">
<div class="col-sm-6">
<label for="inputFacebook">Teacher Name</label>
<input type=hidden value="{{$tec->id}}" name="id">
<input type="text" value="{{$tec->name}}" class="form-control" name="name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label for="inputDescription">Subject Interested</label>
<textarea class="form-control" rows="8" name="intr" placeholder="Enter Subject Interest"> </textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" value="add" name=b1>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
This isn't a Laravel specific problem. You are taking about DOM manipulation and so you best bet is to use jQuery or Vuejs or even vanilla Javascript if you so choose. Basically, you will write a script to watch for when your <select> changes, and then based on it's new value, show the part of the form you want.
Keep in mind that Laravel is a backend framework and so the user will never interact with it on a page. After a page loads, Laravel has done all it can do until another request is made. This is why Javascript was born - to let the user change things without reloading the page.
(Symfony 2.8)
I want to insert data into a form as steps in a process.
The field to validate is in "Descripción" tab and the submit buttons are in the "Guardar/Revisión" tab.
When I click the submit button, it displays the error "An invalid form control with name='form[proDescripcion]' is not focusable" in the Chrome debug console.
Is it possible to correct the error without changing the design?
<div id="tabs-1">
<p>Descripción</p>
<div class="inputText">
<div class="label">
<label for='proDescripcion' >{{ form_label(form.proDescripcion) }}</label>
</div>
<div class="input">
{{ form_widget(form.proDescripcion) }}
</div>
</div>
</div>
<div id="tabs-2">
<p>Imagen/Documento</p>
</div>
<div id="tabs-3">
<p>Datos</p>
</div>
<div id="tabs-4">
<p>Guardar/Revisión</p>
{{ form_row(form.save) }}
{{ form_row(form.finish) }}
</div>
You can add a "novalidate" attribute to your form
{{ form_start(contact, {attr: {novalidate: 'novalidate'}}) }}
With this attribute, HTML5 will not try to validate your form on submit. Don't forget to do it on the server-side with assert annotation.
I am new in ajax.
I am trying to get value and want to fill in html code snippet.
I have html code and json object that has value.
Now I want to show the specific value in the different-different part of html code.
Here is my html code:-
<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation | Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> atul.gupta#bajajfinserve.co.in</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
Reward
Incentive
Movement
Leaves
LnD
</div>
On success of ajax I am getting the value now I want to fill it in my html code.
Please help me.
You can use a library (like knockout) to do that, or you can use jQuery to create the elements:
$("<div>").append("some text").appendTo("body"); //creates a div, append some text and...
If you already have a success event in your ajax, you could grab an empty DOM element and set its content.
document.getElementById('placeholder').innerHTML = jsonData.myProperty;
You should use innerHTML in javascript.
Set some ID on the element you need to update:
<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>
Then update it with your json value:
document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;
Say we have the following HTML code
<label for="467578">AgendaShowCapacity (1 remaining)</label>
I tried with the following xpath expression in Chrome but can't locate to that element:
//label[text()='AgendaShowCapacity (1 remaining)']
I was wondering whether the parenthese is to be blamed for this. If it is, how should I deal with it under such situation?
Any comments would be appreciated, thanks!
Edit 2012-9-18 real code block posted below
<div id="pageContent">
<fieldset>
<legend>Agenda</legend>
<ol class='fieldList custom' data-section='0'>
<li class="checkboxLeft" data-id="467578" data-z="1">
<div class="fieldHolder1">
<input id="467578" type="checkbox" name="467578" />
</div>
<div class="fieldHolder2">
<label for="467578">AgendaShowCapacity (1 remaining)</label>
</div>
</li>
<li class="checkboxLeft" data-id="467579" data-z="2">
<div class="fieldHolder1">
<input id="467579" type="checkbox" name="467579" />
</div>
<div class="fieldHolder2">
<label for="467579">AgendaHideReached</label>
</div>
</li>
<li class="checkboxLeft" data-id="467580" data-z="3">
<div class="fieldHolder1">
<input id="467580" type="checkbox" name="467580" />
</div>
<div class="fieldHolder2">
<label for="467580">AgendaShowMessage</label>
</div>
</li>
<li class="checkboxLeft" data-id="467584" data-z="4">
<div class="fieldHolder1">
<input id="467584" type="checkbox" name="467584" />
</div>
<div class="fieldHolder2">
<label for="467584">AgendaWaitlist</label>
</div>
</li>
</ol>
</fieldset>
<div class="buttonGroup">
<button type="button" name="ctl00$cph$ctlNavigation$btnAddAnother" class="button" onclick="SubmitForm(this);return false;">Add Another Person</button>
<span class="textBetweenButtons">or</span>
<button type="submit" name="ctl00$cph$ctlNavigation$btnContinue" class="button" onclick="SubmitForm(this);return false;">Continue</button>
</div>
</div>
Here is the essential part of the html page in which I want to locate to that //label element.
Second edit 2012/9/19
Sample C# code using selenium-webdriver to locate that element.
IWebDriver driver = new FirefoxDriver();
IWebElement = driver.FindElement(By.XPath("//div[#id='pageContent']//legend/following-sibling::ol/li/div/label[text()='AgendaShowCapacity (1 remaining)']"));
// Do something to that element
I am trying to log some input values into an array via jquery and then use those to run a method server side and get the data returned as JSON.
The HTML looks like this,
<div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
I have this javascript the detect whether the items are checked are not
if($('input.radio:checked')){
}
What I dont know is how to get the values of the input into an array so I can then send the information through AJAX to my controller. Can anyone help me?
You can use jQuery's each() function.
$('input.radio:checked').each(function() {
//put each of the selected check boxes into an array
});
You need to serialize your input with - serialize()
var data = $('#MYFORM').serialize();