I know there are several threads about this topic but I couldn't find one to fit my needs.
I'm simply trying to sand an form asynchronous using the jQueryFormPlugin.
I've got this basic form in index.php
<form id="test_form" action="http://127.0.0.1/MwebCms/index.php?admin=1&p=navigation&add=1" method="POST">
<table>
<tr>
<td>Title</td>
<td><input type="text" name="title"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Speichern" name="submit"></td>
</tr>
</table>
</form>
Now after including Jquery and the Jquery form plugin I added this in my JavaScript file:
$(document).ready(function() {
$('#test_form').ajaxForm(function() {
alert("test");
});
});
Now that's all fine and dandy, but if I now check in index.php for:
echo $_POST["title"];
It will never be set.
What am I doing wrong or is my basic understanding of the jqueryFormPlugin completely wrong at all?
Source: http://malsup.com/jquery/form/#getting-started
I found the mistake I made:
The $_POST was sent alright, but it wasn't displayed. After changing the jquery to the following:
$(document).ready(function() {
$('form').ajaxForm(function(data) {
$("body").html(data);
});
});
It all worked properly.
Related
I want to create a Character Counter for a Custom Field on a Product Page. I am trying to use the following JavaScript and HTML code to achieve such a function:
HTML:
<div class="fields-group-1">
<table class="fields_table product-custom-text-wrapper" cellspacing="0">
<tbody>
<tr>
<td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" />
<span class="validation-message is-valid-1"></span>
</td>
</tr>
</tbody>
</table>
</div>
<span id="character_count"></span> //This is where I am attempting to output the Character Count.
JavaScript:
<script type="text/javascript">
$('.product-custom-text').keyup(updateCount);
$('.product-custom-text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#character_count').text(cs);
}
</script>
When running this within the Fiddle program, I can generate the Character Counter. However, when I place the above code into the website, the Character Counter does not seem to work. I have checked the Source Code and all of the coding is there.
I can see that someone else has experienced a similar issue to myself, as per th question at: Code works in fiddle, but not on webpage. As a newbie to JavaScript, I am not 100% sure of a suitable fix.
Is anyone able to point me in the right direction as to the relevant changes I would need to make in order for my above coding to work?
You can change your binding like below:
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);
This binding does not require to be inside $( document ).ready(function() { function, because it will work for available DOM elements
You need to use document.ready for keyup event. Before this moment DOM elements you're referring in jQuery selectors aren't available.
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);
function updateCount() {
var cs = $(this).val().length;
jQuery('#character_count').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields-group-1">
<table class="fields_table product-custom-text-wrapper" cellspacing="0">
<tbody>
<tr>
<td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
<td class="value">
<input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no" />
<span class="validation-message is-valid-1"></span>
</td>
</tr>
</tbody>
</table>
</div>
<span id="character_count"></span>
Edit: As per discussion, In wordpress sites, there might be chances of having $ confliction, so try using jQuery insted of $. Updated answer!
You are using jQuery functions, but are you importing jQuery to use it in your site? Also, your function should be wrapped in a jQuery docready function.
$( document ).ready(function() {
//your code
});
It works in the Fiddle, because jsFiddle includes jQuery for you. In your build you have to import it.
As you pointed out it's wordpress: no need to include the jquery source. WP enqueues it by default (though other plugins can remove that)
Wrap your jquery code inside $.ready.
For wordpress: it forces no-conflict mode, and therefor for all jquery code you must use jQuery instead of the $ alias, OR use the following as the $.ready wrapper: jQuery(function($){ // your code with $ stuff });
I created sample spring MVC program to display the student name, id and age. I want to restrict entering of numbers in the textfield and string in place for age. Also I want to make the id field mandatory. I am using JSP for the view.
I had searched a lot but cannot find a suitable solution
I am expecting your help,
Thanks in advance.
This is the jsp file
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<title>Spring MVC Form Handling</title>
</head>
<body>
<h2>Student Information</h2>
<form:form method="POST" action="addstudent">
<table>
<tr>
<td><form:label path="name" id="tct" >Name</form:label></td>
<td><form:input path="name" /></td>
</tr>
<tr>
<td><form:label path="age">Age</form:label></td>
<td><form:input path="age" /></td>
</tr>
<tr>
<td><form:label path="id">id</form:label> </td>
<td><form:input path="id" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit"/>
</td>
</tr>
</table>
</form:form>
This were the search result i have found
restrict a character to type in a text box
Restricting input to textbox: allowing only numbers and decimal point
http://www.cambiaresearch.com/articles/39/how-can-i-use-javascript-to-allow-only-numbers-to-be-entered-in-a-textbox
if this link works please help me to integrate it with my JSP file.I am beginner in javascript and HTML.
Thanks in advance
For non-numerical fields:
One possible solution is to use the keyup function to replace all number occurrences in the text field while you type (jQuery used).
$(".textfield").keyup(function(){
var textfield= $(this).val();
var newtext=textfield.replace(/[0-9]/g, '');
$(this).val(newtext);
});
For numerical only fields:
You can use something similar as the above but replace the regexpression with:
var newtext=textfield.replace(/[A-Za-z$-]/g, "");
For id:
Use form validation on form submission. First of give an id/name to your form.
$("form").submit(function(){
var idField= $(#idField).val();
if(idField.length > 0){ //form ok
}else{ //form not ok. error message
alert('error');
}
});
I haven't actually tested the above code completely so any corrections would be appreciated.
Hope it helps
N00b alert; I know enough to be dangerous, so forgive my ignorance...I've been through all of the related questions here and elsewhere, but I just can't seem to comprehend the answer that's surely included in the responses :-(
I'm posting a record id to a page where I want a form to display with the contents of the related record. I'm getting the record in correctly (confirmed using the alert) with this script in the HEAD section (jquery 1.9 is called as well):
<script type="text/javascript">
function getSelectedCustomer () {
...use the id to get the right record...
databaseAPI.callback = function() {
if (databaseAPI.error) {
alert("Database Error: " + databaseAPI.error);
}
else {
var customerRecord = databaseAPI.result;
alert("Test Callback: " + new String(customerRecord.full_name));
$("#quoteForm").load(customerRecord);
}
return;
};
databaseAPI.ajaxGet();
}
window.onload = getSelectedCustomer;
</script>
...and the form in the BODY to be loaded:
<form method="post" id="quoteForm" action="process_quote.php">
<table>
<tbody>
<tr>
<td>Name</td>
<td><input type="text" value="<?php $customerRecord['full_name']; ?>" name="full_name"></td>
</tr>
...other bits of the form...
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</tbody>
</table>
</form>
I know I'm incorrectly munging various things together. Can someone please get me straightened out on what to do?
Michael's answer solved the INPUT fields in the form. Didn't mention I had SELECT fields as well:
<select size="0" name="email_sent">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
Changing INPUT to SELECT works.
What your missing is where code is being executed. The PHP code is being executed on the server, before being sent to the browser. The Javascript is then rendered by the browser. You can't pass variables back and forth between Javascript and PHP.
You want to inject the name with Javascript. I see you're already using jQuery, so the heavy lifting is already done for you. Remove the value="<?php $customerRecord['full_name']; ?>" from the PHP file, and replace $("#quoteForm").load(customerRecord); with $("#quoteForm input[name='full_name']").val(customerRecord.full_name);
Should work, might need some variation depending on your exact circumstances. At least it should put you down the right path.
Ajax-returned HTML includes a table and a submit button (type=button)
The table includes jQuery routine to clone table row (each row allows choosing/uploading one file, and has two values: <input type="text"> for doc title, and <input type="file">.
<table id="MyTable">
<tr name="tr3" id="tr3">
<td>
<input type="text" name="dt[]" id="dt1">
</td>
<td>
<input type="file" name="fff[]" id="ff1">
</td>
</tr>
</table>
<input type="button" name="sub1" id="sub1" value="Submit" onclick="checkform();">
Upon form submit, I must check that each doc title has been filled-in, so the submit button calls a javascript routine:
function checkform()
{
if(document.updateprojectdocs.dt[0].value=='')
{
alert("Fields marked with an asterisk are required.");
document.updateprojectdocs.dt[0].focus();
return;
}
document.getElementById("TheForm").submit();
}
Of course, this does not work (script dies before form submit -- but submits if I remove the preceeding if structure). Can anyone tell me why and how to fix?
Also, there will be an indeterminate number of dt[] fields to check. How could I structure a loop to do this? I suspect jQuery's .find().each() could be used, but not sure what that would look like?
UPDATES:
Thanks to DaHaKa's response below, I am closer to a solution. I mod'd DaHaKa's suggested code into jQuery.
I was having trouble communicating with DaHaKa - for some reason his responses were not appearing until long, long, long after he posted them (the problem was probably on my end). While I was waiting (hours), I posted part of the problem in another question and ended up resolving it there. That other question grew into the FULL CORRECT ANSWER, and I direct future viewers there. Note that user thecodeparadox created a working JSFiddle of the full solution.
I have awarded this question to DaHaKa as he was more than willing and able to assist, but comm problems intervened. Thanks again, D.
In this case jQuery each function isn't neccessary, you can do it simple like this =>
try
<table id="MyTable">
<tr name="tr3" id="tr3">
<td>
<input type="text" name="dt" id="dt1">
</td>
<td>
<input type="file" name="fff" id="ff1">
</td>
</tr>
</table>
<input type="button" name="sub1" id="sub1" value="Submit">
JavaScript
document.getElementById("sub1").onclick = function(){
if (document.getElementById("dt1").value!=""){
document.getElementById("TheForm").submit();
} else {
alert("Empty Field(s) !");
}
};
you should use ids in JavaScript from html tags , NOT NAME tags
And whats about you file input , you could understand it from your server side scripting language like php , with super global variables $_FILES['file']['error'] types
I am having an issue with accessing my form by it's name. When I use document.form[0].mylink.value it recognizes the value and outputs to the innerHTML that I specify. However, when I use document.myform.mylink.value it doesn't seem to recognize the form. I have tried this in chrome 6.0 and also firefox 3.6.3 and get the same result in both. I really need to be able to access my form values by using the form name (instead of document.form[0]), any ideas why document.myform.mylink.value doesn't work?
<form name="myform">
<table>
<tr><td valign="middle" align="center">
<div id="textResponse"></div>
</td></tr>
<tr><td height="30" valign="middle" align="center">
<input name="mylink" value="Enter a URL" size="31" />
</td></tr>
<tr><td valign="top" align="center">
Click
</td></tr>
</table>
</form>
<script type="text/javascript">
function submitForm2(){
//This one does NOT work:
my_link = document.myform.mylink.value;
//This one also does NOT work:
//my_link = document.forms['myform'].mylink.value;
//This one works:
//my_link = document.forms[0].mylink.value;
document.getElementById("textResponse").innerHTML="<p>"+my_link+"</p>";
}
</script>
Technically what you have should work ok... the full syntax below should also work:
var my_link = document.forms['myform'].elements['mylink'].value;
If by chance your variable in your "real" code is "mylink" not "my_link" you will get failures in IE as it will auto-reference the form element, not the value you are trying to extract.
That all said, your code as posted... works just fine in Firefox/IE (demo here: http://jsfiddle.net/Ymg8W/ )