en utilisant jquery pour faire appel ajax et élément de mise à jour sur le formulaire soumettre

Question

Voici mon formulaire HTML

<div id=create> 
     <form action=index.php method=get id=createform> 
     <input type=text name=urlbox class=urlbox> 
     <input type=submit id=createurl class=button value=go> 
     </form> 
    </div> 
    <div id=box> 
     <input type=text id=generated value="your url will appear here"> 
    </div> 

Voici le javascript im essayant d'utiliser pour ce faire;

$(function() { 
    $("#createurl").click(function() { 
     var urlbox = $(".urlbox").val(); 
     var dataString = 'url=' + urlbox; 

      if (urlbox == '') { 
       alert('Must Enter a URL'); 
      }else{ 
       $("#generated").html('one moment...'); 
       $.ajax({ 
        type: "GET", 
        url: "api-create.php", 
        data: dataString, 
        cache: false, 
        success: function (html) { 
         $("#generated").prepend(html); 
        } 
       }); 
      }return false; 
    }); 
}); 

quand je clique sur le bouton d'envoi, rien ne se passe, aucune erreur, et les données de retour de isnt api-create.php montré.

l'idée est que les nouvelles données de ce fichier php remplaceront la valeur de la zone de texte dans la #box div.

J'utilise le jquery de Google, et le fichier php fonctionne lorsque vous faites manuellement la demande get, si ive réduit à cette

Answer 1

La réponse de Dan devrait le réparer. Toutefois, si #createurl n'est pas un bouton d'envoi/d'entrée, et est un lien avec style css, etc., vous pouvez le faire:

$('#createurl').click(function() { 
    $('#createForm').submit(); 
}); 

$('#createForm').submit(function() { 
    // all your function calls upon submit 
}); 

Answer 2

Parce que vous lier à la soumettre cliquez au lieu de présenter de la forme .. essayer ceci:

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

// your function stuff... 

return false; // don't submit the form 

}); 

Answer 3

Il est grand plugin jQuery appelé jQuery Form Plugin. Tout ce que vous avez à faire est juste:

$('#createform').ajaxForm(
    target: '#generated' 
});