CODEWITHSUNDEEP
phpjqueryhtml
mixkat
mixkat

Reputation: 3785

PHP forms and same names

Hi I have a page that contains several different forms all of which are shown/hidden on the press of the appropriate button.

Now all of them need to include some fields that are retrieved by php from the database but the problem is that my jquery code then fails to hide the fields that are declared later on.

Heres an example of my code:

<form action="controlPanel.php" method="post">
    <input class="inputFields" type="text" name="fileName" />
    <input class="inputFields" type="text" name="fname" />
    <select class="styled-select" id="nameDropdown" name='nameDropdown'>
    <option value="0"><span class="formatFreeTxt">Choose a name</span></option>
    <?php
        foreach ($GLOBALS['myDB']->getList('2') as $i) {
            echo "<option value='" . $i['email'] . "'>" . $i['fname'] . " " . $i['lname'] . "</option>";
         }
    ?>
    </select>
    <input class="inputFields" type="submit" name="textForm" />
</form>

And then I have another form on the div under the above. Like that:

<form action="controlPanel.php" method="post">
    <input class="inputFields" type="text" name="textName" />
    <input class="inputFields" type="text" name="lname" />
    <select class="styled-select" id="nameDropdown" name='nameDropdown'>
    <option value="0"><span class="formatFreeTxt">Choose a name</span></option>
    <?php
        foreach ($GLOBALS['myDB']->getList('2') as $i) {
            echo "<option value='" . $i['email'] . "'>" . $i['fname'] . " " . $i['lname'] . "</option>";
         }
    ?>
    </select>
    <input class="inputFields" type="submit" name="nextTxtForm" />
</form>

My JQuery code is:

function showHideBenef()
 {
       if($('#nameDropdown').is(':visible'))
       {
          $('#nameDropdown').fadeOut();
          $('#nameTable').fadeIn();
          $('#toggleButton').attr('value', 'Choose from existing ones');
          $('#chooseTxt').html('New Beneficiary Form');

       }
       else
       {
           $('#nameDropdown').fadeIn();
           $('#nameTable').fadeOut();
           $('#toggleButton').attr('value', 'OR Add a new one');
       }

  }

Is there any way to make this work without changing the names of each field so that I can actually catch the different posts without the need for checking all the different field names?

Upvotes: 0

Views: 154

Answers (6)

mixkat
mixkat

Reputation: 3785

Ok its probably not the optimal solution but I ended up wrapping everything in a div element and then I use JQuery to hide the whole div...That way I can keep having duplicate names in different forms and jquery works fine as long as you give the divs a different id..

Thank you all for your answers!

Upvotes: 0

JMM
JMM

Reputation: 26797

Get rid of all duplicate id attribute values, and then you can use the name attribute values:

function showHideBenef () {

  var nameDropdown = $( '[name="nameDropdown"]' );

  if ( nameDropdown.is( ':visible' ) ) {

    nameDropdown.fadeOut();

    // Not sure what the following elements are, might need to use
    // `name` attr or classes to select them.

    $( '#nameTable' ).fadeIn();

    $( '#toggleButton' ).attr( 'value', 'Choose from existing ones' );

    $( '#chooseTxt' ).html('New Beneficiary Form');

  }


  else {

    nameDropdown.fadeIn();

    $( '#nameTable' ).fadeOut();

    $( '#toggleButton' ).attr( 'value', 'OR Add a new one' );

  }

}
// showHideBenef

Upvotes: 1

johntayl
johntayl

Reputation: 140

You can give each input an ID attribute and use jQuery to hide/show based on the ID.

Use a prefix for the IDs so you can distinguish between the inputs such as id="textFormFileName" and id="nextTxtFormFileName"

Upvotes: 0

hackerone
hackerone

Reputation: 315

the issue here is you have multiple input elements with same id & name which is not good.

why not have them as array?

so elements in form1 would be

<input type="text" name="firstform[fname]" id="firstform_fname"/>

and the elements in form2 would be 

<input type="text" name="secondform[fname]" id="secondform_fname"/>

in the php script, you can get the values of the forms from $_POST['firstform'] and $_POST['secondform']

Upvotes: 1

Abid Hussain
Abid Hussain

Reputation: 7762

i think set id attribute

like this

<form action="controlPanel.php" method="post"  id="form1">

or 

<form action="controlPanel.php" method="post" id="form2">

Upvotes: 0

user1350140
user1350140

Reputation:

Just give each form a unique id attribute.

Upvotes: 0

Related Questions