Assistance With A Form

[bigkga]

Help please

 

I am doing a form where I want the user to select an option in a table row and if a particular option is selected a second box appears beside the first drop down box where they can type in a answer

 

What I have done so far is as follows

 

<tr><td>How did you find us?</td><td><select size="1" name="Found_by">

  <option value="Newspaper">Newspaper</option>

  <option value="Search Engine">Search Engine</option>

  <option value="Flyer">Flyer</option>

  <option value="Friend">Friend</option> 

 

It is the friend line that I want a second input line to show up for. I do not want a second box showing up for any of the other lines. Whatever the user inputs needs to be sent to me in an email. At this stage i can have the email showing flyer or friend etc but cannot get details of the referral

 

Any help would be greatly appreciated

[ronnie88]

think this is a javascript or ajax question.. I think

[ainoy31]

This article will point you in the right direction: http://www.codingforums.com/archive/index.php?t-109758.html

 

[bigkga]

So what do i need to do to make the friend line show a box that comes and go based on that article?  Is someone able to help me make the changes so that it refers to my friend line?  I assume that this works within a table?

 

 

function checkProbSelect(probSelect) {

document.getElementById("otherProblemText").disabled = (probSelect.value == "Other") ? false : true;

}

...

<option value="Other" <c:if test="${status.value == 'Other'}"> selected="true"</c:if> id="otherSelect">Other</option>

</select>

<select name="${status.expression}" class="select_long" id="helpFormProblemType" onchange="checkProbSelect(this);"> 

 

Do i need this line that was also in the article

textarea name="otherProblemText" id="otherProblemText" class="textarea_longest_half" disabled="true">${status.value}</textarea>

[ainoy31]

no.  in your case you would use <input type="text" ...etc.  This article gives you what you need.  you need to configure it to your need.

[bigkga]

I am sorry but I am reasonably new to this and have tried doing what the article says but think I am getting it wrong Friend doesnt show as an option but selected="true" id="friendSelect">Friend shows in my first drop down box.

 

Also the second box is there all the time and only 1 space wide. I need to make the second box wider and also have it appear only when friend is selected

[bigkga]

This is what i have done with my coding

 

<table>

function checkFriendSelect(friendSelect) {

document.getElementById("friendText").disabled = (friendSelect.value == "Friend") ? false : true;

}

 

....

....

....

<tr><td>How did you find us?</td><td><select size="1" name="Found_by">

  <option value="Newspaper">Newspaper</option>

  <option value="Search Engine">Search Engine</option>

  <option value="Flyer">Flyer</option>

  <option value="Magazine">Magazine</option>

  <option value="Friend"<c:if test=${status.value == =='Friend'}"> selected="true" </c:if> id="friendSelect">Friend</option>

  </select>

  <select name="${status.expression}"class="select_long"id=""friendText"

  onchange="checkFriendSelect(this);">

 

 

What is wrong with that?

 

Also was thinking I might need this to make my second box work

  <div class="hidden" id="Friend"> <input type="text" name="Referred_by_Friend" size="20"/></div>

 

[ainoy31]

OK.  I will get back to you on this later this evening.

[bigkga]

Thanks really appreciate. I am trying to figure it out but struggling.

 

This piece also appears on my website now at the top of the table

 

function checkFriendSelect(friendSelect) {

document.getElementById("friendText").disabled = (friendSelect.value == "Friend") ? false : true;

}

[ainoy31]

As promised.  This should do the trick.

 

<script language="JavaScript">
function toggle(chosen)
{
if(chosen == 'Friend')
{
	document.form1.friendName.style.visibility = 'visible';
}
else
{
	document.form1.friendName.style.visibility = 'hidden';
        document.form1.friendName.value='';
}
}

function clearText(field)
{
if(field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;	
}

</script>
<form name="form1" action="" method="post">
How did you find us?
<select name="Found_by" onchange="toggle( document.form1.Found_by.options[ document.form1.Found_by.selectedIndex ].value );" class="{validate:{required:true}}">
    <option value="">-Select One-</option>
    <option value="Newspaper">Newspaper</option>
    <option value="Search Engine">Search Engine</option>
    <option value="Flyer">Flyer</option>
    <option value="Friend">Friend</option>
</select>
<input type="text" name="friendName" value="Please enter friend's name" size="40" style="visibility:hidden" onFocus="clearText(this);" onBlur="clearText(this);" >
</form>

 

Let me know if this is not what you wanted.

[bigkga]

Thanks. It looks good but the second box does not come up.

 

Do I put the whole lot in the middle of table or are there different areas each part should go?  I guess I should have said I have a table which has a number of questions but this one line is in the middle of the table

[bigkga]

Here is the full extent of what I am wanting to do. When the person submits this an email is generated by what they put the in boxes for us

 

<table>

          <tr><td>Your Name </td><td><input type="text"  name="Name" /></td></tr>

            <tr><td>Email Address</td><td><input type="text"  name="Email" /></td></tr>                   

            <tr><td>First Time Here?</td><td><select size="1" name="First">

<option value="No">No</option>

<option value="Yes">Yes</option>

</select></td></tr>

    <tr><td>How did you find us?</td><td><select size="1" name="Found_by">

<option value="Newspaper">Newspaper</option>

            <option value="Search Engine">Search Engine</option>

<option value="Flyer">Flyer</option>

<option value="Magazine">Magazine</option>

<option value="Client">Current Client</option> 

<option value="Manager">Property Manager</option> 

</select></td></tr>

 

 

Or am I trying to do too much with my table and adding additional boxes dependent upon an answer

[ainoy31]

what's the second box for and where is it suppose to be located?

[ainoy31]

If you select friend, I second input box comes up.  You are telling me it does not.

[bigkga]

On my website it didnt

 

This is how I seen it happening

 

They select friend and then next to it another box shows where they put the name of the friend

[ainoy31]

Did you cut and paste my code?  It works as you wanted.

[bigkga]

Yes I did but it does not show the box on my site. It has a white background if that has any impact

[ainoy31]

what's your site's address?

[bigkga]

Ok, I have changed things around now and this is what I have done. Now my question is that I have the friend one working but cannot get a repeat with another question which has another question and has a second box that needs to come up. How do i achieve this.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/html4/loose.dtd">

 

<html>

 

<head>

  <title></title>

<script language="JavaScript" type="text/javascript">

<!--

 

function SelectCng(sel,id){

document.getElementById(id).style.display=sel.selectedIndex==3?'':'none';

}

//-->

</script></head>

 

<body>

<form>

<table border="1">

<tr>

  <td>Your Name </td><td><input type="text" name="Name" /></td></tr>

<tr>

  <td>Email Address</td><td><input type="text" name="Email" /></td></tr>

<tr>

  <td>First Time Here?</td><td><select size="1" name="First">

  <option value="No">No</option>

  <option value="Yes">Yes</option>

  </select>

  </td>

</tr>

<tr>

  <td>

  How did you find us?

  </td>

  <td>

  <select size="1" name="Found_by" onchange="SelectCng(this,'Friend');" >

  <option value="Newspaper">Newspaper</option>

  <option value="Search Engine">Search Engine</option>

  <option value="Flyer">Flyer</option>

  <option value="Friend">Friend</option>

  </select>

  </td>

  </tr>

<tr id="Friend" style="display:none;" >

  <td>

  Friends Name

  </td>

  <td>

  <input name="FriendName">

  </td>

</tr>

</form>

</table>

 

</body>

 

</html>