CODEWITHSUNDEEP
javascriptphphtml
Jan Nordgreen
Jan Nordgreen

Reputation: 55

Two forms on the same page needs the value of the same element

I have two forms on a php page. They post to different pages when they are submitted. Both forms need the value of a dropbox that is inside form A. How do I get this value posted when form B is submitted?

Upvotes: 0

Views: 101

Answers (2)

Hüseyin BABAL
Hüseyin BABAL

Reputation: 15550

You can copy dropbox value to Form B while submitting;

On formB;

<form onsubmit="getDropdownValue()">
.....
</form>

And in function;

function getDropdownValue() {
    var formB = document.getElementById("formB");

    // Get selected value from FormA
    var e = document.getElementById("formADropdown");
    var value = e.options[e.selectedIndex].value;

    // Append it to formB
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "dropdownValue";
    formB.appendChild(input);   
}

You can see demo: Demo . I demo when you click submit, you will see dropdownvalue from form A will be copied to formB before submit

Upvotes: 1

Adam
Adam

Reputation: 6733

Create a hidden input in form B and put a change event on the dropdown in form A which copies it's value to that.

Example (using jQuery - if you want to do it with another library or plain javascript you'll need to adapt it).

<script type="text/javascript">
$(function(){
    $('#copy-src').change(function(){
        $('#copy-target').val( $(this).val() );
    }).change();
});
</script>

<form id="a" action="/a">
    <input type="text" name="a_only" />
    <select id="copy-src" name="also_b">
        <option value=""></option>
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
    <button type="submit">Submit</button>
</form>

<form id="b" action="/b">
    <input type="text" name="b_only" />
    <input type="hidden" name="also_a" id="copy-target" />
    <button type="submit">Submit</button>
</form>

The .change(function(){}) creates a change event to copy the value while the final .change() triggers that event (on page load) to ensure the value is right initially.

Upvotes: 1

Related Questions