Solved

unable to serialise form for ajax submission in bootstrap

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

758 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

17 Experts available now in Live!

Get 1:1 Help Now