Question

I’m trying to pass a variable to a hidden form input upon click of a button like so:

        $('#convertToButton').click(function() {
            $("#currencySelectValue").val($("#currencySelect").val());
            $("#currencyValue").val($("#fromCurrencyValue").val());
            $.post("php/convertToForm.php", $("#convertToForm").serialize(), function(data){ 
                $('#toCurrencyValue').val(data);
            });
        });

        $('#convertFromButton').click(function() {
            $("#currencySelectValue").val($("#currencySelect").val());
            $("#btcValueForm").val($("#btcValue").val());
            $.post("php/convertFromForm.php", $("#convertFromForm").serialize(), function(data){ 
                $('#fromCurrencyValue').val(data);
            });
        });

In the first click handler, everything is passed fine. In the second click handler, the form does not show as having had passed #currencySelectValue. The code is the same, so I’m not sure where the problem lies.

Here are the forms:

<form action="php/convertToForm.php" id="convertToForm">
<input type="hidden" value="<?php echo $last; ?>" name="lastPrice" id="lastPrice"/>
<input type="hidden" name="currencySelectValue" id="currencySelectValue"/>
<input type="hidden" name="currencyValue" id="currencyValue"/>
<!-- get values of the currency selector, and the currency value -->
</form>
<form action="php/convertFromForm.php" id="convertFromForm">
<input type="hidden" value="<?php echo $last; ?>" name="lastPrice" id="lastPrice"/>
<input type="hidden" name="currencySelectValue" id="currencySelectValue"/>
<input type="hidden" name="btcValueForm" id="btcValueForm"/>
<!-- get values of the currency selector, and the BTC value -->
</form>

Everything but the #currencySelectValue in the convertFromForm is passed fine. Any help?

Answer 1

You should never have multiple elements with the same IDs throughout your document. IDs must be unique to work.

If you want to select copies or similar sections, use classes instead.