Home/ Questions/Q 7498063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T19:19:08+00:00

I’m making a form submit with jQuery’s AJAX. I’m having several form’s using AJAX

  • 0

I’m making a form submit with jQuery’s AJAX. I’m having several form’s using AJAX like this: 

$('#newUser').submit(function() {
var dataString = $(this).serialize();

$.ajax({  
    type: "POST",  
    url: "/includes/classes/handler.php?do=addLogin",
    data: dataString,
    success: function(returnedData){

        if(returnedData){
            $('.errorMessage').fadeIn().html(returnedData);
        } else {
            $('.sideBarNewUserWrap').fadeOut();
        }

    }
});
return false;
});
//

and then I am having another one like this: 

$('#addLookup').submit(function() {
var dataString = $(this).serialize();

$.ajax({  
    type: "POST",  
    url: "/includes/classes/handler.php?do=addLookup",
    data: dataString,
    success: function(returnedData){

        if(returnedData){
            $('.errorMessage').fadeIn().html(returnedData);
        } else {
            window.location.href = "";
        }

    }
});
return false;
});

And for some reason, when I wan’t it to trigger the #newUser it’s triggering the #addLookup. If I remove the #addLookup, there’s no AJAX OR jQuery running for #newUser (the browser is just refreshing if I click on “submit”).

The forms look like this: 

<form method='post' action='#' id='newUser'></form>

or

<form method='post' action='#' id='addLookup'></form>

How can this be? I’ve been looking at the same code for 2 hours now, and I can’t figure out what’s wrong.

Update

The #addLookup is only triggered if the 2 forms are on the same page. If the #newUser is standing alone on a page AJAX’s triggering the right function.

The full HTML

<form method='post' action='#' id='addLookup'>

    <div id='tilfojOpslagClose'><img src='/includes/images/design/btn/closeWindow-btn.png'></div>

    <div class='successMessage'></div>
    <div class='errorMessage'></div>


    <div id='tilfojOpslagHeader'>
        <input type='text' name='lookupHeader' id='lookupHeader' value='Skriv en overskrift'>
    </div>

    <div id='tilfojOpslagExpand'>

        <div style='float:left;'>
            <label>Præsentations tekst (bliver vist på forsiden)</label> 
                <textarea name='lookupSubHeader' id='lookupSubHeader' maxlength='100'></textarea>
        </div>
            <span id='lookupSubHeaderCharsLeftOutput'>Du mangler <strong>50</strong> tegn</span>

        <div style='float:left;width:618px;margin:3px 0 0 0;'>
            <textarea name='lookupContent' id='lookupContent' style='height:100px;'></textarea>
        </div>

        <div id='tilfojOpslagBottom'>
            <div id='tilfojOpslagSubmit'><input type='submit' value='Opret mit opslag'></div>
        </div>
</form>

And for #newUser

<form method='post' action='#' id='newUser'>
        <fieldset>
            <legend>Ny bruger</legend> 
                <label>Brugernavn</label>
                    <input type='text' name='username' id='username' placeholder='Brugernavn vil forekomme på siden, som et alias'>
                <label>E-mail</label>
                <label style='color:#f00;font-size:8px;'>Ja, du skal skrive en gyldig e-mail. Du modtager et aktiverings link.</label>
                    <input type='text' name='email' id='email' placeholder='E-mail - en del af dit login'>
                <label>Adgangskode</label>
                    <input type='password' name='password' id='password' placeholder='Adgangskode - en del af dit login'>
                <input type='hidden' name='salt' id='salt' value='<?=uniqid(mt_rand())?>'>
                <input type='submit' value='Opret mig'>

                <div class='errorMessage'></div>
                <div class='successMessage'></div>
        </fieldset>
        </form>

UPDATE

<?if($_SESSION['loggedIn']){?>
    <form action='' method='' id='addLookup'>
<?} else {?>
    <input type='submit' value='something'>
    </form>
<?}?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem comes in from the SUBMIT button behaviour. A specific submit inside a form will only post the form that contains it. I compiled a quick jsFiddle that illustrates it. If you trigger a submit button that’s not contained in a form, neither of the forms will post. If you trigger a specific submit button that’s inside a specific form, only THAT form will be posted.

    Al alternative might be to manually post both forms by attaching an OnClick event handler to the submit buttons…

    • 0