I have drop down menu which i choose one item from it and then by using onblur event i can post the match detail into input text box. whenever i choose from the drop menu, the matched detail should posted into the input text box. In my example i will choose a specific industry field and the related questions should be appear in question1 and question2 input text box. Example is below:
var db = Database.Open("me");
var ind = Request["areagroup"];
var sqlq = "SELECT id,indName,question1,question2 from Industry where id = #0";
var data = db.Query(sqlq,ind);
<select name="areagroup" onblur="???? ">
<option value="0">General</option>
<option value="1">Services</option>
<option value="2">Basic Materials</option>
</select>
<label>Question 1</label><input type="text" name="q1" />
<br/>
<label>Question 2</label><input type="text" name="q2" />
I'm not sure of your target.
The code that follows populates the input fields when the dropdown loses its focus:
#{
var question1 = "";
var question2 = "";
if (IsPost)
{
if(Request["butt"] != "test"){
var db = Database.Open("me");
var ind = Request["areagroup"];
var sqlq = "SELECT id,indName,question1,question2 from Industry where id = #0";
var data = db.Query(sqlq,ind);
question1 = data.question1;
question2 = data.question2;
} else {
// If submit button is pressed
}
}
}
<form method="post">
<select name="areagroup" onblur="this.form.submit()">
<option value="0">General</option>
<option value="1">Services</option>
<option value="2">Basic Materials</option>
</select>
<br/ >
<label>Question 1</label><input type="text" name="q1" value="#question1" />
<br/>
<label>Question 2</label><input type="text" name="q2" value="#question2" />
<br/>
<input type="submit" name="butt" value="test" />
</form>
I have provided a submit button and an if statement inside the IsPost block to test if the form is submitted by the user.
In my opinion, a better solution is to use the onchange instead of the onblur event adding a dummy option to the dropdown (something like <option value="-1">--- Please select ---</option>).
Related
chapter_number | chapter_title |
1 | Introduction |
2 | Number System |
<select type="text" name="chapter_number" class="form-control form-control-line" value="">
<option selected="option" disabled="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
</select
<input type="text" name="chapter_title" id="title" class="form-control"/>
above is my table and next is my code the select option and the input field. I want that when I select '1' automatically the input field will print chapter title 'Introduction' and If I select '2' the input field will became 'Number System'.
If you want to get data from database you need to call ajax on onchange event of select box.
Add "setinput" class to select box
<select type="text" name="chapter_number" class="form-control form-control-line setinput" value="">
Add below script
$('body').on('change','.setinput',function(){
$.ajax({
url: 'your_base_url/controller_name/your_method',
type:'POST',
data:{id:$(this).val()},
success:function(result){
$('input[name="chapter_title"]').val(result);
}
})
});
Controller method would be like below
public function your_method(){
$id = $this->input->post('id');
$this->db->select('*');
$this->db->from('database_table_name');
$this->db->where('chapter_number',$id);
$result = $this->db->get()->row();
echo $result->chapter_title;
}
I hope, it would be helpful to you.
I am trying to get the selected value of the dropdown on change event to be sent on reactive form submission. I have a very similar scenario working for radio based on the answer from how to get selected value of radio in reactive form
Here's the code for dropdown
<div class="row" *ngIf="question.controls.type.value === 'dropdown'">
<div class="col-md-12">
<div class="form-group__text select">
<label for="type">{{ question.controls.label.value }}</label>
<br><br>
<select name="value" formArrayName="component" (change)="updateSelection(question.controls.component.controls, $event.target)">
<option
*ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
</div>
</div>
</div>
I am not able to pass the answer as formcontrol to updateSelection on change of a selected option from the dropdown. Any help is greatly appreciated.
https://stackblitz.com/edit/angular-acdcac
Very similarily like previous question, we iterate the form controls in your array, initially set all as false, and then turn the chosen choice as true. So template let's pass $event.target.value:
<select name="value" formArrayName="component"
(change)="updateSelection(question.controls.component.controls, $event.target.value)">
<option *ngFor="let answer of question.controls.component.controls; let j = index" [formGroupName]="j"
[ngValue]="answer?.value?.value">
{{answer?.value?.value}}
</option>
</select>
And in the component we as mentioned iterate the form controls and set all as false. The value for $event.target.value will be the string value, for example Choice 1. We then search for the form control that has that value and then set the boolean for that particular formgroup:
updateSelection(formArr, answer) {
formArr.forEach(x => {
x.controls.selectedValue.setValue(false)
})
let ctrl = formArr.find(x => x.value.value === answer)
ctrl.controls.selectedValue.setValue(true)
}
Your forked StackBlitz
I'm trying validate my form specified for multi language.
<form>
<select name="test">
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<input type="text" name="lorem[1]">
<input type="text" name="ipsum[1]">
<input type="text" name="lorem[2]">
<input type="text" name="ipsum[2]">
</form>
I have the code to the validation like this
$validator['test'] = "required|integer";
$validator['lorem.*'] = "required_with_all:ipsum.*|min:3";
$validator['ipsum.*'] = "required_with_all:lorem.*|min:3";
$this->validate($request, $validator);
Field 'lorem.' must have value if the field 'ipsum. have value and conversely.
Everything works fine except for one case.
If I don't fill any fields except 'test'.
It isn't good valid:
test = '1';
lorem[1] = '';
ipsum[1] = '';
lorem[2] = '';
lorem[2] = '';
How I can repair it?
I am desperate! I have a list of people with names and a unique ID. I need to display just the first and last name in a drop down list and then when the user selects the name they want from the list and submits, I would like to create a new record in a different table and add:
first name
last name
unique ID
I just don't know the syntax to do it. I have tried everything and this is the closest I get which works for one record in the list but multiple records in the list fails.
<select class="form-control" name="">
<div>#foreach(var Team in MyTeam){
<option value="">#Team.FirstName #Team.LastName </option>
<input type="hidden" name="FirstName" value=#Team.FirstName>
<input type="hidden" name="LastName" value=#Team.LastName>
<input type="hidden" name="TeamID" value=#Team.UserID>
<input type="hidden" name="ReferrerName" value=#Team.UserID>
}
</div>
You do not need the hidden fields, they will not work.
<select class="form-control" name="formUser">
#foreach(var Team in MyTeam){
<option value="">#Team.FirstName #Team.LastName </option>
}
</select>
Then, you need to add post code
if(IsPost){
var userID = Request["formUser"];
var sqlselect = "SELECT * FROM YourTable Where UserID = #0";
var sqldata = db.QuerySingle(sqlselect, userID);
var firstname = sqldata.FirstName;
var lastname = sqldata.LastName;
//And so on to get your variables then you can use them to insert
}
I have two select boxes and second gets updated with GET ajax on first select box selection.
It works cool, but...
If a person made a selection in the fist field (c) it updates field (s) correctly.
When a person made a selection in field (s) but then decide to select another option in (c), field (s) gets updated, but the previous selection of (s) do not clear, even that when it actually does update the options of (s)
What is missing in my code to clear the (s) field when new options are loaded?
<form data-parsley-validate method="post" action="#post1" data-ajax="false" data-theme="<?=$theme?>">
<div class="ui-field-contain ui-body ui-br">
<label for="c">Select Category:</label>
<select name="c" id="c" data-mini="true" placeholder="Select Category" required>
<option value="">Select Category</option>
<?
$ssql="SELECT * FROM cat";
$sresult=mysql_query($ssql);
while($srows = mysql_fetch_array($sresult)){
$cat_id = $srows['id'];
$cat_name = $srows['name'];
echo '<option value="'.$cat_id.'">'.$cat_name.'</option>';
}
?>
</select>
<script>
$(document).ready(function() {
$("#c").selectmenu(); // Initializes
$("#c").selectmenu('refresh', true);
$("#c").change(function() {
$("#s").load("getsub.php?c="+ $("#c").val());
$("#s").selectmenu('refresh', true);
});
})
</script>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="s">Select Subcategory:</label>
<select name="s" id="s" data-mini="true" placeholder="Select Subcategory" required>
<option value="">Select Subcategory</option>
</select>
</div>
<input type="submit" value="Send" name="submit" data-theme="butt">
</form>
First off, you should not be using .ready() in jQuery Mobile, instead use "Page Events" to add listeners.
To clear selection of an existing selectmenu, you should mark first option as selected and then refresh it.
$(document).on("pagecreate", "#pageID", function () {
$("#c").selectmenu("refresh");
$("#c").on("change", function () {
$("#s").load("getsub.php?c="+ $("#c").val(), function () {
$("#s option:eq(0)").prop("selected", true); /* select first option */
$("#s").selectmenu("refresh"); /* refresh */
});
});
});