We Keep Coding

HTML form getElementById() is NULL

Disclaimer: After some research online, I did attempt something to make sure the DOM was loaded before I queried, so please check that below, maybe I didn't get it right and that's where the problem comes from.
I know similar questions have already been asked maaaaanyyyy times but my code still doesn't work as I hoped after reading similar responses and trying to adapt my code accordingly, so please help if you can!
I am currently struggling with a form in my website. I wanted to create a form so that the admin could display a message on some of the site's pages. When I wanted to get the text that I put in the form, the returned value was NULL. I then noticed that the form I had just created was in fact nested inside another form, which doesn't work. I tried bypassing the problem by deleting the sub-form and using a formaction field but I keep having a NULL return value.
(I am using Spip for my website).
Here is the base HTML code of the admin part of the website, which contains the first form
<form method="post" action="#ENV{action}" id="form1">
<div>
#ACTION_FORMULAIRE{#ENV{action}}
[(#REM) ------------------------ Alert Message ------------------------ ]
<INCLURE{fond=formulaires/configure_alert_message}>
<script>
var msg_al = document.getElementById('alert_ortho').value;
console.log(msg_al);</script> <!-- THIS DISPLAYS THE TEXT THAT I WANT-->
<p class="buttons">
[(#ENV{choix}|=={valider_seul}|non)
<input type="submit" class="submit over" title="global_update" value="global_update" />
<input type="reset" class="submit" title="global_delete" value="global_delete" />
]
<input type="submit" class="submit" title="global_update" value="global_update" />
</p>
</div>
</form>
Then, here is configure_alert_message.html. I want the message to be sent to my page edit_article/html.
<div>
<label for="name">Alert Message :</label>
<textarea type="text" id="alert_ortho" name="alert_message">Blablabla.</textarea>
</div>
<div class="button">
<button type="submit" formaction="/edit_article.html" form="form1">Save alert message</button>
</div>
<p></p>
Lastly, here is the part of my edit_article.html file which calls for the previous code (this code is also inside a form field, I don't know if that could be a problem). I added the jQuery ready() in it in order to make sure that my query happens after DOM is loaded:
<div style="padding:10px; margin:10px; border: 3px solid #A0A0A0; text-align: center;background: #FFFF00;">
<span style="color:#FF0000;"> <strong>
<script>
$(document).ready(function() {
// do stuff when DOM is ready
var msg_al = document.getElementById('alert_ortho').value;
console.log(msg_al); <!-- THIS RETURNS "Cannot read property 'value' of null"-->
}); </script>
</strong> </span> </div>
<p class='buttons'><input type='submit' name="save" class='submit' value='save_button' /></p>
Why do I, when I try to get my message through document.getElementById('alert_ortho'), keep getting null on my page? I thought by using formaction and ready() before my query I wouldn't have this problem any more. Did I do it wrong for the DOM?
Thank you!

document.getElementById() searches the DOM of the current document for an element with a given ID.
It won't find an element in a different HTML document.
When you submit a form the data in it will be passed in the request body (for a POST form) or the query string of the URL. You need to read it from there.
Note that client-side JS has no access to the request body so this will require server-side code.

Document initializes after form submit

I need to have an HTML document that can contain multiple input fields.
Starting with one field, a submit should create another input field as a copy of itself.
So I declared it with HTML code and wrote a function to append a copy of it to my div.
For testing purposes, I made a button to call my js function, too.
Now I'm confused as clicking the button will create a new field and pushing enter inside a field will initialize my HTML document, deleting previously created fields.
Can anybody figure out why?
Kind regards, Tommy
<button onclick="createRow()">New row</button>
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow()">
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
<script>
function createRow() {
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
</script>

That's because your form submits. Forms are used to submit data to another page, so the entered data can be processed. You don't want this, instead you want to prevent the form from submitting using Event.preventDefault().
function createRow(event) { // Mind "event" here
// Prevent form from submitting (reloading the page and deleting your "progress")
event.preventDefault();
var row = document.getElementById("criteriaRow");
var newRow = row.cloneNode(true);
document.getElementById("criteriaTableBody").appendChild(newRow);
}
<button onclick="createRow(event)">New row</button> <!-- Pass event here! -->
<div id="criteriaTableBody">
<div class="tr" id="criteriaRow">
<div class="td">
<form onsubmit="createRow(event)"> <!-- Pass event here! -->
<input type="text" name="text" value="">
</form>
</div>
</div>
</div>
I also recommend avoiding HTML attributes like onclick, onsubmit, etc. Use an EventListener instead.

Pressing enter will submit the form.
The submit event handler will run, then the contents of the form will be sent to the URL specified by the action (the current URL since there isn't an action).
This loads a new page.
Since there is no action, the new page is a brand new, unmodified by JS, copy of the current page.
Avoid intrinsic event attributes like onsubmit. Use JavaScript event binding instead. Learn about the Event object and its preventDefault method.

different text for every row Jquery Modal/Dialog form

How I can change the text that is in the jdialog box message for each row?
As you can see, in every row in the column Order Details there is a Show button.
I would like for each row to have different text there.
I tried changing the name values, and I also put inside every td element the code for the button, but it still doesn't work.
The specific code for the text:
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget"
The full code here

In order to make the content of the dialog changes from record to another
You didn't explain How will you load the custom content? but I'll guide you to how to customize the dialog content per record.
First: Create a JS method called openDialog(), this method can take the context of the dialog as a parameter, or it may take just the record ID and load the content via AJAX or something
function openDialog(content="", record_id=0)
{
if(content.length > 0) // if you're passing content as a paramter
dialog.html(content);
if(record_id!=0) // if you're passing the record ID as a paramter
{
// load content via ajax or something
dialog.html("loaded content via AJAX for user number "+record_id);
}
dialog.dialog("open");
}
Then call this method in each "Show" button you have
<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button>
<button id="create-user-2" onclick="openDialog('',2);">New Show</button>
Update actually your full code is a little bit messy but as you requested, I tried to apply my solution on your fiddle code, here's my working example
https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen

atm the text that appears in there is hardcoded on your html
<p class="validateTips">Spicy Sandwitch</p>
unless you change it with javascript this text "Spicy sandwitch" will always be the same no matter how much times you create a new one. I didnt really read all your code because its way too big , but you can do something like this to adress each one of your entries individually(atribute them ids)
<div id="dialog-form" title="Order Details">
<p id="something1.0" class="validateTips">Spicy Sandwitch</p>
<p id="something1.5" class="validateTips">More</p>
<form>
<fieldset>
<label id="something2.0" for="name">More Comments</label>
<p id="something3.0" class="validateTips">Sandwitch only lettuce</p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
and then, when you create a new entrance of your row , you can go to each id specifically and decide what is shown
$('#something1.0').text('new Spicy sandwitch');
$('#something2.0').text('moreeee');

Make the following changes to your code:
Define elements inside the dialog with references to hold your dynamic content
<div id="dialog-form" title="Order Details">
<p class="validateTips field1"></p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips field2"></p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Define the content you want for each row, statically or via AJAX
var order1 = {
field1: 'Spicy Sandwich',
field2: 'Sandwich Only Lettuce'
};
var order2 = {
field1: 'Epic Pizza',
field2: 'Pizza Without Pinneaple'
};
var orders = [order1, order2];
Edit the code to populate the dialog
$(".showDialog").button().on("click", function() {
var row = $(this).closest('tr').index();
$('#dialog-form .field1').html(orders[row].field1);
$('#dialog-form .field2').html(orders[row].field2);
dialog.dialog("open");
});

Passing variables through multiple forms to PHP [duplicate]

Is it valid html to have the following:
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
So when you submit "b" you only get the fields within the inner form. When you submit "a" you get all fields minus those within "b".
If it isn't possible, what workarounds for this situation are available?

A. It is not valid HTML nor XHTML
In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:
"form must not contain other form elements."
http://www.w3.org/TR/xhtml1/#prohibitions
As for the older HTML 3.2 spec,
the section on the FORMS element states that:
"Every form must be enclosed within a
FORM element. There can be several
forms in a single document, but the
FORM element can't be nested."
B. The Workaround
There are workarounds using JavaScript without needing to nest form tags.
"How to create a nested form." (despite title this is not nested form tags, but a JavaScript workaround).
Answers to this StackOverflow question
Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)

In case someone find this post here is a great solution without the need of JS. Use two submit buttons with different name attributes check in your server language which submit button was pressed cause only one of them will be sent to the server.
<form method="post" action="ServerFileToExecute.php">
<input type="submit" name="save" value="Click here to save" />
<input type="submit" name="delete" value="Click here to delete" />
</form>
The server side could look something like this if you use php:
<?php
if(isset($_POST['save']))
echo "Stored!";
else if(isset($_POST['delete']))
echo "Deleted!";
else
echo "Action is missing!";
?>

HTML 4.x & HTML5 disallow nested forms, but HTML5 allows a workaround with the "form" attribute ("form owner").
As for HTML 4.x you can:
Use an extra form(s) with only hidden fields & JavaScript to set its input's and submit the form.
Use CSS to line up several HTML form to look like a single entity - but it might be complicated to do.

As others have said, it is not valid HTML.
It sounds like your are doing this to position the forms visually within each other. If that is the case, just do two separate forms and use CSS to position them.

No, the HTML specification states that no FORM element should contain another FORM element.

A possibility is to have an iframe inside the outer form. The iframe contains the inner form. Make sure to use the <base target="_parent" /> tag inside the head tag of the iframe to make the form behave as part of the main page.

You can answer your own question very easily by inputting the HTML code into the W3 Validator. (It features a text input field, you won't even have to put your code on a server...)
(And no, it won't validate.)

rather use a custom javascript-method inside the action attribute of the form!
eg
<html>
<head>
<script language="javascript" type="text/javascript">
var input1 = null;
var input2 = null;
function InitInputs() {
if (input1 == null) {
input1 = document.getElementById("input1");
}
if (input2 == null) {
input2 = document.getElementById("input2");
}
if (input1 == null) {
alert("input1 missing");
}
if (input2 == null) {
alert("input2 missing");
}
}
function myMethod1() {
InitInputs();
alert(input1.value + " " + input2.value);
}
function myMethod2() {
InitInputs();
alert(input1.value);
}
</script>
</head>
<body>
<form action="javascript:myMethod1();">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input type="button" onclick="myMethod2()" value="myMethod2"/>
<input type="submit" value="myMethod1" />
</form>
</body>
</html>

As workaround you could use formaction attribute on submit button. And just use different names on your inputs.
<form action="a">
<input.../>
<!-- Form 2 inputs -->
<input.../>
<input.../>
<input.../>
<input type="submit" formaction="b">
</form>
<input.../>

no,
see w3c

No, it is not valid. But a "solution" can be creating a modal window outside of form "a" containing the form "b".
<div id="myModalFormB" class="modal">
<form action="b">
<input.../>
<input.../>
<input.../>
<button type="submit">Save</button>
</form>
</div>
<form action="a">
<input.../>
Open modal b
<input.../>
</form>
It can be easily done if you are using bootstrap or materialize css.
I'm doing this to avoid using iframe.

Fast Solution:
To obtain different validations to different forms and keep their submits in separated functions you can do this:
<form id="form1" onsubmit="alert('form1')"></form>
<form id="form2" onsubmit="alert('form2')"></form>
<div>
<input form="form1" required />
<input form="form1" required />
<div>
<input form="form2" required />
<input form="form2" required />
<button form="form2" type="submit">Send form2</button>
</div>
<input form="form1" required />
<button form="form1" type="submit">Send form1</button>
</div>

A non-JavaScript workaround for nesting form tags:
Because you allow for
all fields minus those within "b".
when submitting "a", the following would work, using regular web-forms without fancy JavaScript tricks:
Step 1. Put each form on its own web page.
Step 2. Insert an iframe wherever you want this sub-form to appear.
Step 3. Profit.
I tried to use a code-playground website to show a demo, but many of them prohibit embedding their websites in iframes, even within their own domain.

You are trying to implement nested form which is not supported in HTML.
Every form must be enclosed within a FORM element. There can be
several forms in a single document, but the FORM element can't be
nested.
Workaround
You can implement this functionality with some change in HTML and JavaScript. (without using html forms)
Steps
1. Create both forms with div tag as follows (do not use form tag)
<div id="form_a">
<input.../>
<div id="form_b">
<input.../>
<input.../>
<button id="submit_b">Submit B</button>
</div>
<input.../>
<button id="submit_a">Submit A</button>
</div >
2. Add JQuery and Ajax to submit each form data
<script>
// Submit form A data
$('#submit_a').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_a input').not( "#form_b input" ).serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
// Submit form B data
$('#submit_b').click( function() {
$.ajax({
url: 'ajax-url',
type: 'post',
dataType: 'json',
data: $('#form_b input').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
</script>

If you need your form to submit/commit data to a 1:M relational database, I would recommend creating an "after insert" DB trigger on table A that will insert the necessary data for table B.

rich editor - get value

I am trying to get the value of dojo editor and append it to the hidden input. This code:
onClick="dojo.byId('editorContent').value = this.getValue()
works correctly if i put it in the div of the editor. However i want to update before send the form the hidden input. I already tried with onclick and onsubmit but didn't works.
Probably this is wrong :
content.getValue()
code
<form>
<div id="descricao_oferta">
<input type="hidden" name="item[editorContent]" id='editorContent' />
<div dojoType="dijit.Editor" id="content" height='200px'">
<?php echo isset($arr['conteudo']) ? $arr['conteudo'] : "Descrição";?>
</div>
<form>
<input id="send" name="send" type="submit" value="Registo" onClick="dojo.byId('editorContent').value = content.getValue()"/>
</form>
How can i update the hidden input with the content of the editor when submit the form ?
similar problem

source
this is the correct way:
onClick="dojo.byId('editorContent').value = dijit.byId('content').get('value')"

Shouldn't it be dijit.Editor.get('value'); to get the value from the editor?
http://dojotoolkit.org/documentation/tutorials/1.6/editor/