I have table rendered by Apex code in salesfoce.
<div id="wrap" style=""><fieldset style="border: none;"><table role="presentation" style="">
<tbody><tr>
<td>
<input type="radio"value="Casual"><label for="j_id0:j_id2:j_id4:j_id112:0"> CASUAL</label></td>
<td>
<input type="radio" value="BUSINESS CASUAL"><label for="j_id0:j_id2:j_id4:j_id112:1"> BUSINESS CASUAL</label></td>
<td>
<input type="radio" value="Semi-Formal"><label for="j_id0:j_id2:j_id4:j_id112:2"> SEMI-FORMAL</label></td>
<td>
<input type="radio" value="Formal"><label for="j_id0:j_id2:j_id4:j_id112:3"> FORMAL</label></td>
<td>
<input type="radio" value="Costume"><label for="j_id0:j_id2:j_id4:j_id112:4"> COSTUME</label></td>
<td>
<input type="radio" value="Other"><label for="j_id0:j_id2:j_id4:j_id112:5"> OTHER</label></td>
</tr>
</tbody></table></fieldset>
</div>
I need to break the row after third label . which means three inputs/labels in one row.
I can use jQuery. I have tried everything like injecting closing </tr> tag after third input via innerHTML etc . But nothing seems to work .
Try to manipulate the DOM a little bit,
$('<tr>').append($('tr td:gt(2)')).appendTo('tbody');
DEMO
Related
I'm using a CSS template and trying to draw a table having the following structure:
<tbody>
<tr role="row" class="odd">
<td>
<div class="checkbox">
<input type="checkbox" id="checkbox1" value="check">
<label for="checkbox1"></label>
</div>
</td>
<td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
</tr>
<tr class="unread even" role="row">
<td>
<div class="checkbox">
<input type="checkbox" id="checkbox0" value="check">
<label for="checkbox0"></label>
</div></td>
<td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td>
</tr>
</tbody>
the input type checkbox are using a CSS ::before and ::after with the following settings:
[type=checkbox]:checked,[type=checkbox]:not(:checked){...
[type=checkbox]+label:before,[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(.filled-in)+label:after{...
[type=checkbox]:not(:checked):disabled+label:before{...
[type=checkbox].tabbed:focus+label:after{...
[type=checkbox]:checked+label:before{...
[type=checkbox]:checked:disabled+label:before{...
I would like to select all checkbox programmatically in Javascript, any idea how I can do it ?
I would like to select all checkbox programmatically in Javascript
If you want to make all checkboxes 'checked' ,for that you can use :
let cbox = document.querySelectorAll("input[type='checkbox']");
for (var i=0; i<cbox.length; i++) {
cbox[i].checked = true;
}
<input type="checkbox" class="c1">
<input type="checkbox" class="c2">
<input type="checkbox" class="c3">
But, if you want to select the :before or :after elements with javascript, you CAN't. They are pseudo-elements and like their name says, they are not actual elements, they are not considered parts of the DOM so they cannot be 'touched', 'selected', 'manipulated' etc. by javascript or jquery etc.
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>
Below is JSP page
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="xyzRadio" value="sampleInputRadio" checked="checked"
onclick="loadXyz()"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="sampDtlsRadio" value="abcRadio"
onclick="loadabc()">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
In JS file I am hiding div based on user's selection.
Both page have some functionality which changes page's default look, Like row can be added or deleted, Now if user select other radio button and came back to page, default look should be displayed. I don't want to get into undo what user has done, util there is cleaner way to do it.
Currently I am reloading parent page.
Is there any way using ajax call I can request for xyz.jsp page again, so that I don't have to refresh parent page. Or any better solution.
First of all it's better to use onchange rather then onclick. Second, combine you radio buttons with the same name (to make it acting like radio buttons rather then as a checkboxes). Third, bind your handlers in js code rather then in html. And finally, of course you can load parts via Ajax.
$('[type="radio"]').on('change', function(){
if($('[type="radio"]:checked').val() === 'sampleInputRadio') {
$('#xyz').load('http://your.serv.er/xyz.jsp');
loadXyz();
} else {
$('#abc').load('http://your.serv.er/abc.jsp');
loadabc();
}
});
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="SampleInput" value="sampleInputRadio" checked="checked"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="SampleInput" value="abcRadio">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
P.S. Since I don't know what your original handler do, I just call its after load .jsp requests but maybe it is unnecessary.
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