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 */
}
}
Related
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
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>
I'm using PHP, Smarty , jQuery, Colorbox - a jQuery lightbox plugin, etc. for my website. Now I'm displaying some output in a popup which is generated by using " Colorbox - a jQuery lightbox plugin". Now I want to disable all the text fields present in this popup when the form loads but if I go to the HTML source of page the disabled="disabled" attribute from the <input> tag gets removed and the text boxes are not getting disabled. Can you tell me why this is happening? For your reference I'm putting below the code which will display the data in a Colorbox pop up.
{if $subject_topic_questions}
{foreach from=$subject_topic_questions item=subject_topic_data}
<div class="hidden">
<div id="topics_{$subject_topic_data.subject_id}" class="c-popup">
<h2 class="c-popup-header">Select Topics</h2>
<div class="c-content">
<input type="hidden" name="subject_names[{$subject_topic_data.subject_id}]" id="subject_names" value="{$subject_topic_data.subject_name}">
<h2 class=""> {$subject_topic_data.subject_name}</h2>
<div class="c-tbl-wrap">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="c-tbl">
<tbody>
<tr>
<td>
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="">
<label class="blue">Select All</label>
</p>
</td>
{foreach from=$difficulty_levels item=diff_levels key=dkey}
<input type="hidden" name="diff_levels[{$dkey}]" value="{$diff_levels}">
<td width="22%" align="center"><strong>{$diff_levels}</strong></td>
{/foreach}
</tr>
{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}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">
<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}" disabled="disabled">
<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}
</tbody>
</table>
</div>
<p class="center">Done Cancel</p>
</div>
</div>
</div>
{/foreach}
{/if}
The main code you need to consider is as below from the above code:
<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}" disabled="disabled">
Can you tell me how the disabled="disabled" attribute gets vanishes after page load and if there is any way to apply to it, please tell me. Thanks in advance.
$('.mini').prop("disabled", true);
$('.mini').prop("disabled", false);
try this
I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.
<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
<form name="radioForm">
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
</form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
Upload New Image: <input name="myfile" type="file" id="imageBox" />
<input type="submit" name="submitBtn" value="Upload" onclick=""/>
</form></td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
</td></tr>
</table>
javascript code:
function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
if (document.radioForm.imageRadio[index].checked) {
var radioValue = document.radioForm.imageRadio[index].id;
return radioValue;
}
}
}
function post_value(){
alert('im');
var selected_Image = getRadioValue();
if (selected_Image == null){
alert('Please Select an Image');
}
else{
window.opener.document.getElementById(imageId).value = selected_Image;
self.close();
}
}
Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?
Scroll to the bottom if you want to skip the explanation, and get to the solution.
You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.
See below for a simplified overview of your problem, without loss of generality):
Current situation (document.radioForm.imageRadio.length = 1):
<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->
Desired situation (<form> placed outside the while loop):
<form name="radioForm">
<input type="radio" name="imageRadio" id="image1" />
<input type="radio" name="imageRadio" id="image2" />
<input type="radio" name="imageRadio" id="image3" />
</form>
Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.
<form name="radioForm"
action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
<tr>
<td><img border="0" src="<?=$row['image_path']?>" /></td>
<td>
<input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
</td>
</tr>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<input type="submit" name="submitBtn" value="Upload" />
</td>
<td width="10%">
<input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
</td>
</tr>
</table>
</form>
I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.
nesting form isn't allowed, check How do you overcome the html form nesting limitation?
the result unpreditable but you can use Javascript to workaround with it.
Checkout jQuery serialize example. see how it extract values, and then submit from via DOM.
http://api.jquery.com/serialize/
In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.
I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:
<script type="text/javascript" charset="utf-8">
$.metadata.setType("attr", "validate");
$(document).ready(function() {
$("#editRecord").validate();
});
</script>
<style type="text/css">
.block { display: block; }
form.cmxform label.error { display: none; }
</style>
</head>
<body>
<div id="header">
<h1>
Questions</h1>
</div>
<div id="content">
<h1>
Questions Page 1
</h1>
</div>
<div id="content">
<h1>
</h1>
<form class="cmxform" method="post" action="editrecord.php" id="editRecord">
<input type="hidden" name="-action" value="edit">
<h1>
Questions
</h1>
<table width="46%" class="record">
<tr>
<td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
<td width="15%" valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question1" value="No" /> No
</label>
<label for="Question1" class="error">You must answer this question to proceed</label>
</td>
<td width="64%" valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
</tr>
<tr>
<td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
<label for="Yes">
<input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
</label>
<label for="No">
<input type="radio" name="Question2" value="No" /> No
</label>
<label for="Question2" class="error">You must answer this question to proceed</label>
</td>
<td valign="top" class="field_data"><strong>Details:</strong>
<textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea> </td>
</tr>
<tr class="submit_btn">
<td colspan="3">
<input type="submit" name="-edit" value="Finish">
<input type="reset" name="reset" value="Reset"> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:
validate="required:'input[name=Question1][value=Yes]:checked'"
This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)
You can see a working demo here
You can do something like this:
$("#editRecord").validate({
rules: {
'Details1': {
required: function() {
return $('input[name=Question1]').val() == 'yes';
}
}
'Details2': {
required: function() {
return $('input[name=Question2]').val() == 'yes';
}
}
}
});
In response to Nick Craver's suggested response above, I found the correct syntax to be:
class="validate[required][name=Question1][value=Yes]:checked"
instead of what he posted.
Thanks for putting me on the right track, though!