Forum Moderators: open
Im making a traininglog-system and need som help with the java part.
Im trying to make a dynamic form with jquery but cant figure out how to make it with categories/exercises.
This it how i want it to work:
__________________________
1
New training
Start a new workout by selecting exercise "Add new exercise".
Title: [Textbox]
Exercise: [ DropdownSelectbox ] Add new exercise <--- Link
(Selecting an exercise and click "Add new exercise")
___________________________
2
comment: Then a 2xinput type=text is created and the value of the exercise is "echo"
New training
Start a new workout by clicking on "Add new exercise".
Title: [Textbox]
Exercise: [ DropdownSelectbox ] Add new exercise <--- Link
Bench pres
Set #1 <--- Counter
[textbox]kg [textbox]reps Remove set <--- link
Add new set <--- Link
(Fill in textboxes)
____________________________
3
New training
Start a new workout by clicking on "Add new exercise".
Title: [Textbox]
Exercise: [ DropdownSelectbox ] Add new exercise <--- Link
Bench pres
Set #1 <--- Counter
[100]Kg [10]Reps Remove set <--- link
Add new set <--- Link
(click "Add new set")
____________________________
4
New training
Start a new workout by clicking on "Add new exercise".
Title: [Textbox]
Exercise: [ DropdownSelectbox ] Add new exercise <--- Link
Bench pres
Set #1 <--- Counter
[100]Kg [10]Reps Remove set <--- link
Set #2
[120]Kg [5]Reps Remove set <--- link
Add new set <--- Link
(Fill in set #2 and selecting new exercise and click "Add new exercise")
_____________________________
5
New training
Start a new workout by clicking on "Add new exercise".
Title: [Textbox]
Exercise: [ DropdownSelectbox ] Add new exercise <--- Link
Bench pres
Set #1 <--- Counter
[100]Kg [10]Reps Remove set <--- link
Add new set <--- Link
Set #2
[120]Kg [5]Reps Remove set <--- link
Add new set <--- Link
Deadlift
Set #1
[textbox]Kg [textbox]Reps Remove set <--- link
Add new set <--- Link
(Fill in Set #1 and clik "Submit training")
____________________________
<snipped url>
JAVASCRIPT
<script type="text/javascript">
// Add exercise
var count = 0;$(function addset(){
$('a#add_exercise').click(function(){
count += 1;
var w = document.test.select_exercise.selectedIndex;
var selected_text = document.test.select_exercise.options[w].text;
$('div#exerciseadd').append(
'<br /><b>' + document.write(selected_text) + '</b><br /><strong>Set #' + count + '</strong><br />'
+ '<input id="kg_' + count + '" name="kgs[]' + '" size="2" type="text" /><b>Kg</b> <input id="rep_' + count + '" name="reps[]' + '" size="1" type="text" /><b>Reps</b> <input id="set_' + count + '" name="sets[]' + '" type="hidden" />' );
});
});
</script>
HTML:
<form name="test" method="post" action="">
<br />
<b>Title:</b> <input type="text" id="add_title" size="50" />
<br />
<br />
<b>Exercise:</b>
<select id="select_exercise" name="select_exercise">
<option selected="selected">- Select Exercise -</option>
<optgroup label="Powerlifting">
<option>Squat</option>
<option>Bench press</option>
<option>Deadlift</option>
</optgroup>
<optgroup label="Weightlifting">
<option>Clean And Jerk</option>
<option>Snatch</option>
</optgroup>
<optgroup label="Bodyweight exercises">
<option>Dip</option>
<option>Push-up</option>
<option>Pull up</option>
<option>Chin-up</option>
<option>Crunch</option>
<option>Sit-up</option>
<option>Russian twist</option>
<option>Sissy squat</option>
</optgroup>
</select> <a href="#" id="add_exercise">Add New Exercise</a>
<br />
<br />
<div id="exerciseadd">
</div>
<div id="exerciseset">
</div>
<br />
<input type="button" id="add_set" value="Add New Set To Exercise" />
<br />
<br />
<b>Comment:</b>
<br />
<textarea id="add_comment" name="add_comment" rows="5" cols="90"></textarea><br /><br />
<center>
<input id="go" name="btnSubmit" type="submit" value="Submit Training" class="btn" />
<input type="reset" value=" Clear All " />
</center>
</form>
Whats happend when i clik add new exercise its opens a new page showing just the value of the selectbox :(
if i comment out the catch value it only adds new set and counting doesnt reset when adding new exercise.
Regards
Walgermo
[edited by: whoisgregg at 1:58 pm (utc) on Oct. 1, 2009]
[edit reason] Fixed sidescroll. :) [/edit]
Are there any error messages? If you haven't already, I'd recommend using the Firebug plug-in with Firefox to get more debugging information.
One thing I do notice is the use of "document.write" inside of one of your jquery functions... You should avoid document.write as it doesn't play well with the DOM. That line could be changed to:
'<br /><b>' + selected_text + '</b><br /><strong>Set #' + count + '</strong><br />'
I got someone in my wep-app class to fix this for me.
Works very well now!
can add text inputs and remove. and remove whole exercise "categories".
everything is dynamic now, just need to create tables and add the right insert code and i am finished with this function to my site.
