Question

i am having trouble.

i write HTML and jQuery and set same name attribute in <select> tag and <input> tag.

<select name="questionBoxOne" id="questionBoxOne">
  <option selected="selected" value="">Choose a question</option>
  <option value="">---------------</option>
  <option value="custom">Create your own question</option>
  <option value="">---------------</option>
  <option value="My mother's maiden name?">My mother's maiden name?</option>
  <option value="The name of my first pet?">The name of my first pet?</option>
  <option value="My father's middle name?">My father's middle name?</option>
</select>

I use this area to show input box, if user select Custom Question option.

<div id="newQuestion">
  <input type="text" value="" id="questionBoxOne" name="questionBoxOne" />
  <a id="cancel">select question</a>
</div>

And i use jQuery codes.

 <script language="javascript">
        $(function() {
            $('#newQuestion').hide();

            $('#questionBoxOne').change(function() {
                if ($(this).val() === 'custom') {
                    $('#newQuestion').show();
                    $('#questionBoxOne').hide();
                }
            });

            $('#cancel').click(function () {
                $('#questionBoxOne').show();
                $('#newQuestion').hide();
            });
 </script>

as you can see in my earlier codes i am sending same name to my next finish.php file, but when i am trying this it isn’t showing <select> option question but this codes show custion question.

please help how i resolve this issue.

Answer 1

Ok so I think I understand. You want to disable the name your not using at the time so here is some code

 <script language="javascript">
    $(function() {
        $('#newQuestion').hide();
        $('#newQuestion input').removeAttr('name');
        $('#questionBoxOne').change(function() {
            if ($(this).val() === 'custom') {
                $('#newQuestion').show();
                $('#newQuestion input').attr('name','questionBoxOne');
                $('#questionBoxOne').hide();
                $('#questionBoxOne').removeAttr('name');
            }
        });

        $('#cancel').click(function () {
            $('#questionBoxOne').show();
            $('#questionBoxOne').attr('name','questionBoxOne');
            $('#newQuestion input').removeAttr('name');
            $('#newQuestion').hide();
        });
 </script>

that should work

but instead of the first removeattr from the #newQuestion you should remove the name attribute in the html
Yes AND ALSO VERY IMPORTANT GET RID OF THE ID FOR THE INPUT OF NEWQUESTION!!!

However the way in which you should handle this is

<form id="submit" action="finish.php" method="post">
   <select id="questionSelect" name="questionSelect">
         <option selected="selected" value="">Choose a question</option>
         <option value="">---------------</option>
         <option value="custom">Create your own question</option>
         <option value="">---------------</option>
         <option value="My mother's maiden name?">My mother's maiden name?</option>
         <option value="The name of my first pet?">The name of my first pet?</option>
         <option value="My father's middle name?">My father's middle name?</option>
   </select>
  <input type="text" value="" id="custQuestion" name="custQuestion" />
  <a id="cancel">select question</a>

then keep your original jquery functions with the ids changed to the appropriate ones like so

 <script language="javascript">
        $(function() {
            $('#custQuestion').hide();

            $('#questionSelect').change(function() {
                if ($(this).val() === 'custom') {
                    $('#custQuestion').show();
                    $('#questionSelect').hide();
                }
            });

            $('#cancel').click(function () {
                $('#questionSelect').show();
                $('#custQuestion').attr('value','').hide();
            });
 </script>

now on the finish.php you can look for both names returned and use the one depending if custom question is blank or not.

like so

if(!empty($_POST['custQuestion'))
  $question = $_POST['custQuestion'];
else
  $question = $_POST['questionSelect'];

now if that doesn’t help you need to do more research