2 form fields conflicting with each other

HTML & CSS
1

Hi guys got a problem with two separate form fields.
one is a search field and the other is a donation form which users can give the amount of the donation.
now the search field is working properly without any problem. but the donation form has some issues which i have not found a fix for.

the problem is when ever u press the donate button it does noting now i have checked this with the firefox console and it seems the donation button is interfering with the search field. So when i have typed in something in the first form which is the search form field and pressing the donate button in the donation form the search form is getting its results. Now i have narrowed the problem down to which lines of the two form are conflicting with each other and those lines are if i am correct here:

[code]

[/code]

Hope you guys understand my problem.

[code]

Amount:

$ 

</html[/code]

is there anyway to fix please let me know.

thanks in advance

2

Seems you mistakingly have a div tag instead of a form tag, so there is only the “donate” form working. Try change to form tags:

<form id="formy" name="search_form" method="get" action="#"> ... </form>

1 Like
3

Well in a way the donation submit button is still interfering with
the above search form even when changing the div to its proper form tag.

4

You are missing the closing </div> on <div id="searchbox"> and <div id="formy">

Or with Erik’s recommendation, using form tags.

<body>
    <div id="searchbox">
        <form id="formy" name="search_form" method="get" action="">
            <input id="search" name="search" class="searchinput" placeholder="Search..." type="text">
            <div id="search_buttons_container">
                <button type="submit" id="searchbutton"></button>
            </div>
        </form><!--close here-->
    </div><!--close here-->
    <div class="donate">
        <form action="idealcheckout/checkout.php" method="post">
            <fieldset style="border: 0px none;">
                <div id="wrapper">
                    <h2><span class="teg4">Amount:</span></h2>
                    <p><label class="label">$&#8192;</label><input name="amount" value="" type="text"></p>
                    <p><input class="donationbutton" name="submit" value="donate »" type="submit"></p>
                </div>
            </fieldset>
        </form>
    </div>
</body>
1 Like
5

problem is still there even with those changes made to the code

6

the code is on codepen:

tried any possible way to fix this with in the form code it self but
none of them have worked so far.

tried the two forms in separate pages and they work without interfering
with each other, but when placing them on the same page the donate
button seems to interfere with the search field of the first form.

to understand the problem try putting New York in the first search field
and then press the donate button it will get the times of that
location. Now the donate button when pressed should take visitors to
this page mysite.com/idealcheckout/checkout.php

any ideas or solution would be great,

7

I’m guessing the problem lies somewhere else within the page

I took the code from my last post and uploaded it to my site. Then changed checkout.php with one of my sites php files. When pressing the donate button it directed to my php file just fine.

Were probably going to need a link to your live working page to debug this any further.

Make sure you validate your code

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.