</form> being automattically added to my HTML in the wrong place - javascript

I have a page that I would like the following:
a <form action POST>
select List1 - with onchange set populate list 2
select List2 populated using JavaScript <div id="secondList"></div>
with an <input type="submit" value="Assign">
close the </form>
The second populates list fine. The problem seems to be (when checked in FireBug) that the /form tag is moved for some reason so that the order appears like this:
<form action POST> </form>
select list 1 - correct
list 2 - correctly populated
the <input type="submit" value="Assign">
Why does this happen and how can get around this problem?
HTML CODE
<tr>
<form action="webiste/assignToDepartment.php" method="post">
<td>
<select selected="All" name="firstItem" onchange="checkTeacherList(this.value)">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</td>
<td>
<div id="secondList"></div>
</td>
<td>
<input type="submit" value="Assign">
</td>
</form>
</tr>

Your <form> element has to be placed inside the <td> item. <td> and <th> are the only valid children of <tr>. Alternatively, since your form spans several columns, you'll need to wrap the form around the containing <table>, something like:
<form>
<table>
</table>
</form>

your form element should be placed inside the tag or around the entire table

make your html proper like this
<form action="webiste/assignToDepartment.php" method="post">
<table>
<tr>
<td>
<select selected="All" name="firstItem" onchange="checkTeacherList(this.value)">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</td>
<td>
<div id="secondList"></div>
</td>
<td>
<input type="submit" value="Assign">
</td>
</tr>
</table>
</form>

Firebug's HTML pane does not show the raw HTML sent by the server. Instead, it shows a nice tree graph with the structure of the document and that tree is built with the memory representation of the document nodes. It's not possible to build an invalid tree, thus invalid HTML needs to be fixed or ignored.
If you pass your HTML through the W3C HTML Validator (you might need to check the "Validate HTML fragment" option if you don't provide the complete document) you'll see it reports several errors about the document structure:
document type does not allow element "XXXX" here
end tag for "XXXX" which is not finished
You need to fix that to ensure proper rendering and, as a consequence, proper scripting.
P.S. While there're normally exact specs on how to process valid HTML, invalid HTML is often left to the browser's discretion. That's a good reason to avoid invalid tags: there can be drastic differences in the way they're rendered by different browsers.

Related

Get all html controls visible to the user?

How might one go about getting all controls visible to the user?
<div id=dataform>
<div>
Name
<input type=text id=name class=entry>
</div>
<div>
City
<input type=text id=city class=entry style="display:none;">
</div>
<div style="display:none;">
<label for=nocontact>nocontact</label>
<input type=checkbox id=nocontact class=entry>
</div>
<div>
<table>
<tr>
<td>
<label for=phone>Phone</label>
</td>
<td>
<input type=text id=phone class=entry>
</td>
</tr>
</table>
</div>
<div>
<select id="keys">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</div>
</div>
Neither "city" nor "nocontact" are visible to the user.
document.getElementById("dataform").querySelectorAll("dataform > entry ???? ");
Or some other method to get all controls, inputs, that are visible (not just inputs, but selects, textarea, etc). Could add a class to each, as shown and grab all, but how to determine or get just those that are visible to the user. The nocontact checkbox wouldn't be, so ignore it. I put the table in there to demonstrate that the control is not always a direct child of the div in which it resides.
I'm afraid that cycling through them all and tagging them with a class or a data attribute is the only way and that pretty much sucks. FYI: not using jquery or other framework on this.
There's no "proper" way to do this, in part because it's unclear what "visible" is supposed to mean in the first place. jQuery (version 3.4.1) does it like this:
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
...which is great for certain definitions of "visible", but it doesn't check whether an element has "visibility" set to "hidden", or if it's scrolled off the screen; it mostly just checks for display:none (including on parent elements).

web2py How to add id to submit_button

In my html file, I'm adding two forms, each with their own submit_button. I have a text input in one of the forms and want to make it required to be not blank but it doesn't seem to work...
userQueryForm = SQLFORM.factory(
Field('userQuery', label='', requires=IS_NOT_EMPTY() ),
submit_button = T('Generate Report')
)
The html that gets rendered is as follows
<td class="w2p_fw">
<input class="string" id="no_table_userQuery" name="userQuery" type="text" value="">
</td>
...
<tr id="submit_record__row">
<td class="w2p_fl"></td>
<td class="w2p_fw">
<input type="submit" value="Generate Report" class="btn">
</td>
</tr>
I want my <input> to have an id so i can access it in Jquery...
My ultimate goal is to not allow the form to be subitted if the text
You can access the submit button server-side DOM element via userQueryForm.custom.submit, so to add an id attribute:
userQueryForm.custom.submit.update(_id='submit_button')
Alternatively, there are other methods to access the submit button via jQuery rather than relying on an id. For example:
jQuery('input[value="Generate Report"]')

Jquery get different input hidden value to a link

I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle

Where do you put the form element if you have editable rows of a table in AngularJS?

We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm

sending the elements of a select form to another one

it's my first post here and I so sorry if I wrong the place.
My difficulty is view the elements of the first select form to the other one if the first form is set as array.
The goal is to send the elements of a select form to another one and then record them on a db MySQL, that will show them on a html page.
I found in this forum the procedure how to create two select form and add 'n remove the items, then with the command .implode of MySQL can join the element and insert multiple items on db and view them on page.
But if I set the name's select form as array it doesn't work. I've used the following script to have two select form :
<script language="javascript">
function getOpt(select1,select2)
{
for (bCnt=0;bCnt<select1.length;bCnt++)
{
if (select1.options[bCnt].selected)
{
newOpt=new
Option(select1.options[bCnt].text,select1.options[bCnt].value,false,false);
select2.options[select2.length]=newOpt;
}
}
}
function remOpt(select2)
{
for (bCnt=0;bCnt<select2.length;bCnt++)
{
if (select2.options[bCnt].selected)
select2.options[bCnt]=null;
}
}
</script>
then the selects form:
<table border="0">
<tr>
<td>
<label for="id">List:<br></label>
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
<option value="101">101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
<option value="105">105</option>
<option value="106">106</option>
</select>
</td>
<td>
<input type="button" value="Add"onClick="getOpt(this.form.oneS,this.for m.twoS)"><br>
<input type="button" value="Remove"onClick="remOpt(this.form.twoS)">
</td>
<td>
<label for="id">Members List:<br></label>
<select name="twoS" id="select_role" size=20 multiple="multiple"/>
</select>
</td>
</tr>
</table>
if comment the script,the part of the buttons, the second form and change the line:
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
in
<select name="oneS[]" id="select_role" size=20 required multiple="multiple"/>
I have any issue, can record the items of the first select form on db and view them on the page.
But it's not my goal, I've have to use 2 select form.
Is there some one can help me? thanks a lot.
I've you use jQuery, here it is:
$(document).ready(function()
{
$('.add').click(function(event)//this is your first form, with the id "select_role"
{
$('#select_role2).html($(this).html()+"add whatever html code you want to insert into here");
});
});
use the same idea for remove item.
then use an $.ajax or $.post to send the data to mysql or use a variable to store all the html that was added or removed from your second select.
Simply include the jQuery library and you are all sorted. I have not written raw JAvascript in a long long time, but this will work with the help of jQuery. don't use the same id for two elements again. The id must be unique.
Then assuming you insert a whole bunch of options, you can use $('#your_form_id).serialize() within an $.ajax call to get the array of elements then use the PHP technique for parsing name="insertedoption[]" />. I'm not completely sure I helped you too much, as you need to read up on a few things, but this is an idea on how to do what you need to do.

Categories