JQueryMobile form always empty - javascript

I'm trying to do a simple JQM AJAX form post to a server - but for some reason, my form input values are always empty. (Even in the DOM inspector)
This is the 2nd page in my HTML - and the only form on the page. The console always prints out "[]"
<div data-role="page" id="login">
<div data-role="content">
<h2>
Login
</h2>
<form id="loginform" data-ajax="false">
<fieldset>
<input name="" id="userId" name="userId" placeholder="login" type="number">
<input name="" id="password" name="password" placeholder="password" type="password">
<input type="button" id="login_submit" data-theme="b" value="Submit">
</fieldset>
</form>
</div>
<script language="JavaScript" >
$(document).on('pagebeforeshow', "#login", function(){
$(document).on('click', '#login_submit', function() {
console.debug($('#loginform').serializeArray());
});
});
</script>
</div>

And the answer is obvious once it's posted into SO.
There's duplicate name attributes on the input fields - note the original issue was probably that the name attributes were set as "" - which would drop them from the form submission.

Try:
$(document).on('submit', '#loginform', function() {
console.debug($('#loginform').serializeArray());
});

Related

Why is jQuery input tag not working when appending input field?

I am trying to create multiple tag fields with jQuery.
The tag script that I am using is from http://codepen.io/k-ivan/pen/NxxGPv
It works perfectly fine, however, when adding more fields by appending, the script stops working.
Can anyone suggest a solution?
HTML:
<form role="form" method="POST" enctype="multipart/form-data" action="../test.php">
<label for="default">Default
<input type="text" id="default" class="tagged form-control" name="tag-1" data-removeBtn="true" placeholder="create tag">
</label>
<input type="button" value ="add More" id="add">
<input type="submit" value="submit">
</form>
jQuery for adding more fields (adding works perfectly fine):
<script >
$(document).ready(function(){
var Count =2;
$('#add').click(function(){
$('#add').before($('<div/>',{
class:'row',
})
.fadeIn('slow')
.append(' <input type="text" id="default" class="tagged form-control" name="tag'+Count+'" data-removeBtn="true" placeholder="create tag">')
)
Count++;
});
});
</script>
I would also like to ask how a PHP script can be added inside this append event?

Angularjs, Modify/Remove data on form submit

I have an input field in form that I dont want to send. Even though i removed the name on input field it stills get sent probably due to angular magic.
To prevent this I thought if I could remove this item from post request it'd be the solution.
<input type='radio' ng-model='birthday' ng-value='true'>
when form submits POST has field called birthday despite input not having a name attribute. So how do i prevent it from showing up.
Form is html template, and controller is called on ng-submit
I think that you may be looking for the disabled property:
<input type='radio' ng-model='birthday' ng-value='true' disabled="true">
Edited
Here is an example of how you could use the disabled property for not sending undesired information with the form on submit:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var TestApp = angular.module("TestApp", []);
TestApp.controller('TestCtrl', function($scope) {
$scope.needsBirthdayDisabled = false;
$scope.needsBirthday = false;
$scope.sendForm = function(form) {
$scope.needsBirthdayDisabled = true; //if you comment this line, the "yep"'s input value will be sent with the form
form.$submitted = true;
};
});
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<!-- the method is set to GET for test purpose (so we can easily see the sent values on the URL) -->
<form action="" method="GET" name="myForm" ng-submit="sendForm(this)">
<div>
<label for="name">Name</label>
<input type="text" name="name" ng-model="name"/>
</div>
<div ng-show="needsBirthday">
<label for="birthday">Birthday</label>
<input type="text" name="birthday" ng-model="birthday"/>
</div>
<div>
<label>Needs Birthday</label>
Yep <input type='radio' name="yep" ng-model='needsBirthday' ng-value='true' ng-disabled="needsBirthdayDisabled">
</div>
<input type="submit" value="Go!"/>
</form>
</div>
</body>
</html>

Stopping form submission with jQuery

I want to interrupt and prevent a form from submitting using jQuery. Here's my form markup:
<div id="register-box">
<div id="register-box-inner">
<h2>Register</h2>
<form action="/register" method="post" id="register-form">
<p><label for="username">Username:</label><input type="text" name="username"></p>
<p><label for="password">Password:</label><input type="password" name="password"></p>
<p><label for="email">E-mail:</label><input type="text" name="email"></p>
<p><input type="submit" value="Register" class="register"></p>
</form>
</div>
</div>
and my Javascript code thus far:
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
});
Problem is, the form still goes through. I wanted to submit the form using AJAX but with a fallback for users who don't have Javascript enabled. No errors pop up in the Javascript console, either.
Try
$("form").live("submit", function() {
alert("hi");
return false;
});
Try returning false from the handler.
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
return false;
});
Try:
<p><input type="submit" value="Register" class="register" onclick="submit(); return false;"></p>

Submitting Ajax Form With SimpleModal (jQuery)

I have a form within a SimpleModal modal, but when I try to use serialize with jQuery, the form data is always blank. The form serialize works outside of the modal, so theres something preventing the serialize from grabbing the form data. This is the code I am using:
<div id="address_form" style="display:none">
<div id="contact-area">
<form id="address_form" action="submit" method="POST">
<label for="Street">Street:</label>
<input type="text" name="Street" id="street" />
<input type="submit" name="submit" class="submit-button" />
</form>
</div>
</div>
$("#address_form").submit(function(){
var data = $(this).serialize();
alert(data)
return false;
});
You have two elements with the id of address_form. Change the id on the DIV with that id and it will work.

Jquery Cookbook Modal button

I've been at this for two days and can't seem to get it. Basically, I'm using the JQuery Cookbook modal from scratch. My problem is the form html page loads fine but the code will not recognize my submit button. Here's the relevant parts of the code:
Separate HTML:
<div id="contact">
<form action="" id="register_form" method="post">
<p>First Name <br />
<input type="text" id="firstname" name="firstname" /></p>
<p>Last Name <br />
<input type="text" id="lastname" name="lastname" /></p>
<p>Username: <span class="micro">Must be a valid email address</span></span><br />
<input type="text" id="username" name="username" /></p>
<p><input type="submit" value="Register" id="register" /></p>
</form>
</div>
Here's the relevant parts of the modal code:
// Insert modal at end of </body>.
$('body').append('<div id="modal_wrapper"><!--[if IE 6]><iframe id="modal_iframe" frameborder="0"></iframe><![endif]--><div id="modal_overlay"></div><div id="modal_window"><div id="modal_bar"><strong>Modal window</strong>Close</div><div id="modal_content"><div id="contact"><form><p><input id="firstname" /></p><p><input id="register" /></p></form></div></div></div>');
$('#modal_content').load('mediaKitF.html#contact'.replace('#', ' #'), '', showModal);
$("input[type=text]").focus(function(){
// Select field contents
this.select();
});
$('input #firstname').focus();
$('#register').click(function () {
alert("hello there");
});
$('#modal_content').load() is an asynchronous method, which means that you are trying to attach your click event to the $('#register') element before receiving the new content. You need to either use $('#register').live('click', function() {}) or move the code attaching the click handler into your showModal function.

Categories