Solved

unable to serialise form for ajax submission in bootstrap

Posted on 2014-03-09
3
607 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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…

627 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