Re-populate dynamic javascript after failed Codeigniter validation - javascript

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?

Related

PHP form Submit multiple values through one form field and append to array

I have php form that posts data to URL with single field, the problem is I can only submit one value. I have a barcode scanner that I want to be able to scan multiple serial number barcodes and submit the form. I probably need a javascript but I am not sure. See below
<?php
echo("Serial Number: " . $_POST['serial'] . "<br />\n");
?>
<form action="myform5.php" method="post">
<p>First name: <input type="text" name="serial" /></p>
<input type="submit" name="submit" value="Submit" />
</form>
So in other words, I want a form field where I can enter multiple serial numbers and be able to post the data to the URL. Since I am using barcode scanner which also submits enter key after each scan, so I want to be able to add multiple serials without touching the keyboard and when finished, should be able to click submit and it posts the data.
The SQL query would be something like this;
select * from hdds where serial IN ('5MQ3DJAA', '5MQ3DJAB', '5MQ3DJAC', '5MQ3DJAB', '5MQ3DJAR');
I dont want to use the textarea field, I cannot figure out how to have a single input type text field and have a add button next to it, when a serial number is scanned or entered, that number is added to list below, that number is shown below the field and serials keep adding up when done press the submit button that posts the data.
This is what I am looking to do, see below example.
I would appreciate a small working example?
If you need to enter multiple serial numbers then add serial number as an array values. Try this :
<?php
if(isset($_POST['submit'])){
echo "Serial Numbers";
echo "<br/>";
$serial = $_POST['submit'];
print_r($serial);
}
?>
<form action="myform5.php" method="post">
<p>serial number: <input type="text" name="serial[]" /></p>
<p>serial number: <input type="text" name="serial[]" /></p>
<p>serial number: <input type="text" name="serial[]" /></p>
<input type="submit" name="submit" value="Submit" />
</form>

Auto fill form using javascript - get data from datalist

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.

jQuery JSON Form is only sending Pre-Poluated Values

I have a form. I have pre-populated the values using JSON/Web Service.
Ex:
<tr id="">
<td class="tleft">
<label for="nickname" class="fieldLabel"><span class="ui-small-text">Nick Name:</span></label>
</td class="tright">
<td class="tright">
<input name="nickname" type="text" class="nickname" />
</td>
</tr>
Populated Using:
$(".nickname").val(person.nickname);
I am sending the form back to another URL using JSON. I verified that works by using a hidden field that isnt populated to see if its updating, but for some reason, all fields being populated, when changed on the screen, still send the same values they were populated with.
Full Code: http://pastebin.com/F3dt8ncC
Thank You.

settin up a text input value with Javascript

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?

How to put a form inside a table?

I want to ask about how can I put a form with method GET in a table tag.
In the table element I have a text field. When I submit this form it should validate. My validation works fine but this form doesn't actually submit itself, so I can't get any value at the URL.
Below is the code:
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="text" name="company" form="my_form">
</td>
<button type="button" form="my_form" onclick="return submitvalidation();">ok</button>
</td>
</tr>
</table>
</form>
Your problem has nothing to do with putting a form in a table.
You just need to have a submit button.
A plain button is designed to hang JS off and nothing else. It won't submit the form.
Use type="submit" not type="button".
You should make sure that your button is in inside a table cell though. You either have an extra </td> or a midding <td>.
There doesn't seem to be any reason to use a table here at all though.
Return true after the validation completed.

Categories

Resources