Reading values from a dynamic table form - javascript

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)

Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>

Related

Ajax HTML FORM not sending input

i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit

Angular.js - ng-disabled on checkbox and still submit a valid form?

I'm using angular.js and trying to verify the form before actually submitting it. This is my HTML so far:
<form name="form" class="css-form" novalidate>
<table>
<tr>
<td>
<input type="text" ng-model="branch.phone_number" name="uPhone" required="" />
<br />
<div ng-show="form.$submitted || form.uPhone.$touched">
<div ng-show="form.uPhone.$error.required">Insert phone number!</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" ng-model="branch.approved" ng-checked="branch.approved === 1" required="" ng-disabled="checkUser()" />
</td>
<tr/>
<tr>
<td align="right">
<input type="button" ng-click="reset()" value="Reset" />
</td>
<tr/>
<tr>
<td align="left">
<input type="submit" ng-click="form.$valid && save()" value="Save" />
</td>
</tr>
</table>
</form>
And this is my checkUser function:
$scope.checkUser = function() {
return (user.get().is_admin === 1) ? false : true;
};
Basically, if ng-model="branch.approved" is not truthy, the form won't allow to submit it. If I delete the ng-disabled attribute, the form submits.
What's going on and how to solve it? Thanks!
Your checkbox is required - when the control is disabled, it is not setting any value.
Remove the required="" attribute from input type="checkbox" and it should work as you expect
try this:
use ng-disabled="user.is_admin" then use ng-change on checkbox like this ng-change="checkUser()"
change the function to
$scope.checkUser = function() {
$scope.user = user.get();
};
i guess the user admin state can change during the form life... otherwise u don't need the change event just use ng-disabled="user.is_admin" and initialize the user object inside the controller

Javascript assign table to a variable

My goal is to create a button using javascript, that creates a table, that is the same as one I already have. Here I have a table with id="create_table_test", and a button with onsumbit function createTable().
The problem is whenever the button is executed, instead of a table I get [object HTMLTableElement] .Also tried to do it without the function getElemntById, but the result was the same. With some testing I found that this script doesn't like input types.I tried to do it with the same table, but without the input field types set and it worked out.Maybe thats the cause ?
The next thing that maybe have to be kept in mind is that I need to store the filled tables into php variables, then insert them into table.
<!DOCTYPE html>
<html>
<head>
<script>
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
</script>
</head>
<body>
<span id="create_table">
<table id="create_table_test" class="repeat_table">
<tr class="tr_test" style="border-bottom:3px solid #0066FF; font-weight:bold">
<td id="Question">
Въпрос
</td>
<td>
A
</td>
<td>
B
</td>
<td>
C
</td>
<td>
D
</td>
<td>
True answer
</td>
<td>
</td>
</tr>
<form name="test" action="send.php" onsubmit="" method="post">
<tr>
<td>
<textarea id="question" name="question" style="width:300px; height:120px;"></textarea></td>
<td>
<textarea id="answer1" name="answer1" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer2" name="answer2" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer3" name="answer3" style="width:80px; height:120px"></textarea></td>
<td>
<textarea id="answer4" name="answer4" style="width:80px; height:120px"></textarea></td>
<td>
<input id="true_answer" type="radio" name="true_answer" value="A">A<br>
<input id="true_answer" type="radio" name="true_answer" value="B">B<br>
<input id="true_answer" type="radio" name="true_answer" value="C">C<br>
<input id="true_answer" type="radio" name="true_answer" value="D">D<br>
</td>
<td>
<input name="submit" type="submit" value="" class="btn"/>
</form>
</td>
</tr>
</table>
<input type="button" onclick="createTable()" value="CreateTable"/>
</span>
</body>
try this one...
function createTable() {
var table = document.getElementById("create_table_test").outerHTML;
document.getElementById("create_table").innerHTML += table;
}
Looks like you want:
document.getElementById("create_table").innerHTML += table.outerHTML;
But beware of duplicate IDs.
Just change this code from:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML += table;
}
to:
var table = document.getElementById("create_table_test");
function createTable() {
document.getElementById("create_table").innerHTML = table.outerHTML;
}
This will create the same table with the same ids. You might wanna re-think your logic.

Input field show/hide and submit issue with Javascript and html code

Well I've html form where 2 radio button exist. 1) Fixed 2) Tiered.
Fixed radio button has 2 field: 1) Fees 2) Additional Fees
Tiered radio button has 3 field : 1) Tier 1% 2) Tier 1$ 3) Tier 2%
So, If fixed radio button is selected then "Fees" and "Additional Fees" field should be show.
And if Tiered radio button is selected then only "Tier 1%" and "Tier 1$" and "Tier 2%" and "Additional Fees" field should be show.
Now First issue is : after first load the page it's showing Fees and Addition Fees field. It's ok. But if i select Tiered radio button it's show all field including "Fees". but I don't want to show this only "Fees" field.
Second Issue is : If i select Tirered it's process the page but if select Fixed then it's don't submit the page.
Html Form
<form action="agent-quote-submitted.php?property_id=<?=$property_id?>" method="post" name="regForm" id="regForm" >
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>Type:</td>
<td><input type="radio" value="F" id="offer_typef" name="offer_type" required /> <b>Fixed</b> </td>
<td><input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b></td>
<script type="text/javascript">
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me').show();
} else {
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
</script>
</tr>
<tr>
<td colspan="3">
<div id='show-me' style='display:none'>
<div class="form-group">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>%</td>
<td><input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required ></td>
</tr>
<tr>
<td>$</td>
<td><input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required > </td>
</tr>
<tr>
<td>%</td>
<td><input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<div id='show-me2' style='display:none'>
<td>%</td>
<td>
<input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required>
</td>
<td></td>
</div>
</tr>
<tr>
<td>$</td>
<td><span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required>
</td>
<td></td>
</tr>
<tr>
<td colspan="3"><input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary"></td>
</tr>
</table>
</form>
Okay, this puzzled me for a bit and I tore apart your form bit by bit until I realized you have your fixed fees wrapped in a div that is nested around table rows. That ain't gonna work.
Make sure one of your radios is checked on load and you set your displays accordingly.
Make sure you can correctly hide-show elements (you can't partially hide row elements by wrapping them in a div. That is not allowed. You can wrap a table in a div, but not a row or cell. You can, however, simply hide/show the tr instead (which I do in the fiddle).
I would recommend adding just one listener (binding) and putting all the logic in there instead of two different binds.
I made a fiddle here: http://jsfiddle.net/C9jad/6/
$(function () {
$('tr#feesFixed')[0].style.display = 'none';
$('div#feesTiered')[0].style.display = 'none';
toggleFees(); // Call this once on ready
console.log($('#offer_typef').prop('checked'))
console.log($('#offer_typet').prop('checked'))
// Single binding here to call encapsulated logic
$('#regForm input:radio').on('click', function(event){
toggleFees();
});
});
function toggleFees() {
if( $('#offer_typef').prop('checked') ) {
$('#feesTiered').hide();
$('#feesFixed').show();
} else {
$('#feesFixed').hide();
$('#feesTiered').show();
}
};
I tore up a few pieces until I realized your real problem was the illegal nesting.
But that should help you fix it straight away.
#1 I will assume that you're working under Bootstrap CSS framework because your <input> class is form-control
#2 I did remove all <table> tags because I couldn't understand anything from your HTML structure
First issue is : after first load the page it's showing Fees and
Addition Fees field. It's ok. But if i select Tiered radio button it's
show all field including "Fees". but I don't want to show this only
"Fees" field.
the solution for this is to wrap:
fixed input into a its own div
tierd inputs (3) into a another div
Leaving Additional fees input without a div since it must be present in both cases
I swapped and assigned show-me to Fixed and show-me2 to tierd (to keep things organized)
HTML:
<form action="" method="post" name="regForm" id="regForm" >
Type: <input type="radio" value="F" id="offer_typef" name="offer_type" required checked /> <b>Fixed</b>
<input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b>
<!-- Fixed -->
<div id='show-me'>
% <input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required />
</div>
<!-- Tierd -->
<div id='show-me2' style='display:none'>
<div class="form-group">
% <input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required />
$ <input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
% <input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
</div>
</div>
<!-- Additional field -->
$ <span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required />
<!-- Submit button -->
<input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary" />
</form>
Second Issue is : If i select Tirered it's process the page but if
select Fixed then it's don't submit the page.
this caused because all of your form inputs has the attribute required, when you click tiered radio button the show-me display is set to none which makes impossible for the form to be submitted unless you remove the required attribute with JS help or validate the form on server-side
I did simple required changes on JS side
#offer_typef attribute changes effect the div #show-me
#offer_typet attribute changes effect the div #show-me2
JS:
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me').show();
$('#show-me input').attr('required');
} else {
$('#show-me input').removeAttr('required');
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
Here's the jsFiddle
Remember: Making an input hidden (display:none;) doesn't mean that it won't be passed to server!

How to achieve check box and text field dependency in following scenario?

I'm using PHP, Smarty, jQuery, etc. for my website. Now the scenario is in one template file there is some code containing loops, checkboxes, textfields, etc. For your reference I'm putting the necessary code snippet from smarty template as below:
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden" name="subject_{$subject_topic_data.subject_id}_topics[]" value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" {if in_array($topic_diff_level_data.topic_id, $practice_sheet_set_details[$subject_topic_data.subject_id].topics)}checked="checked"{/if}>
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden" name="topic_names[{$topic_diff_level_data.topic_id}]" value="{$topic_diff_level_data.topic_name}"> -->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}">
<input type="hidden" name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
Now from the above code what I want to achieve is when the user checks the check box of subject the concerned topic text fields should get enabled. Initially when the page loads all the tesxtfields of all the topics should be disabled. CAn you help me in achieving this? If you want some additional information I can provide you the same. Thanks in advance.
Client Side:
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden"
name="subject_{$subject_topic_data.subject_id}_topics[]"
value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
checkbox: give id of subject_selected
<input type="checkbox" class="custom-check"
name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]"
id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}"
value="{$topic_diff_level_data.topic_id}"
{if in_array($topic_diff_level_data.topic_id,
$practice_sheet_set_details[$subject_topic_data.subject_id].topics)}checked="checked"{/if}>
//disabled
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden"
name="topic_names[{$topic_diff_level_data.topic_id}]"
value="{$topic_diff_level_data.topic_name}">
-->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text"
name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}"
id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}"
maxlength="3" class="mini" value="{$diff_level.added_no_questions}">
<input type="hidden"
name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}"
value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
Javascript:
<script type=text/javascript>
function subject_selection(/* pass the selection here */){
var check= document.getElementById('subject_selection');
if (check.checked){
/* if checked, ajax? change html values(ie hidden)? that's up to you /
or
document.getElementById('inputSelected').type = "" / change it accordingly */
}
}

Categories