Solved

unable to serialise form for ajax submission in bootstrap

Posted on 2014-03-09
3
599 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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

770 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