Submitting a dynamically generated form - javascript

I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>

Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.

Related

Update table as soon as a new database table row is inserted

So I want to know how I should make a table, written in PHP 8, that updates as soon a new insert has been made in the database table (SQL Server 2019). I've created a simple table like this:
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
</tbody>
</table>
Then I've added a button that creates some input fields, and when these are submitted, the data is inserted into the database. But the only way I know to update the table is to reload the page so the table now has the new row. But I've seen websites that do this without reloading the site, and want to know how? My guess is to make some kind of listener, but how I dont know.
the submit button with some inputs could be something like this:
<form>
<input type="text" id="html" name="fav_language" value="">
<label for="html">HTML</label><br>
<input type="text" id="css" name="fav_language" value="">
<label for="css">CSS</label><br>
<input type="text" id="javascript" name="fav_language" value="">
<label for="javascript">JavaScript</label>
<input type="submit" value="Submit">
</form>
All this should just be pure self written code, not JQuery or something like that.
If you want your forms to submit without reloading, you should use AJAX.
E.g. Almost all of the chat boxes in the websites use AJAX to submit information.
I think this question will help you.
If you want to use AJAX with PHP you can simply make AJAX to call your PHP file for submitting information.
Look at this page to learn more.
If you want to use AJAX without any library you can do that with XMLHttpRequest. more info

Best way to build a checkbox or radio button to be able to be referenced in a Java Script function?

Im pretty new to html and I am building a webpage in html for work. It is basically a list of standards that a reviewer goes over and determines if a plan given to him/her meets those standards. I need to have either a checkbox(s) or radio button for "Accepted" and "Incomplete", but I need to be able to reference them later on with Java Script to run a report for the reviewer. Whats the best way to do this and should I use check boxes or radio buttons? I have my code attached, I am basically creating a bunch of rows in the table
<table style="width:100%">
<tr>
<td> <!--standard number--></td>
<td><!--standard name--></td>
<td> <input type="checkbox"> </td> <!--accepted checkbox-->
<td> <input type="checkbox"> </td> <!--incomplete checkbox-->
<td> <input type="text"> </td> <!--comments field-->
</tr>
</table>
Welcome and Thanks for asking the question.
So the difference between checkbox and radio button is with checkbox you can select as many as you want (e.g. Red/Green/Yellow/Blue) and with radio button you have a group where you select only one (e.g. Yes/No)
I created a fiddle with your example to show you how to access those elements: https://jsfiddle.net/vrjzfyun/
var accepted = document.querySelector("#cbAccepted");
accepted.checked = true;
Let us know if you have more questions.

settin up a text input value with Javascript

I'm creating a scoring ballot to score submitted contest videos. I use the same HTML form for all videos to score. The only fields that are being dynamically updated with java script are: judge name and a contestant name. My problem is the value that I set up with java script is showing on the form itself but is not recorded in a csv file.
Here is my HTML:
Select your name
Judge#1
Judge#2
Judge#3
Judge#4
Judge#5
Judge#6
Based on this option select they would get a set of videos they have not completed scoring on, and first scoring form with video embedded is displayed. Initially they are hidden on the page.
<form id="ballot1" action="javascript: sendBallot()" method="post" enctype="multipart/form-data">
<table border="0" style="border-collapse: collapse" width="100%" id="table3">
<tr>
<td><input type="hidden" name="Contestant" value="Contestant1"></td>
<td width="78%"><input name="form_judge" id="form_judge" value=""></td>
</tr>
<tr>
<td><p><span style="font-size:1em;"><strong>1. Efficacy of Practice - 50%</strong></span></p></td>
</tr>
<tr>
<td><label class="ballot"> a. Video explores relevant subject matter </label>
</td>
<td>
<select class="ballot" id="one_a_score" name="one_a_score" valign="bottom">
<option value="0" selected>Select Score</option>
<option value="2">Poor</option>
<option value="4">Below average</option>
<option value="6">Average</option>
<option value="8">Good</option>
<option value="10">Excellent</option>
</select>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" name="submit" value="Submit Form" id="submit"/>
<input type="reset" value="Reset" id="resetBtn"/>
</div>
My java script to set up the form values:
function showBallotForm(divName) {
var divName = 'Contestant1';
document.getElementById(divName).style.display='';
var selectjudgeName = document.getElementById("judgeName");
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
}
var divName = 'Contestant1'; - this will be deleted as soon as I figure out why judge name is set up and showing on the form with no problem, but when I enter all scores and hit "submit" button, entire form is recorded in csv file, except for one value (form_judge) that was set dynamically. By the way, I tried to use getElementById insted of oFormElement, the result is the same. I can see it on the form, but it records just word 'judge' in the csv file, not the actual name.
What am I missing? Your help is greatly appreciated.
I can't quite grasp what your javascript does because there are several errors in it:
function showBallotForm(divName) {
var divName = 'Contestant1';
The divName parameter is never used since it is immediatly re-written?
document.getElementById(divName).style.display='';
No idea what you wanted here, you want to display the hidden input?
var selectjudgeName = document.getElementById("judgeName");
There is no element with "judgeName" id on your HTML, so this won't work, I will suppose you did not paste the full code then
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
Ok, but you could do this by simply using document.getElementByid("form_judge")
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
But here is your error. You cannot set a value on a select. I see the object is an input but this is weird since I can't even see where selectJudgeName came from! The data that is send on the form is the selectedIndex, not the value. So what you want is to find which option you want and point to it something like this:
oFormElement.selectedIndex = (the index of the option you want)
If you don't know the index, you will have to look for it on the oFormElementobject, just do a for loop searching which of the option have the value you want, and when you find it, set that as the selectedIndex and break out.
Also, what submits this is a javascript you named in the action, you sure that is sending the proper data?

How to put a form inside a table?

I want to ask about how can I put a form with method GET in a table tag.
In the table element I have a text field. When I submit this form it should validate. My validation works fine but this form doesn't actually submit itself, so I can't get any value at the URL.
Below is the code:
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="text" name="company" form="my_form">
</td>
<button type="button" form="my_form" onclick="return submitvalidation();">ok</button>
</td>
</tr>
</table>
</form>
Your problem has nothing to do with putting a form in a table.
You just need to have a submit button.
A plain button is designed to hang JS off and nothing else. It won't submit the form.
Use type="submit" not type="button".
You should make sure that your button is in inside a table cell though. You either have an extra </td> or a midding <td>.
There doesn't seem to be any reason to use a table here at all though.
Return true after the validation completed.

How to allow user to enter elements in an HTML table

I want to allow a user to enter a list of persons in a web application, and then submit them as one batch. Each row looks roughly like this:
<TR>
<TD> <INPUT name="person.fname"> </TD>
<TD> <INPUT name="person.lname"> </TD>
<TD> <INPUT name="person.birthdate"> </TD>
</TR>
The form starts out with a single row of blank inputs, and I want a fresh row added to the list whenever the user fills in any of the fields -- i.e. the list grows on demand. Likewise, I want a row to disappear whenever the user clears all fields in it.
What is the easiest, most robust and most maintainable way to implement this?
Finally, how do I submit this table of values back to the server? What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?
If you are familiar with jQuery, you can use the .change handler to catch them changing the field. Test to see if it's the last row and if there is data in it. If they have taken everything out of the row, remove it. jQuery has some great ways to do this, but it's all dependent on how you want to write it. If so, append the new row using jQuery's .append function. If you're using Python and cgi_app and you use the same name attribute for each type of cell, you can use form.getlist('fname[]') and it will return an array of the names.
What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?
You can do:
<TR>
<TD> <INPUT name="person[fname]"> </TD>
<TD> <INPUT name="person[lname]"> </TD>
<TD> <INPUT name="person[birthdate]"> </TD>
</TR>
Which generates array 'person'
JQuery is a good suggestion, but if you don't want to use it, you can try generating input name by appending an index. For example:
<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>
where "N" is the row index. This way may help you to easily get the entire whole row values by using (i.e.) $GET['person'.$i.'fname'], $GET['person'.$i.'lname']... and so on.
CSS:
input:not(:first-of-type){
display:none}
jQuery:
$('input').click(function(){
$(this).val('');
}).blur(function(){
if($(this).val().length>1){
$(this)
.toggleClass('processed')
.hide('slow')
.parents('#person').find('input:not(.processed):first').show('slow');
}
});
$('#person').prepend('Click on blank space to proceed<br/>');
HTML:
<tr>
<form id=person method=post action='/your_page_on_server'>
<td><input name="fname" value='Enter the first name'/></td>
<td><input name="lname" value='Enter the last name'/></td>
<td><input name="birthdate" value='Enter the birth date'/></td>
<td><input type=submit value='Submit'/></td>
</form>
</tr>
I'm not familiar with server-side scripting, so my answer in only partial. Here's an example.
Also, I recommend to add input validation by JS.

Categories

Resources