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.
Related
I've got the following in a partial view, representing a row that is added dynamically:
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disable="disabled" class="form-control"></select>
</td>
<td>
<input asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disable="disabled" class="form-control"></select>
</td>
I thought that maybe an onclick="EnableDropDown()" call attached to the CheckBox (that took a checkbox and a dropdown parameter) might do the trick, but it doesn't keep the state nor does the checkbox find the appropriate dropdown. I could loop through all the rows on a click and enable/disable dropdowns appropriately but this seems like a poor solution.
I've seen a fair few solutions out there but none of the simple ones work... either because they're not dynamic, or maybe it's down to the multiple checkboxes, or the fact it's an EnumSelectList and not a simple DropDown (Is there a difference?)..
I'm not too well-versed on javascript so I'm a bit lost with this one.
First, you are missing a "d" in the disabled attribute
Then if you are adding the row dynamically that means that the events are not added when the dom load, you can modify this behavior using a parent selector that already exists when the dom is rendered, also add some references using data-attributes between inputs and select make easier handle this
Try using the following code
$(".parent-class").on("change",".checkbox-class", function() {
var enabledDropdown = $(this).data("dropdown")
$(`#${enabledDropdown}`).removeAttr("disabled")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="parent-class">
<tr>
<td>
<input asp-for="Id" class="form-control" />
</td>
<td>
<input data-dropdown="MyDropDownId1" asp-for="EnableDropDown1" id="EnableDropDown1Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown1" id="MyDropDownId1" asp-items="Html.GetEnumSelectList<MyEnum1Type>()" disabled="disabled" class="form-control"></select>
</td>
<td>
<input data-dropdown="MyDropDownId2" asp-for="EnableDropDown2" id="EnableDropDown2Id" type="checkbox" class="form-control checkbox-class" />
</td>
<td>
<select asp-for="MyDropDown2" id="MyDropDownId2" asp-items="Html.GetEnumSelectList<MyEnum2Type>()" disabled="disabled" class="form-control"></select>
</td>
</tr>
</table>
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>
Here is my code below. I do have a form wherein consists of three dropdowns and input boxes.So I do want to check whether a field is blank or for negative numbers being entered?
//Dependant dropdown code
$("#item").change(function() {
var iname = $(this).val();
$.post("fetch_data.php",
{"iname": iname},
function (data) {
document.getElementById('new_select').innerHTML=data;
});
});
$('#submitBtn').click(function(){
var txt = $(".check").val();
if(parseInt(txt) < 0 || txt == -1){
alert("Enter positive values ..!!!!");
}else{
$('#sess').text($('#sesion').val());
$('#ite').text($('#item').val());
$('#new').text($('#new_select').val());
$('#qin').text($('#qtyin').val());
$('#qout').text($('#qtyout').val());
}
});
$('#submit').click(function(){
$.ajax({
type:"POST",
url:'profile.php',
data:{sesion:$("#sess").text(),iname:$("#ite").text(),price:$("#new").text(),category:$("#qin").text(),qty:$("#qout").text()},
success: function(data){
$("#confirm-submit").modal("hide");
$("#result").html("<div class='alert alert-warning'>Record Inserted Successfully</div>");
setTimeout(function(){
$("#result").fadeOut();
},5000);
window.location.reload();
}
});
});
});
<form method='post' name='ireg' class="form-inline" role="form" id="formfield" enctype="multipart/form-data" onsubmit="return validateForm();">
<table id="entry" class="table table-responsive">
<tr>
<td> <label for="sesion">Session</label></td>
<td><select id="sesion" name="sesion" class="form-control check">
<option>--Select--</option>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
</select></td>
<td> <label for="item_name">Item Name</label></td>
<td><select name="iname" id="item" class="form-control check" style="width:180px;">
<option>Select Item</option>
<?php
include 'db.php';
$select = $conn->query("SELECT item_name from items");
while($row = mysqli_fetch_array($select, MYSQLI_ASSOC))
{
echo "<option>".$row['item_name']."</option>";
}
?>
</select>
</td>
<td>
<label for="new_select">Price</label>
</td>
<td>
<select id="new_select" name="new_select" class="form-control check">
<option>Select Price</option>
</select>
</td>
<td>
<label for="qtyin">Qty(Dine In)</label>
</td>
<td>
<input type="number" id="qtyin" min="0" name="qtyin" class="check" placeholder="QTY Dine In" style="width:80px;"/>
</td>
<td>
<label for="qtyout">Qty(Parcel)</label>
</td>
<td>
<input type="number" id="qtyout" name="qtyout" min="0" class="check" placeholder="QTY Dine Out" style="width:80px;"/>
</td>
<td>
<!-- <button type="submit" name="submit" class="btn btn-primary">Submit</button> -->
<input type="button" name="submit" value="Submit" id="submitBtn" data-toggle="modal"
data-target="#confirm-submit" class="btn btn-success" />
</td>
</tr>
</table>
</form>
I am trying to take input from user where validation is needed and once it is validated goes to modal popup to confirm then submit process..
If HTML5 validation is supported, you do not need jQuery for validation.
<input type=number min=0 required placeholder='Enter a positive number'>
If you want a custom validation message, the following should do:
<input type=number min=0 required placeholder="Enter a positive number"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="setCustomValidity('')">
The :invalid psuedo class can be used to apply custom CSS to it.
This link contains some examples. For browser support see caniuse.
EDIT:
For dropdowns, you may use the required attribute.
<select required>
<option value="">None</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
Note that the first option has to be blank. For details on applying required to <select> see this question.
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 am creating one form in html using table. Which have one Drop down box contains two values 1. Professor, 2. Librarian. Now each values have different form fields. If I select Professor some different fields show be displayed and if I select Librarian some different fields display.
Can anybody tell me how I can do this??
<table width="435" border="0">
<tr> <td>VIsit Date </td> <td><input type="text" name="textfield" /></td></tr>
<tr> <td>Last Visit Date </td> <td><input type="text" name="textfield2" /></td></tr> <tr> <td>Call Type </td>
<td>
<select name="title" size="1">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option> </select>
</td>
</tr>
</table>
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page title</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$(document).ready(function() {
$("#callType").on('change', function(){
$('.form1').toggle();
$('.form2').toggle();
});
});
</script>
<style>
.form2 {
display: none;
}
</style>
</head>
<body>
<select name="title" id="callType">
<option value ="Pro"> Professor </option>
<option value ="Lib"> Librarian </option>
</select>
<div class="form1">
<input type="text" name="text1" value="text1" />
<input type="text" name="text2" value="text2" />
</div>
<div class="form2">
<input type="text" name="text3" value="text3" />
<input type="text" name="text4" value="text4" />
</div>
</body>
</html>
If you have just the two options in the dropdown, first form will be visible, and second will be hidden (display: none;). And on change, they will get their visibility toggled.
Few points forgot to mention:
1. Have your event handler inside document ready.
2. Keep in mind that in css 'visibility' and 'display' are different. Even if I said visibility, I was referring to display. jQuery show(), hide(), toggle() changes css display. The difference between "visibility: hidden" and "display: none" is that with visibility, invisible elements still take up space on the page.
Here's how to do it in jquery, forget normal javascript.
JQUERY CODE (PUT THIS IN THE HEAD PART)
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option2") {
$('.option1form').hide('');
$('.option2form').show('');
}});
</script>
<script>
$("#YOUR_SPECIFIC_ID").change(function(){
if ($(this).val() == "Option1") {
$('.option1form').show('');
$('.option2form').hide('');}});
</script>
Assign the select field an id:
<select name="asia" style="width:233px;" id="YOUR_SPECIFIC_ID">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
Then, you need to make the different forms for different selections.
like this.
<div class="option1form" style="display:none">
<input type="text" name="example1_1">
<input type="text" name="example1_2">
</div>
<div class="option2form" style="display:none">
<input type="text" name="example2_1">
<input type="text" name="example2_2">
</div>
Should work like this.