I have an autocomplete field that receives it's data from a database:
<datalist id="custlist">
<?php
$q_cust=mysql_query("select * from customer where rowstatus='0' order by id");
if (mysql_num_rows($q_cust)>0) {
while ($row=mysql_fetch_array($q_cust)){
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
}
?>
</datalist>
Below is my HTML for the codelist:
<tr>
<td></td>
<td><h3>Field 1</h3></td>
<td>:</td>
<td><input class="awesomplete" required="required" id="cust" name ="custnama" list="custlist" /></h3></td>
<td></td>
</tr>
The autocomplete works fine (I'm using the awesomplete widget) and when I select one of the customer names, the input 1 field will automatically show the ID of the customer.
What I want to do is having another field, let's say "input 2" that will show the customer name when the user selects the ID from the input 1 field.
Since I already stored the name as well on the data list, can I just get it from the datalist and show it in the input 2 field based on the value of input 1 using JavaScript?
If i can't do that please explain me the simplest way to get it done.
Related
I'm using a database and there are 3 columns such as id, bname, and author.
Selectbox takes its value from database's bname column. I can send bname value to textbox by using "onchange="this.form.author.value=this.options[this.selectedIndex].value". But I want to call author value into textbox by taking from database when selectbox changed. How can I do this?
<td>Book name :<select name="bname">
<% do while not a.eof %>
<option value="<%=a("bname")%>"><%=a("bname")%></option>
<% a.movenext
loop%></select></td>
<td>Author: <INPUT TYPE="text" NAME="author"></font></td>
I think you are asking how to append the author's name to your textbox. You can use your same code with one little change, add the +=:
<select name="bname" onchange="this.form.dsayi.value+=this.options[this.selectedIndex].innerHTML">
I'm creating a scoring ballot to score submitted contest videos. I use the same HTML form for all videos to score. The only fields that are being dynamically updated with java script are: judge name and a contestant name. My problem is the value that I set up with java script is showing on the form itself but is not recorded in a csv file.
Here is my HTML:
Select your name
Judge#1
Judge#2
Judge#3
Judge#4
Judge#5
Judge#6
Based on this option select they would get a set of videos they have not completed scoring on, and first scoring form with video embedded is displayed. Initially they are hidden on the page.
<form id="ballot1" action="javascript: sendBallot()" method="post" enctype="multipart/form-data">
<table border="0" style="border-collapse: collapse" width="100%" id="table3">
<tr>
<td><input type="hidden" name="Contestant" value="Contestant1"></td>
<td width="78%"><input name="form_judge" id="form_judge" value=""></td>
</tr>
<tr>
<td><p><span style="font-size:1em;"><strong>1. Efficacy of Practice - 50%</strong></span></p></td>
</tr>
<tr>
<td><label class="ballot"> a. Video explores relevant subject matter </label>
</td>
<td>
<select class="ballot" id="one_a_score" name="one_a_score" valign="bottom">
<option value="0" selected>Select Score</option>
<option value="2">Poor</option>
<option value="4">Below average</option>
<option value="6">Average</option>
<option value="8">Good</option>
<option value="10">Excellent</option>
</select>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" name="submit" value="Submit Form" id="submit"/>
<input type="reset" value="Reset" id="resetBtn"/>
</div>
My java script to set up the form values:
function showBallotForm(divName) {
var divName = 'Contestant1';
document.getElementById(divName).style.display='';
var selectjudgeName = document.getElementById("judgeName");
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
}
var divName = 'Contestant1'; - this will be deleted as soon as I figure out why judge name is set up and showing on the form with no problem, but when I enter all scores and hit "submit" button, entire form is recorded in csv file, except for one value (form_judge) that was set dynamically. By the way, I tried to use getElementById insted of oFormElement, the result is the same. I can see it on the form, but it records just word 'judge' in the csv file, not the actual name.
What am I missing? Your help is greatly appreciated.
I can't quite grasp what your javascript does because there are several errors in it:
function showBallotForm(divName) {
var divName = 'Contestant1';
The divName parameter is never used since it is immediatly re-written?
document.getElementById(divName).style.display='';
No idea what you wanted here, you want to display the hidden input?
var selectjudgeName = document.getElementById("judgeName");
There is no element with "judgeName" id on your HTML, so this won't work, I will suppose you did not paste the full code then
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
Ok, but you could do this by simply using document.getElementByid("form_judge")
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
But here is your error. You cannot set a value on a select. I see the object is an input but this is weird since I can't even see where selectJudgeName came from! The data that is send on the form is the selectedIndex, not the value. So what you want is to find which option you want and point to it something like this:
oFormElement.selectedIndex = (the index of the option you want)
If you don't know the index, you will have to look for it on the oFormElementobject, just do a for loop searching which of the option have the value you want, and when you find it, set that as the selectedIndex and break out.
Also, what submits this is a javascript you named in the action, you sure that is sending the proper data?
I have a javascript form that allows users to add data to MySQL table via php. The form allows the user to dynamically add more data inputs if they need more than the single input that is given initially.
The user clicks on the the "Add Budget Item" button to add more items.
The form in the view looks like this:
<input type="button" value="Add Budget Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Budget Item" onClick="deleteRow('dataTable')" />
<br>
<p>(All actions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td >
<input type="checkbox" name="chk[]" checked="checked" value ='<?php echo set_value('chk[]') ?>' />
</td>
<td>
<label>Item/Procedure</label>
<input type="text" name="itm_nm[]" value ='<?php echo set_value('itm_nm[]') ?>'/>
</td>
<td>
<label for="itm_trig">Trigger/Visit</label>
<input type="text" class="small" name="itm_trig[]" value ='<?php echo set_value('itm_trig[]') ?>'/>
</td>
<td>
<td>
<label for="itm_amt">Budget Amount</label>
<input type="text" class="small" name="itm_amt[]" value ='<?php echo set_value('itm_amt[]') ?>'>
</td>
</p>
</tr>
</tbody>
</table>
The form is submitted to the validation controller. Upon a failed validation I would like the form to be repopulated with all the dynamically created fields and their data that was input by the user.
The validation basically looks like this:
function index(){
$this->form_validation->set_rules('itm_nm[]', 'Item Names', 'required');
$this->form_validation->set_rules('itm_trig[]', 'Item Triggers/Visits', 'required');
$this->form_validation->set_rules('itm_amt[]', 'Item Amounts', 'required|decimal');
if ($this->form_validation->run() == FALSE) {
$this->load->view('build_bud2');
}
When the view is returned, this works fine for the first form item that is not dynamically generated by the user. But, none of the dynamically generated data fields appear (and are obviously not re-populated with the previously submitted data).
How can I get the dynamically generated data fields to re-appear and be re-populated the same way the initial data does when validation fails?
I would do it this way, using a JSON view with Codeigniter and Ajax instead of "posting" the form.
Submit your form with AJAX, to your PHP script.
The PHP script takes the fields and sends back a JSON response
If there is one or more validation error(s), send back an appropriate JSON response with all the fields and errors. The response could be the field ID with the error message, for example.
The JS takes the JSON response and display the errors (if there are any).
If you want to use a POST anyway, you have, at least, 2 choices:
Output a JSON representation of what the user entered that will be available in JavaScript. Then, loop trough all the fields and "redo" the field structure based on the JSON representation.
Or, make a PHP representation of what the user entered (in objects or in an array) and loop trough the fields, in PHP, and display all fields one by one.
I would do it this way:
Hit Submit Button form
Validate input
If validation failed, pass the same POST data to the view page (again)
Manipulate the passed POST data in view using foreach loops and
stuff.
By the way, this link may help or give you an idea
How can I use CodeIgniter's set_value for a field that's an array?
I have 16 table elements like,
<td id="test"> /Dynamic value appears here from JavaScript/ </td>
Where I put values from OnChange event, with this JavaScript
document.getElementById('test').innerHTML = value + " LT";
Now I want to know how to grab all input field values upon changing input field values in <td id="Test"> </td> , because in the other field I want to show total amount based on other fields.
----------------------------------------------------------update
I will ask other question from same opera.
How get value from input type="hidden" field, where value changed allways then user select new element on html ??
I have a drop down menu for which one option is 'Other'. Each option is tored in a table with an id ie if OptionId = 6, OptionDescription is "Other".
If 'Other' is chosen, a text box should appear for the user to enter specifically what the other criteria is:
<tr>
<td class="labels">
Option:
</td>
<td colspan="3">
<%=Html.DropDownList("OptionId", Utilities.OptionLookup(), "-Select One-") %>
</td>
<td>
<input id="OtherOption" type="text" />
</td>
</tr>
In this case, Utilities.OptionLookup() gets the values from my Option table and populates the dd. At the moment, I just have a a plain textbox OtherOption.
I've used javascript before to do something like this but it's based on a click event. So, I set the text box to 'display:none', use onclick to name my script and do the visible true or false in my script.
I want to be able to do something similar but when 'Other' is selected in my drop down.
What's the best way to do this?
You can do it the same way, but instead of the onclick event, you utilize the onchange event.