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.
Related
I have a filters form in HTML that sends filtering instructions with GET request. After filtering my <select>s don't load values from passed request parameters but <input>s do with their th:value. How can I instruct <select> to get selected value from URL parameters (passed with GET)? I know I can get values from object in model with th:field but that is not what I want to do, the data I want this controls to select is passed in the request.
This is working well for <input>:
<input th:value="${param.minFee}" placeholder="Min. Fee" class="form-control" type="number" min="0" max="100" step="0.01" id="minFee" name="minFee"/>
How can I make this <select> obtain its selected value from request params?
<select class="form-control" name="payingCurrency" id="payingCurrency">
<option th:value="-1">Any</option>
<option th:each="currency : ${currencies}"
th:value="${currency}"
th:text="${currency.name}"></option>
</select>
For this you should use th:selected.
<select class="form-control" name="payingCurrency" id="payingCurrency">
<option th:value="-1">Any</option>
<option th:each="currency : ${currencies}"
th:value="${currency}"
th:text="${currency.name}"
th:selected="${param.currency == currency}" />
</select>
With the important party being th:selected="${param.currency == currency}". (Where param.currency should evaluate to the parameter you are using.)
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 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>).
<form method="post">
<select name="users" id="users" onchange="showUser(this.value)" value="">
<option value="">Select a person:</option>
<option value="1" onchange="copy();">tcs</option>
<option value="2" onchange="copy();">wipro</option>
<option value="3" onchange="copy();">Hcl</option>
<option value="4" onchange="copy();">krystal kones</option>
</select>
</form>
I have this drop down i want that when the value is changed like tcs,wipro or hcl then that value should shown in html label
Try putting the onChange attribute in the select tag.
Example: http://jsfiddle.net/r6Fus/
HTML:
<div id="label"></div>
<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
<option value="tcs" >tcs</option>
<option value="wipro" >wipro</option>
<option value="Hcl" >Hcl</option>
<option value="krystal kones" >krystal kones</option>
</select>
Javascript:
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}
Otherwise you could use jQuery.
First of all, the onchange event is for the select element, not the option elements. Those don't actually change. Also, you have two JavaScript functions. showUser() and copy(). But you describe only one piece of functionality. What do these two functions do?
As for showing the text in the label, here's one way to do it (using jQuery, because everybody does):
$(document).ready(function() {
$('#users').change(function() {
$('#myLabel').text($(this).val());
});
});
What this is basically doing is:
Wait until the DOM is loaded and ready.
Bind a function to the change event of the specified select element.
The function contains one line, which sets the text of the specified label to the value of the select.