asked on

Some Forms Problems.

HI All,
I'm facing 2 problems and I wish if anyone one can help.
I designed forms for writing a question (by using PHP+MYSQL). Each form is used to write a specific type of questions (5 types are available).
1- The form that is used to write a multiple-choice question contains the question itself and the answer choices, the form will only display 4 choices BUT I want to give the user the ability to add more choices by clicking on a button (for example) so how this can be done??

2- One of the forms will be used to write a matching question!! Does anyone has any ideas on how this thing can be implemented or even designed??

Your responses will be really appreciated,
Lina

andriv

Don't understand exactly what you are asking but:

1) You can have a radio butoon text field pairs and name them other1, other2 ...

2) You will need a text field for the question and if you are going to give the ability to add the option you'll will need text boxes for each.

andriv

You can also ask the question, "How many more choices do you wish to add" then when they submit you can create the text boxes dynamically using associative array:

How Many More Choices do you wish to add <input type=text size=2 maxlength=2 name="numb">

<input type=submit value="add more">

The script will then have:

for($i=1; $i <= $numb; $i++)
{
print('Option $i: <input type=text name="option[$i]"><br>'\n);
}

To pull the options use the foreach

foreach($option as $key => $value)
{
print('Option $key was $value<br>');
}

dkjariwala

First thing can be done better using Javascript.

I dont understand your second requirement.

Please elaborate.

JD

lina2401

ASKER

Hi advin, its nice to see you again :))
That script worked as expected BUT my only problem now is that I can't let those 3 buttons work properly in one form.
The buttons I'm talking about are: Preview Question, Add More Choices, & Submit (which will store the question in the database).
Each button has to do a specific thing and I don't know how this can be handled in one form!!

lina2401

ASKER

JD,
I guess I better put the second question this in another place different from this!!
what do u think?

dkjariwala

foreach($option as $key => $value)
{
print('Option $key was $value<br>');
}

This wont print value of $key and $value but would print literal string $key and $value. It should be,

print("Option $key was $value<br>");

JD

andriv

Lina, if run the script then view the source, copy it and paste it, I will see why it's not working. It's most probably because you are using the submit button foreach with one form tag so the same variable/value pairs are getting sent to the same script. By looking at the code I can give you javascript code or other method to make it work for you.

As far as posting a new question do what you feel is right but if you do change it copy the link to the new question and post it here so I know to look elsewhere.

lina2401

ASKER

As u used its a form problem becasue I'm using 3 submit buttons in 1 form which always transfers me to the URL in ACTION.
Here is my form:
<html>

<head>

<title>Write a Question</title>

</head>

<body>

<FORM METHOD= POST ACTION= "adds.php">

Question

<BR>

<TEXTAREA NAME="Content" COLS="50" ROWS="3">

</TEXTAREA>

<BR>

<BR>

Answer Choices (Select the correct answer)

<BR>

<INPUT NAME="Correct_Answer" TYPE="RADIO" VALUE="0">

<INPUT NAME="Choice0" TYPE="TEXT" SIZE="50">

<BR>

<INPUT NAME="Correct_Answer" TYPE="RADIO" VALUE="1">

<INPUT NAME="Choice1" TYPE="TEXT" SIZE="50">

<BR>

<INPUT NAME="Correct_Answer" TYPE="RADIO" VALUE="2">

<INPUT NAME="Choice2" TYPE="TEXT" SIZE="50">

<BR>

<INPUT NAME="Correct_Answer" TYPE="RADIO" VALUE="3">

<INPUT NAME="Choice3" TYPE="TEXT" SIZE="50">

<BR>

How many more choices do you wish to add

<BR>

<INPUT TYPE="TEXT"SIZE=2 MAXLENGTH=2 NAME="Numb">

<INPUT TYPE="SUBMIT" NAME="Add" VALUE="ADD">

<BR>

<BR>

Image (Optional)

<BR>

<input type="file" name="form_data" size="52">

<BR>

<BR>

Difficulty Level   

<SELECT NAME="Difficulty_Level">

<OPTION>1</OPTION>

<OPTION>2</OPTION>

<OPTION>3</OPTION>

</SELECT>

<BR>

<BR>

<INPUT NAME="Private" TYPE="CHECKBOX" VALUE="Y" CHECKED>

Restricted Question (Restricted question can not be used in quick tests)

<BR><BR>

<INPUT TYPE="SUBMIT" NAME="preview" VALUE="Preview Question">

<BR>

<BR>

<INPUT TYPE="RESET" NAME="reset" VALUE="CLEAR">  

<INPUT TYPE="SUBMIT" NAME="submit" VALUE="DONE">

</FORM>

</body>

</html>

One more thing when the user wants to edit the question (after previewing it) the value that have been entered should show up again how this can be done for those types of inputs : File, Checklist, Checkbox?

Thanks for ur help.

andriv

There is a couple ways to have it execute the script you want. One way to use seperate forms surrounding the values you want to send with the appropriate form tags. However, they cannot overlap or it will cause problmes. The way I handled it was to put all the scripts with the same .php file and added a hidden field without a value, the value was set with javascript using the onClick handler. Or you can have seperate .php files and submit to another .php files that will check for a condition and include the .php file that needs to be executed.

I will explain the later method. First add the javascript to your form:

1) somewhere before the first submit button add:
<input type=hidden name=action value="">

3) add 'name' attribute to form tag:

<FORM NAME="myform" METHOD= POST ACTION= "adds.php">

2) Change the submit type for the first two button to type=button (because NS doesn't support onClick on the type=submit) plus add an onClick event assigning value to the hidden field and to submit form.

<INPUT TYPE="BUTTON" NAME="Add" VALUE="ADD" onClick="document.myform.action.value='add'; document.myform.submit();">

<INPUT TYPE="BUTTON" NAME="preview" VALUE="Preview Question" onClick="document.myform.action.value='preview'; document.myform.submit();">

3) Add the Submit to the form tag that does the same thing as the onClick but only activated if the last SUBMIT button is clicked.

<FORM NAME="myform" METHOD= POST ACTION= "adds.php"
onSubmit="document.myform.action.value='done'">

4) Create a new php file and set the action to the above form tag to point to that new php file. That file will look like what follows:

<?
if($action == 'add')
{
include("add.php");
}
elseif($action == 'preview')
{
include("preview.php");
}
elseif($action == 'done')
{
include("final.php");
}

//Sub the file names above with the correct files
?>

Also make sure that everything in those files are within the PHP tags.

To display the provided information to the form when displaying use the value attribute in the input tag with the PHP variable:

<input type="text name="myname" value="<? print("$myname") ?>">

Checkboxes, radio, and selects are different

Select Box:

<select name="myselect>
<option value="<? print($myselect) ?>"><? print($myselect) ?></option>
<option value="one">one</option>
...
</select>

Checkbox:

<input type=checkbox name=mycheckbox value= <? (!$mycheckbox)? print(""): print("checked"); ?>>

If you really like PHP and want to learn it well you should take a look at www.getontheworldwideweb.com. It is worth the money. I have taken several course with them plus I am one of the instructors.

lina2401

ASKER

This sounds dummy "I know"!!
How can I add javascript to the form??and what does this mean "document.myform.action.value='add'; document.myform.submit();"??

andriv

No it's not a dumb question. People are not born with all these languages, in fact we can't even speak english when we are born.

There is no need to add any further javascript to the page. The syntax that you see document.my... is the javascript. When I first started writing I was going to add the <script> tags to put javascript but I decided on a different method and forgot to remove that sentence.

document.myform.action.value = 'add' is javascript hierarchy to set the value for the hidden field named 'action'. If you look at the code I had you create a hidden field without a value:

<input type=hidden name=action value="">

The code will give the hidden field a value when you onClick of the button:

onClick="document.myform.action.value ='add'

Here the break down of that line:

onClick of the button go to the 'document' find the form named 'myform' then find the element named 'action' and give it the 'value' of 'add'. This way the value of that variable 'action' will depend on which button they clicked. Then when it's sent to the next script you can determin which button was selected by checking the value of 'action' and run the appropriate script on the result:

If the selected 'add' then action will equal 'add' and you can call that script to be executed, if not and they selected 'preview' then you can run the script to preview the question and so on.

Andy

lina2401

ASKER

I tried the following:
<html>
<head>
<title>Write a Question</title>
</head>

<body>
<FORM NAME= "MCQForm" METHOD= POST ACTION= "ProcessForm.php" onSubmit="document.MCQForm.action.value='submit'">
Question
<BR>
<TEXTAREA NAME="Content" COLS="50" ROWS="3">
</TEXTAREA>
<BR>
<BR>
Answer Choices (Select the correct answer)
<BR>
<?
for ($j=0; $j<4; $j++)
{
?>
<INPUT NAME="Correct_Answer" TYPE="RADIO" VALUE="<? echo $j; ?>">
<INPUT NAME="Choice[]" TYPE="TEXT" SIZE="50"> <BR>
<?
}
?>
<INPUT TYPE="HIDDEN" NAME="action" VALUE="">
How many more choices do you wish to add
<BR>
<INPUT TYPE="TEXT"SIZE=2 MAXLENGTH=2 NAME="Numb">
<INPUT TYPE="BUTTON" NAME="Add" VALUE="ADD" onClick="document.MCQForm.action.value='add';document.MCQForm.submit();">
<BR>
<BR>
Image (Optional)
<BR>
<input type="file" name="form_data" size="50">
<BR>
<BR>
Difficulty Level   
<SELECT NAME="Difficulty_Level">
<OPTION>1</OPTION>
<OPTION VALUE="2" SELECTED>2</OPTION>
<OPTION>3</OPTION>
</SELECT>
<BR>
<BR>
<INPUT NAME="Private" TYPE="CHECKBOX" VALUE="Y" CHECKED>
Restrict Question (Restricted question can not be used in quick tests)
<BR><BR>
<INPUT TYPE="BUTTON" NAME="preview" VALUE="Preview Question" OnClick="document.MCQForm.action.value='preview';document.MCQForm.submit();">
<BR>
<BR>
<INPUT TYPE="RESET" NAME="reset" VALUE="CLEAR">  
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="DONE">
</FORM>
</body>
</html>

I got this error whenever I tried to click on the add and preview buttons(object doesn't support this property or method)!!
btw the submit button is working perfectly.
SO what's wrong with the code above??

andriv

What line number was the error?

lina2401

ASKER

Line 28: <INPUT TYPE="TEXT"SIZE=2 MAXLENGTH=2 NAME="Numb">

Line 47: <BR><BR>

The lines above the buttons.

ASKER CERTIFIED SOLUTION

andriv

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lina2401

ASKER

Awesome Its working!!
Thanks Andy.

andriv

No problem