We Keep Coding

Form not being submitted with correct data

I have a form for a quiz that has 3 different inputs. Number of questions, and two types of tests. i am modifying existing code that works fine but we want the layout different which requires it to be coded differently. this is the version that isn't working. Basically I need the number of questions and category to be sent with the button clicked. For some reason it isn't sending either. Any help would be great, thanks!
<strong>Questions</strong>
<select name="num_questions">
{section name=foo start=10 loop=31}
<option value={$smarty.section.foo.index}>{$smarty.section.foo.index}</option>
{/section}
</select>
</div>
<select onchange="$('.questions_{$c.categorynum}').val(this.value);" name="category">
{foreach from=$categories item=c}
{if ($c.categorynum != 1 and $c.categorynum < 8)}
<div class="questiontitle" style="float:left;">
<option value={$c.categorynum}><strong>{$c.name}</strong></option>
</div>
{/if}
{/foreach}
</select>
<form action="test.php" method="post" style="float:left;">
<input type="submit" value="Create Exam" name="create" style="margin:0 3px;"/>
<input type="hidden" name="category" class="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="num_questions" value="10"/>
</form>
<form action="simulation.php" method="post" style="float:left;">
<input type="submit" name="flashcard" value="Flash Cards" style="margin:0 3px;"/>
<input type="hidden" name="create" value="1"/>
<input type="hidden" name="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="numquestions" value="10"/>
</form>

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?

Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.

A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

passing html value from a form to JavaScript function

I am trying to pass the value and text from a form to a JavaScript function using the onclick on a button but don't seem to be able to get it to work I want to keep this as generic as possible so I copy and paste the form
<form name='f1'>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="item_name" value="Span>
<input type="hidden" name="amount" value="68">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="test#hotmail.com">
<select name="del">
<option value="0">Delivery To</option>
<option value="41">Uk</option>
<option value="39">USA</option>
<option value="20">World Wide</option>
</select>
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but22.gif"
onClick="shipping1(this.options.selectedindex.value,this.options.selectedindex.text)" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
</form>
i think it may be the formating of this.options
any help would be great

try this.
onClick="shipping1(this.form.del[this.form.del.selectedIndex].value,this.form.del[this.form.del.selectedIndex].text)"

checkbox onclick event loads as if checked

When I load the page both forms are displayed. If I check and then uncheck "add" the second form disappears. How do I make this page load with form 2 hidden on load?
<html>
<title>Car Service</title>
<strong>Car Service:</strong><br><br>
<input type="submit" id="accountsearch" name="accountsearch" value="Select Customer" onclick="window.open('selectaccount.php');"><br><br>
<form name="newservicesetup" id="newservicesetup" action="" method="post">
<select name="ordertype" id="ordertype">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty1" id="qty1" value="Quantity" size="5" onclick="this.value=''">
<input type="checkbox" id="add" value="0" name="add" onclick="
if (this.checked) {
document.getElementById('newservicesetup1').style.display='inline';
} else {
document.getElementById('newservicesetup1').style.display='none'; } return true;" >
</form>
<form name="newservicesetup1" id="newservicesetup1" action="" method="post">
<select name="ordertype1" id="ordertype1">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty2" id="qty2" value="Quantity" size="5" onclick="this.value=''">
</form>
<br>
XX: <input type="file" name="sfa" id="sfa">
AA1: <input type="file" name="pbxws" id="pbxws"><br> <br>
<input type="submit" name="next" id="next" value="Next">

set the second forms css class to hidden or something like that and then define .hidden in your css to be display:none. Or put style='display:none' t ostart with on the second form

Change your second form tag to read this....
<form name="newservicesetup1" id="newservicesetup1" action="" method="post" style="display:none;">

Change Data Based on Radio Button

How do I do this in javascript where when a radio button is selected only certain fields show up to type in?? Please show work (preferably with JSFiddle) :)
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="addType" value="Professor" />
Course<input type="radio" name="addType" value="Course" />
<br><br>Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select>
Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" />
</form>

set onclick event of your radiobuttons to call a function that will check radiobutton status and then will show or hide elements of your form inside specified div elements.
jsfiddle sample
<script language="javascript">
function ChangeForm()
{
if(document.getElementById('Professor').checked)
document.getElementById('fieldset1').style.display = "inline";
else
document.getElementById('fieldset1').style.display = "none";
if(document.getElementById('Course').checked)
document.getElementById('fieldset2').style.display = "inline";
else
document.getElementById('fieldset2').style.display = "none";
}
</script>
<form action="inc/add_p_c_validate.php" method="post">
Professor<input type="radio" name="group1" onclick="ChangeForm()" id="Professor" name="addType" value="Professor" />
Course<input type="radio" name="group1" onclick="ChangeForm()" name="Course" id="Course" value="Course" />
<br><br>
<div id="fieldset1">Name: <input type="text" name="name" /><br>
Department: <select name="deptName"><option>Department 1</option> <option>Department 2</option></select></div>
<div id="fieldset2">Email: <input type="text" name="email" /><br>
<input type="submit" name="submit" /> </div>
</form>