Solved

unable to serialise form for ajax submission in bootstrap

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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

830 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