#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2016
    Posts
    10
    Rep Power
    0

    2 form fields conflicting with each other


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


    Code:
    <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
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,394
    Rep Power
    9645
    Your Javascript to handle the search form is incorrectly applying itself to the donation button as well. The problem will be in that code, not in the HTML markup.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2016
    Posts
    10
    Rep Power
    0
    You probably right.

    the code is on codepen:
    Create a New Pen

    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
  6. #4
  7. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,394
    Rep Power
    9645
    What's the Javascript code to handle the search button?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2016
    Posts
    10
    Rep Power
    0
    Its the main js file

    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 */
        $('div').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();
    			$("#search").trigger('change');
    		};
    
    		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;
                $('div').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=AIzaSyAD_IupGJuaPSOKdaSnZYIEwLmLF3VM4F0", 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);
    }
    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

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

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

    also changed the form tags on the code below to div

    Code:
    <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.
  10. #6
  11. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,394
    Rep Power
    9645
    By using $("div") you're attaching that code to any DIV which receives the submit event.

    1. You should only use submit on forms. Use click for buttons.
    2. The event handler needs to be specifically applied to the search form, or the search button.

    Try $("#searchbutton").click(...) instead. Like you did with the #geo button.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi,

    You can using Javascript and Creating two function and first function using search button id and second function using the submit button id and both are button differnt.

    below exmple

    Code:
    $("#btnsearch").click(function()
    {
    	//code
    });
    		
    $("#btnsubmit").click(function()
    {
    	// code		
    });

IMN logo majestic logo threadwatch logo seochat tools logo