Solved

unable to serialise form for ajax submission in bootstrap

Posted on 2014-03-09
3
598 Views
Last Modified: 2014-03-09
Hi

I am unable to serialise the following form built on a page using bootstrap

<form action="#" class="form-horizontal form-bordered" id="login" name="login">
            
            <div class="form-group">
              <label class="col-sm-3 control-label">Username</label>
              <div class="col-sm-6">
                <input type="text" placeholder="Username" class="form-control" id="dbsusername" value=
                "xxxx">
              </div>
            </div>
            
             <div class="form-group">
              <label class="col-sm-3 control-label">Password</label>
              <div class="col-sm-6">
                <input type="text" placeholder="Password" class="form-control" id="dbspassword" value="xxxx">
              </div>
            </div>
            
            <div class="row">
				<div class="col-sm-6 col-sm-offset-3">
            <label style="color: #FF0000" id="errorMessage"></label>
            	</div>
			 </div>
             
            <div class="row">
				<div class="col-sm-6 col-sm-offset-3">
				  <button class="btn btn-primary">Submit</button>&nbsp;
				  <button class="btn btn-default">Cancel</button>
				</div>
			 </div>
            </form>

Open in new window

         

This is the javascript. The alert str returns empty. The alert on the username shows the correct value. I am just hard coding the vales for now in the data fields until the serialise works . On my other websites i just pass in 'str'. Something on this site is stopping the serialisation. The only difference I can think of is that I am using bootstrap.



<script type="text/javascript">
        $(document).ready(function(){
	
            $("#login").submit( function () {  
			
   		 	var str = $("#login").serialize();
			alert(str);
alert($("#dbsusername").val());
				$.ajax({
  					url: 'ajax/process_login.php',
					type: "POST",
					data: "dbsusername=xxxx&dbspassword=xxxx",
					
  					
  					success: function(result) {
						alert(result);
						var result=trim(result);
						if(result=='ok'){
                  			window.location='index.php';
             			}else{
                  			$("#errorMessage").html(result);
            			}
  					},
					
					error: function (request, textStatus, errorThrown) {
        				alert('text status: ' + textStatus + ' errorThrown: ' + errorThrown);
   					}
				});
				
				return false;
      		
						
			

            });

         




        });
		
		function trim(str){
			var str=str.replace(/^\s+|\s+$/,'');
			return str;
		}
        </script>

Open in new window


This is the whole page
http://cpe.dev3.co.uk/login_page.php

Thanks in advance for any help
0
Comment
Question by:andieje
  • 2
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39915901
For an input to be passed in a FORM submission (or as a serialization) it needs a NAME

http://jsfiddle.net/GaryC123/AY8hj/
0
 

Author Comment

by:andieje
ID: 39915959
I cant believe i missed that :) Thanks you
0
 

Author Closing Comment

by:andieje
ID: 39915960
:-D
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now