In my application user will login into his/her account by using his Email ID.
And user will be able to fill the contact details by using drop down.
But in Email ID drop down option it has to be loaded with Email ID which is login Email ID.
Here I am attaching screen shots for better understanding.
<div class="col-md-3">
<label class="control-label">Contact Type</label><br />
<select class="drop" id="drpContactType" required="required" data-bind="options: ContactTypeList,optionsText: 'Text',optionsValue:'Value',optionsCaption: '--Select--',value:ContactTypeID"></select> </div>
When we select EMail ID dropdown option the Email ID which is login by user has to be pre loaded.
can you please help me.
You can use the Hidden type for Your Email as I used....You can make hidden field for User Another Details....(like as Email ,Mobile)
$('#cont').change(function () {
if($(this).val()=='Email')
{
$('#val').val($('#email').val());
}
else
{
$('#val').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" value="sandip.viru#gmail.com" id="email">
<div>
<table>
<tr>
<td>Contact type : </td>
<td>
<select id="cont">
<option>Phone</option>
<option>Email</option>
<option>Mobile</option>
</select>
</td>
<td>Value : </td>
<td><input type="text" id="val"></td>
</tr>
</table>
</div>
Related
I am just starting angular. i have a table and a button. on-click on the button a new row will get added to the table. each row consists of some dropdowns with required constraint. if the user doesn't fill mandatory dropdown then a appropriate message should display and enable addrow button if and only if that current row is valid.i tried the below code but it is not working. stackblitz link is given below and thanks in advance.
<tbody class="form-group">
<tr *ngFor="let row of rows">
<td> <input type="number" name="ques_temp" [(ngModel)]="noQuestion"> </td>
<td>
<select class="form-control" name="name" #name="ngModel" required>
<option [value]="" disabled selected>Select</option>
<option *ngFor="let map of subject_maps" [value]="map._id" [selected]="map == subject_map">
{{ map.subject_node.fullform }}</option>
</select>
<div *ngIf="name.invalid && name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
</div>
stackblitz link
I have a html form inside the table and i want to make it disappear after the user submits the form
Form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function() {
$(this).hide();
});
</script>
After the submission, the form is still visible and nothing happening.
The problem is the selector:
$('#form')
The <form> element does not have the attribute id="form" — (that's the <div id="form"> - not a form and therefore not submittable) — all you need to do is target the actual <form> element. Change your code to this:
$('form').submit(function(e) { //NOTE: Removed "#"
e.preventDefault();
$(this).hide();
})
And it will work:
$('form').submit(function() {
$(this).hide();
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
You have to prevent the default action first in order to hide the form using event.preventDefault()
Further if you're working on a commercial level and you want your form to be submitted without redirection, then you can use XHR request
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function(event) {
event.preventDefault();
// ... XHR request to submit form
$(this).hide();
});
</script>
There is a Problem in the approach that You use.Each time you run click the submit button in the page your page gets reloaded **this will hide the form when you click and again render the whole page from the begining. because of that you want be able to get what you want.Instead try to send data using Ajax by having a button rather than using the default form submission approach
I'm working on a form to input data, currently when a user inputs a number, then deletes it and moves from the input field it will display the error message span. I want it to display if a user clicks into the field then clicks out without adding a number in. I'm not sure why the onblur isn't working as that's how it was done in two tutorials I found.
<form name="myform" novalidate>
<table class="text-center margin-top">
<tr>
<th class="header">Course Type</th>
<th>Amount of Times</th>
<th>Frequency (PA)</th>
<th>% Staff who need it</th>
</tr>
<tr>
<td class="header"><label for="induction">Induction:</label></td>
<td><input class="form-control" type="number" id="inductionAmount" name="inductionAmount" ng-model="staff.inductionAmount" ng-model-options="{ updateOn: 'blur' }" ng-required="true" /></td>
<span class="error-message" ng-show="!myform.inductionAmount.$pristine && myform.inductionAmount.$error.required">Please enter an induction value</span>
<td><input class="form-control" type="number" id="inductionFrequency" name="inductionFrequency" ng-model="staff.inductionFrequency" ng-required="true" /></td>
<span class="error-message" ng-show="myform.inductionFrequency.$dirty && myform.inductionFrequency.$error.required">Please enter an induction value</span>
<td><p>100</p></td>
</tr>
</table>
</form>
</div>
</div>
<div class="row margin-top">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" ng-disabled="myform.$invalid" class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button>
</div>
</div>
I want it to display if a user clicks into the field then clicks out without adding a number in.
In this case, you can check for $touched instead of !$pristine:
True if control has lost focus.
This has been around since at least v1.3.20. The input only becomes not pristine or dirty if the user has interacted with the input i.e. made a change.
<span class="error-message" ng-show="myform.inductionAmount.$touched && myform.inductionAmount.$error.required">Please enter an induction value</span>
See plunker.
EDIT
If you're using and older version then you can mimic this behaviour with the ngBlur directive ng-blur="myform.inductionAmount.$touched=true"
<input class="form-control" type="number" id="inductionAmount" name="inductionAmount" ng-model="staff.inductionAmount" ng-required="true" ng-blur="myform.inductionAmount.$touched=true"/></td>
<span class="error-message" ng-show="myform.inductionAmount.$touched && myform.inductionAmount.$error.required">Please enter an induction value</span>
See plunker
Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}
html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.
I have a basic customer information form that I would like to make a little more interactive. The idea being if the user selects a country that is not USA or Canada the state Select turns to a state textbox. I'm sure this can be done with just PHP but have debated using jQuery but would like to avoid it if possible. Here is my form sample:
<tr>
<td>
<input name="city" type="text" id="city" value="<?= $this->aBillingProf['cCity']; ?>" />
</td>
<td>
<select name="state" id="state" style="width:218px;position:relative;top:-4px;">
<? $s = strlen($this->aBillingProf['cState']) == 2 ? strtoupper($this->aBillingProf['cState']) : strtoupper(stateTranslate($this->aBillingProf['cState']));
echo stateSelect('both',$s); ?>
</select>
<input name="state" type="text" id="state" value="<?= $this->aBillingProf['cState']; ?>" />
/*The Idea being only one of the above options is available depending on what is selected from the country select */
</td>
</tr>
<tr>
<td>
<label for="zip">Zip / Postal Code</label>
</td>
<td>
<label for="country">Country</label>
</td>
</tr>
<tr>
<td>
<input name="zip" type="text" id="zip" maxlength="6" value="<?= $this->aBillingProf['cZip']; ?>" />
</td>
<td>
<select name="country" id="country" style="width:218px;position:relative;top:-4px;">
<?= AffiliateStore::countrySelect($this->aBillingProf['cCountry']); ?>
</select>
<!-- <input type="text" name="country" id="country" value="<?= $this->aBillingProf['cCountry']; ?>" /> -->
</td>
</tr>
Basically what I do is to add a div containing the inputs I would need. In this case I would use a select boxes for US and Canadian states and a text input for other. Use the CSS diplay:none to collapse all divs except the one for the default selected country.
<div id="state_inputs">
<div id="us_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="ca_states_div">
<!-- Select box for US states goes here -->
</div>
<div style="display:none" id="other_states_div">
<input type="text" name="other_states" />
</div>
</div>
Now assuming that your select box for the country has the id country_select:
<script>
document.getElementById("country_select").onchange = function() {
var country_select = document.getElementById("country_select");
var country = country_select.options[country_select.selectedIndex].text;
if(country == "USA") {
document.getElementById("us_states_div").style.display="block";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="none";
} else if(country == "Canada") {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="block";
document.getElementById("other_states_div").style.display="none";
} else {
document.getElementById("us_states_div").style.display="none";
document.getElementById("ca_states_div").style.display="none";
document.getElementById("other_states_div").style.display="block";
}
};
</script>
Once you've updated your PHP to output that markup, on the processing side you just look at the selected country and then use the value contained in the correct state input.
This can't be done with just PHP because it requires that you use client side scripting to determine when the event has been triggered. You could use PHP to rebuild the form, however, that would require a reload from the sever. It's much easier just to use JavaScript to handle the event and update the form.