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?
Related
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.
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.
I have a form that adds a new user into the database. It all works perfectly, but what I want is to be able to add more than one user at a time, so when I click to "Add another user", it would appear another list of fields for adding a user. I don't know exactly how to explain it so I'll add some pictures:
Here is what I have when I try to add a user:
And, what I want is that when I click on "Add another user", to show me another list of fields under the other, like this:
So, if I click five times, it would show me five "forms" and the original one:
I've found this question where it shows how to do it with a different example, but my code has a table and a form so I don't know much exactly how to do it. Here's my form code:
<table id="minimalist-table">
<tr><th>Username</th><th>Password</th><th>Mail</th><th>Language</th><th>Sex</th></tr>
<form method="post" action="?action=users&sa=add">
<tr>
<td><input type="text" name="username[]" required="required"></td>
<td><input type="password" name="password[]" required="required"></td>
<td><input type="email" name="email[]" required="required"></td>
<td><select name="language[]">
<option value="en_US">English</option>
<option value="es_ES">Spanish</option>
</select></td>
<td><select name="sex[]">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr><td><input type="submit" value="Submit"> </td></tr>
</form></table>
I have the values with arrays (like name="email[]") because it's the way I can handle multiple elements for the database...
I've tried to put all this code into a function, so when I call the function it adds another group of fields into the form, but I don't know how to do it with JavaScript...
Thanks!
In such cases I usually create a hidden "template" element/row containing the HTML that should be added:
<table id="minimalist-table">
...
<tr class="template" style="display:none">
... all fields ...
</tr>
<tr class="submit_row"><td><input type="submit" value="Submit"> </td></tr>
So in the javascript you can do this to get the HTML (and disable the hidden inputs):
var row_template = $('#minimalist-table > .template').html().find(':input').prop('disabled', true)
The finished code would look something like this (untested)
var row_template = $('#minimalist-table > .template').html()
$('#add_row').on('click', function(){
$('#minimalist-table .submit_row').before(row_template);
});
I have a webpage that uses a JavaScript function to populate a second dropdown box when an item from a first dropdown box is picked. The function creates the second drop down changing this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</td>
to this:
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" name="personName">Bob</option>
<option value="Jim" name="personName">Jim</option>
<option value="Tom" name="personName">Tom</option>
</select>
</div>
</td>
My problem is that when the form button is pressed it does not POST the personName value chosen from the created list. If I write exactly the same code manually, so the function is not called, then it works. If I use the function to create the list it doesn't (no string at all gets POSTED). Why might this be?
You may have a conflict with the name property. Remove the name property from all of the options;you only need it on the select element. Also, make sure (recommend using Firebug) that the markup you are giving above is literally what does get produced; I've had before where injecting elements aren't in the <form> tag as expected, depending on how it's used sometimes.
You are not closing your form tag. Probably there lies your issue.
The HTML generated content should work to POST your values. Probably because the FORM is not closed, the browser will close it for you on a spot you do not expect.
Also you only need a name attribute on your SELECT.
Try this.
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
</div>
</form>
</td>
<td>
<form action="http://website/addToDepartment.php" method="post">
<div id="nondepartment">
<select name="personName">
<option value="Bob" >Bob</option>
<option value="Jim" >Jim</option>
<option value="Tom" >Tom</option>
</select>
</div>
</form>
</td>
I am trying to set my HREF of my button to the text that was in the input field and the selected option from my select list, when the user clicks the Search button.
<div>
<div>
<input type="text" value="Keywords" style="width:206px" />
</div>
<div style="clear:both">
<select>
<option value="Test">Test</option>
</select>
</div>
<div>
<button>Search</button>
</div>
</div>
How do I set the href from the value of the input box and the selected value of the select list? I might need to create a form for this but I thought I could get away with something a little simpler. I just need to compile the search string and redirect the user to the appropriate page, since the search engine is already built.
Thanks!
Edit 1
Sorry guys I am using php to load the select list but I am not able to provide the code for how the select list gets populated since it has company sensitive information in it. I shouldn't have included that.
Using javascript, you can retrieve and value of a form field and handle it to what you need.
Suppose the select ID's select and the link ID's is link:
var value = document.getElementById('select').value;
document.getElementById('link').setAttribute('href', value);
With PHP only (no jQuery, no Javascript) you would use a submit-button in your form and work with $_POST:
1st your form (stripped down to basics):
<form method="post">
<input name="keywords" type="text" value="Keywords" style="width:206px" />
<select name="options">
<option value="Test">Test</option>
</select>
<input type="submit" name="ok" value="ok" />
</form>
2nd, on the beginning of your php-page that holds that form:
if (isset($_POST['ok'])) { // submit has been clicked...
if (isset($_POST[keywords])) { // there's input in keywords
$keywords = $_POST['keywords'];
// sanitize $keywords to prevent sql-injection
// go to the page you want to call...
// assuming there's no output before header ...
// and $keywords is in the right format ...
// and you retrieved $_POST['options'] to do sth with that, too
header('Location: http://www.url.com/page.php?key=$keywords');
} else exit('no keywords entered!');
}