2 form fields conflicting with each other

[jadwal]

Hi 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:


<input id="search" name="search" class="searchinput" placeholder="Search..." type="text">

<p><input class="donationbutton" name="submit" value="donate »" type="submit"></p>

Hope you guys understand my problem.



<div id="searchbox">
<div 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>


<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">$ </label><input name="amount" value="" type="text"></p>
<p><input class="donationbutton" name="submit" value="donate »" type="submit"></p>
</div>
</fieldset>
</form>
</div>

</body>
</html

is there anyway to fix please let me know.

thanks in advance

[jscheuer1]

First thing I would try is wrapping the first set of inputs in it's own form tag to prevent it from being confused as being in the form for donation. It will likely have to return false on submit so as not to cause other issues (additions highlighted):


<form onsubmit="return false;">
<div id="searchbox">
<div 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>


<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">$ </label><input name="amount" value="" type="text"></p>
<p><input class="donationbutton" name="submit" value="donate »" type="submit"></p>
</div>
</fieldset>
</form>
</div>

</body>
</html

The page may have to be refreshed and/or the cache emptied to see changes.

It's also possible that this is a javascript issue. If this doesn't fix it, please supply a link to the problem page so we can check it out.

[Beverleyh]

I think it's because of the donate form's submit button also being named "submit" (because you use the submit method when submitting a form so it's creating a naming conflict). Try renaming it to name="donate" or something else.

[jadwal]

Thanks for the replies guys,

tried both of the suggestions you guys mentioned but problem still remains.
the code is on codepen:
http://codepen.io/anon/pen/grVRVL

but like jscheuer1 said this thing is probably a java script issue, 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, Thanks in advance

[jscheuer1]

OK, here's what you do. Give the donate form an id - use "donate":


<form id="donate" action="idealcheckout/checkout.php" method="post">
<fieldset style="border: 0px none;">
<div id="wrapper">
<h2><span class="teg4">Some info</span></h2>
<p><label class="label">€ </label><input name="amount" value="" type="text"></p>
<p><input class="doneerbutton" name="submit" value="DONATE »" type="submit"></p>
</div>
</fieldset>
</form>

Next, in main.js make the two highlighted additions, one near the beginning, one near the end (or just copy and replace it with the following code):


/**
* Created with JetBrains WebStorm.
* User: bilelz
* Date: 17/04/13
* Time: 22:24
* To change this template use File | Settings | File Templates.
*/

var isAutocompleted = false;

$(document).ready(function() {
autocompleteInit();
log("init");
/* search */
$('form').not('#donate').submit(function() {
if(!isAutocompleted){
$("#search").blur();
getLatlngFromCity($("#search").val());
log("typed from input search");
}

isAutocompleted = false; /* reset boolean value */
return false;
});


/* geo localisation */

// script for print geo link when focus in searchbox
// $("#search").focus(function() {
// $("#geo").addClass("show");
// });
// $("#search").blur(function() {
// $("#geo").removeClass("show");
// });

$("#geo").click(function(e) {
$("#geo").removeClass("show");
$("#container").removeClass("blur");

infoGeo("");
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
infoGeo("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
}

function successCallback(position) {

getCityFromCoord(position.coords.latitude, position.coords.longitude);

infoGeo("Géolocalisation réussie :-)");
infoHide();
};

function errorCallback(error) {
// if(getStorage("lastId") != undefined){
// id = getStorage("lastId");
// }else{
// id = "2988507" // Paris;
// }
// getWeatherById(id);

switch(error.code) {
case error.PERMISSION_DENIED:
infoGeo("L'utilisateur n'a pas autorisé l'accès à sa position");
break;
case error.POSITION_UNAVAILABLE:
infoGeo("L'emplacement de l'utilisateur n'a pas pu être déterminé");
break;
case error.TIMEOUT:
infoGeo("Le service n'a pas répondu à temps");
break;
}
};

return false;
});

/* geo localisation */

/* print on not #cityClearSearch button */
$("#search").keyup(function() {
if ($.trim($(this).val()) != "") {
$("#cityClearSearch").removeClass("hide");
} else {
$("#cityClearSearch").addClass("hide");
$(this).val(""); // trim space
}
});

$("#search").on("blur", function (){
$("#search").keyup();
});

$("#search").on("focus", function (){
$("#search").keyup();
});

/* end : print on not #cityClearSearch button */



$("#multiCityList").on("click", "a", function (){
$('#multiCityList').html("").hide();
updateMap($.trim($(this).text()), $(this).attr("lat"), $(this).attr("lng"));
return false;
});

$("#multiCityList").on("click",".removeCityList", function (){
$('#multiCityList').html("").hide();
});

$("*[type=reset]").on("click",function (){
$('#multiCityList').html("").hide();
});
});
function autocompleteInit() {


var map;
var geocoder;
var input = document.getElementById('search');
var options = {
types : ['(cities)']
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
try {

var placeLat = getLatFromStr(autocomplete.getPlace().geometry.location.toString());
var placeLng = getLngFromStr(autocomplete.getPlace().geometry.location.toString());
updateMap($("#search").val(), placeLat, placeLng)
$("#search").val("").blur();
$('#multiCityList').html("").hide();
log("autocomplete");
isAutocompleted = true;
} catch(e) {
isAutocompleted = false;
$('form').not('#donate').submit();
log("catch maps autocomplete");
log(e);
}
});

google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13) {
if (e.preventDefault) {
e.preventDefault();
} else {
/* nothing */
}
}
});
}

function updateMap(city, lat, lng){
var time = (new Date()).getTime() / 1000;
$.getJSON("https://maps.googleapis.com/maps/api/timezone/json?location=" + lat + "," + lng + "&timestamp=" + time + "&key=AIzaSyDwT3bR4WudkP-kZ3rr172YpdKPGZpuB8Q", function (data) {
var tzinfo = data;
var offsethours = tzinfo.rawOffset / 3600;
if (tzinfo.dstOffset == 0) isdst = 0; else isdst = 1;
getPrayerTimings(lat, lng, offsethours, isdst)
});

localStorage.setItem("city", city);
localStorage.setItem("latitude", lat);
localStorage.setItem("longitude", lng);

var tmpl = $("#map-tmpl").html();
var html = Mustache.render(tmpl, {city:city, lat:lat, lng:lng});
$("#map-html").html("").append(html);
}

The page may need to be refreshed and/or the browser cache emptied to see changes.

[jadwal]

Just tried with the new code. and problem is still there unfortunately. it seems even adding different submit buttons alone and not in a form they still interfere with the first search field.
my code looks like a mess if i have to say so. Hopefully there is a solution for this because right now I can't put this on a live website this will conflict with a bunch more of submit buttons and forms.

one more thing to mention i don't know if this will add anything to the solution, is when removing these two java scripts donate button is working without any problems.

<script src="https://www.googledrive.com/host/0B6erKxlMnhFDYktyaHhtUFUzUGs?utils.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDcTd5SjZCbzV6M2s?utils-geo.js"></script>

[jscheuer1]

Well it worked fine here. But I do see a potential issue with other submit buttons on other pages - that's not something you mentioned before. And I agree that the code is a mess. One thing that might work in our favor is that the search form is not a form. It may have once been - which would be good for us, or it might be being transformed into one by javascript - that would make things trickier. In any case, looks like it's simply not a form, so I'm thinking we can remove both references to it as being a form from main.js. Try this version of main.js:


/**
* Created with JetBrains WebStorm.
* User: bilelz
* Date: 17/04/13
* Time: 22:24
* To change this template use File | Settings | File Templates.
*/

var isAutocompleted = false;

$(document).ready(function() {
autocompleteInit();
log("init");
/* search */
/* $('form').not('#donate').submit(function() {
if(!isAutocompleted){
$("#search").blur();
getLatlngFromCity($("#search").val());
log("typed from input search");
}

isAutocompleted = false; */ /* reset boolean value */
/* return false;
}); */


/* geo localisation */

// script for print geo link when focus in searchbox
// $("#search").focus(function() {
// $("#geo").addClass("show");
// });
// $("#search").blur(function() {
// $("#geo").removeClass("show");
// });

$("#geo").click(function(e) {
$("#geo").removeClass("show");
$("#container").removeClass("blur");

infoGeo("");
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
infoGeo("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
}

function successCallback(position) {

getCityFromCoord(position.coords.latitude, position.coords.longitude);

infoGeo("Géolocalisation réussie :-)");
infoHide();
};

function errorCallback(error) {
// if(getStorage("lastId") != undefined){
// id = getStorage("lastId");
// }else{
// id = "2988507" // Paris;
// }
// getWeatherById(id);

switch(error.code) {
case error.PERMISSION_DENIED:
infoGeo("L'utilisateur n'a pas autorisé l'accès à sa position");
break;
case error.POSITION_UNAVAILABLE:
infoGeo("L'emplacement de l'utilisateur n'a pas pu être déterminé");
break;
case error.TIMEOUT:
infoGeo("Le service n'a pas répondu à temps");
break;
}
};

return false;
});

/* geo localisation */

/* print on not #cityClearSearch button */
$("#search").keyup(function() {
if ($.trim($(this).val()) != "") {
$("#cityClearSearch").removeClass("hide");
} else {
$("#cityClearSearch").addClass("hide");
$(this).val(""); // trim space
}
});

$("#search").on("blur", function (){
$("#search").keyup();
});

$("#search").on("focus", function (){
$("#search").keyup();
});

/* end : print on not #cityClearSearch button */



$("#multiCityList").on("click", "a", function (){
$('#multiCityList').html("").hide();
updateMap($.trim($(this).text()), $(this).attr("lat"), $(this).attr("lng"));
return false;
});

$("#multiCityList").on("click",".removeCityList", function (){
$('#multiCityList').html("").hide();
});

$("*[type=reset]").on("click",function (){
$('#multiCityList').html("").hide();
});
});
function autocompleteInit() {


var map;
var geocoder;
var input = document.getElementById('search');
var options = {
types : ['(cities)']
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
try {

var placeLat = getLatFromStr(autocomplete.getPlace().geometry.location.toString());
var placeLng = getLngFromStr(autocomplete.getPlace().geometry.location.toString());
updateMap($("#search").val(), placeLat, placeLng)
$("#search").val("").blur();
$('#multiCityList').html("").hide();
log("autocomplete");
isAutocompleted = true;
} catch(e) {
/* isAutocompleted = false;
$('form').not('#donate').submit();
log("catch maps autocomplete");
log(e); */
}
});

google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13) {
if (e.preventDefault) {
e.preventDefault();
} else {
/* nothing */
}
}
});
}

function updateMap(city, lat, lng){
var time = (new Date()).getTime() / 1000;
$.getJSON("https://maps.googleapis.com/maps/api/timezone/json?location=" + lat + "," + lng + "&timestamp=" + time + "&key=AIzaSyDwT3bR4WudkP-kZ3rr172YpdKPGZpuB8Q", function (data) {
var tzinfo = data;
var offsethours = tzinfo.rawOffset / 3600;
if (tzinfo.dstOffset == 0) isdst = 0; else isdst = 1;
getPrayerTimings(lat, lng, offsethours, isdst)
});

localStorage.setItem("city", city);
localStorage.setItem("latitude", lat);
localStorage.setItem("longitude", lng);

var tmpl = $("#map-tmpl").html();
var html = Mustache.render(tmpl, {city:city, lat:lat, lng:lng});
$("#map-html").html("").append(html);
}

If you're still having problems, I can put up what I have - it's working here.

Oh, and remember to clear the cache and refresh the page after changing the code.

[jadwal]

Last solution worked got no conflict between submit buttons or forms, but some function of the search field are not working like for instant pressing enter when a location name has been typed, i guess that's because of the form that has been disabled out in the main js. this is not a big deal because visitors still can choose there location in the google maps api drop down menu.
This search field has giving me some hard time from the beginning. First problem i had was whenever someone pressed enter when searching for a location it would jump to a different form whoch had a input field for subscribers ot put there email. now i changed the 2 lines in main js from

$('form').submit(function() {
to

$('div').submit(function() {

also changed the form tags on the code below to div

<div id="searchbox">
<div id="formy" name="search_form" method="get" action="">
<input id="search" name="search" class="searchinput" placeholder="Search your location..." type="text">
<div id="search_buttons_container">
<button type="submit" id="searchbutton"></button>
</div>
<div id="search_buttons_container2">
<button type="submit" id="geo"></button>
</div>
</div>
</div>

this helped me to avoid the problem i had with the jumping field when pressing enter but not with the conflict of the submit buttons to the search field.

[jscheuer1]

Well, I'm not sure what you mean by jumping field. If you wanted, you could turn it back into a real form and use it's id instead of 'all forms' as the selector.


<div id="searchbox">
<form id="formy" name="search_form" method="get" action="">
<input id="search" name="search" class="searchinput" placeholder="Search your location..." type="text">
<div id="search_buttons_container">
<button type="submit" id="searchbutton"></button>
</div>
<div id="search_buttons_container2">
<button type="submit" id="geo"></button>
</div>
</form>
</div>

And then instead of:


$('form').submit(function() {

Use this:


$('#formy').submit(function() {

[jadwal]

Will stick to the second solution you gave me, that one has the best outcome in regard to the conflicting issues with other forms and buttons.
anyway thanks a lot for the help really really appreciate it. One of the best forums out there if not the best. The solutions you guys give are so detailed and in depth. Thanks again and hopefully this forum can be a example to other tech forums when its to giving solution to the visitors.