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.
Related
I used #John Strood's answer from here to build my current script. The below code is close to my need, I now just need to append text to the results.
For example, appending site:imdb.com/title toHakunamatata to get https://www.bing.com/search?q=site:imdb.com/title+Hakunamatata
#Spectric had a great answer for a single-submit form, but it does not seem to function with the current script.
<form action="" method="get">
<input type="text" value="Hakunamatata" id="box" name="search_query"placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="https://testurl1.com"
onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://testurl2.com"
onclick="document.getElementById('box').name='s'" />
</form>
If you are wondering, the onclick functions are necessary
testurl1 uses the search modifier of ?q and testurl2 uses ?s
Prepend the string to the input's value when the submit event is fired.
form.addEventListener('submit', function() {
box.value = 'site:imdb.com/title ' + box.value;
})
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
To conditionally prepend the string, move the logic to the button's click event listener.
<form action="" method="get" id="form">
<input type="text" value="Hakunamatata" id="box" name="search_query" placeholder="text" autofocus />
<input type="submit" value="BNG" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='q';box.value = 'site:imdb.com/title ' + box.value;" />
<input type="submit" value="ABB" formaction="http://www.bing.com/search" onclick="document.getElementById('box').name='s'" />
</form>
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());
});
I am working on a system where users are allowed to add books to their library. I am using a jquery UI dialog box and have inserted about 20 rows into the database using the first half of this script.
However, as I was adding in the second half all of a sudden the post information is not showing up on the posted page and I am completely lost as to why.
This was supposed to be a quick addition that's turned into a headache.
FORM:
<form id="addbookform" action="../models/Books/addBook_submit.cfm" method="POST">
<div style="display: none;" id="addBook" title="Add a Book to Your Library">
<input type="hidden" id="InputType" name="InputType" value="Add"/>
<input type="hidden" id="bookempID" name="bookempID"/>
<label class="labelstyle" >ISBN:</label>
<input type="text" maxlength="17" id="ISBN" name="ISBN">
<label class="labelstyle" >Title:</label>
<input type="text" maxlength="100" size="50" id="Title" name="Title">*
<label class="labelstyle">Author's First Name: </label>
<input type="text" maxlength="50" id="AFName" name="AFName">
<label class="labelstyle">Author's Middle Name:</label>
<input type="text" maxlength="50" id="AMName" name="AMName">
<label class="labelstyle">Author's Last Name:</label>
<input type="text" maxlength="50" id="ALName" name="ALName">*
<label class="labelstyle">Date Read:</label>
<input type="text" id="DateRead" name="DateRead">
</div>
</form>
Javascript:
function addBook() {
$("#addBook").dialog({
autoOpen: true,
width: ($(document).width()*.55),
height: ($(document).height()*.7),
modal: true,
buttons: {
"Add Book": function() {
//checkBook();
$('#addbookform').submit();
},
Cancel: function() { $(this).dialog("close"); }
}
});
}
The above piece was working before I started building checkBook(). However, now it's no longer working.
Edit:
The form is initiated by:
<input type="button" class="buttonstyle" value="Add Book" onclick="addBook()" />
(this works)
I think your form must be "visible" in order for the elements to be posted. jQuery can certainly see and access all of the elements regardless of css Display type, but I believe the "submit" action requires the elements that are getting posted to the server be visible. I noticed all the form elements you are attempting to submit are inside of a DIV element with the css property of Display:none;
It seems to me that you are binding a submit event to the form somewhere else in the code.
So, you can try submitting the form without jQuery.
$('#addbookform')[0].submit();
Or unbind any event that might be in the form.
$('#addbookform').off().submit();
I am trying to validate a form, but I can't get any code to execute when my button is clicked. Here's my code:
<div id="vehicle_form">
<form method="post" name="emailForm" action="">
<input class="dField" id="dfEmail" type="email" name="email" value="Email" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name" onfocus="clearInput(this);" onblur="restoreInput(this)"><br/>
<button type="button" id="dSubmit">Submit</button>
</form>
</div>
$('#dSubmit').click(function(){
console.log('click');
});
You need to ensure that your jQuery is wrapped in a <script> tag, and ensure that the function is being loaded, perhaps by a $(document).ready() function, as shown below:
<script type='text/javascript'>
$(document).ready(function(){
//Your Click event
$('#dSubmit').click(function(){
console.log('click');
});
});
</script>
Working Demo
Actually the code stays wrong. A form can be often submitted by hitting enter inside of a textfield. If you want to make it right you should use the submit event.
<script>
$(function(){
$('#vehicle_form > form').submit(function(){
console.log('submit');
});
});
</script>
I want to auto-sumbit my form once user clicks out side the div of the form.
I tried the following but it submits within clicking within the div.
<div id="formDiv">
<form id="search">
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
</div>
// auto submit
jQuery('#formDiv').live('blur',function() {
$(this).children('form').submit();
});
Off-hand, the only thing I can suggest it so attach to the click event of the body, then also attach to the div's click event and e.preventDefault() to halt it. Alternatively, you could bind to each form element's focus/blur event with a .delay. If they lose focus from one element and aren't in another, submit the form.
EDIT
See if this is what you're looking for:
Javascript:
var queueSubmit;
$('#sample input').each(function(i,e){
$(this).bind('focus',function(){
clearTimeout(queueSubmit);
});
$(this).bind('blur',function(){
queueSubmit = setTimeout(function(){ $('#sample').submit(); }, 1000);
});
});
$('#sample').bind('submit',function(){
clearTimeout(queueSubmit);
alert('Pseudo-Submitted!');
return false;
});
Sample HTML
<div id="main">
<p> </p>
<div id="main-form">
<form id="sample" method="POST" target="">
<fieldset>
<legend>My Sample Form</legend>
First Name: <input type="text" id="first_name" /><br />
Last Name: <input type="text" id="last_name" /><br />
Telephone: <input type="text" id="telephone" /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
</div>
<p> </p>
</div>
Working Example Here
I would do this by putting a click handler on the body and seeing if the event target (event.target) is a descendent element of #formDiv:
$('#search').one('focus', function() { // the first time that a field in #search receives focus
var $formDiv = $('#formDiv');
$(document.body).click(function(e) { // bind a click handler to the document body
if (!$formDiv.has(e.target).length) { // if the target element is not within formDiv
$('#search').submit(); // submit the form
}
});
});