I'm using remy sharp's hint plugin.
<input type="text" title="hint" name="names" class="input" />
But when I post the form without filling the fields, input still has
$_POST['names'] = 'hint';
How can I prevent this issue?
Thanks in advance.
EDIT : jQuery Code:
$(".input").hint();
$(".lSubmit").click(function(e){
e.preventDefault();
$.post('form.php',decodeURIComponent($("#forms").serialize()) , function(data) {
$('.result').html(data);
});
});
The plugin removes the hint itself when the form the input is in gets submitted, unfortunately you are not submitting the form, but posting it via $.post.
The most simple way would probably to check the value(s) of the input(s) just before it gets submitted against its title, and clear it if they are the same:
$(".lSubmit").click(function(e){
// clear inputs that still have the hint as value
$('.input').each(function() {
if($(this).val() == $(this).attr('title')) {
$(this).val("");
}
});
e.preventDefault();
$.post('form.php',decodeURIComponent($("#forms").serialize()) , function(data) {
$('.result').html(data);
});
});
You cant.
Just add an if statement to your code:
if($_POST['names'] == 'hint' ) {
//DONT USE IT!!
}
Related
So i'm a completely rookie at AJAX so I was wondering if someone could help.
I'd like to get this, SQL command to be activated onkeyup:
SELECT * FROM commands WHERE tag=$_POST['search_input']
This is the current code I have for the form:
<form method="post">
<input class="search_input" type="text" name="search_input" placeholder="Search..." onkeyup="suggest()" autocomplete="off" />
</form>
Current jQuery:
$(document).ready(function() {
$('.search_input').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
function handleKeyPress(e,form){
var key=e.keyCode || e.which;
if (key==13){
form.submit();
return false;
}
}
});
the function suggest() is what I'd like your guy's help on. To send the command above on a keypress.
Use $.post(). You have here examples http://api.jquery.com/jquery.post/
The basic structure is
$.post(url(string), data(object), function(response){ /* do something */ });
A delay between inputs would be really good so it won't continuously send requests to the server. You may also want to use keyup instead of keypress, test it and you'll see why.
I would recommend to use...
HTML
<form method="post">
<input class="search_input" type="text" name="search_input" placeholder="Search..." autocomplete="off"/>
</form>
JS
// shorthand for document ready
$(function(){
var $input = $('.search_input');
// using on-function (see jQuery Docs)
// bind event instead of using on-attribute (nicer)
// bind input event instead of keyup, because it will fire on paste too
$input.on('input', function(evt){
$.ajax({
// maybe use GET?
type: 'POST',
url: '/yourQueryPath',
// assign the input value to the needed query parameter
data: {'search_string': $input.val()},
success: function(response){
// whatever you want to to with your response
}
)};
});
});
Additionally a hint: Never use unfiltered user input like your SQL does (MySQL-Injection)!
E.g. if you are with PHP please use filter_input() and mysql_real_escape_string() or simliar.
<input class="span5" type="hidden" name="number" id="number" value="">
$(this).ready
(
function()
{
$('#number').on('blur', function() {
term = $(this).val();
alert(term);
});
}
);
How can I get value Number???
It should be $(document).ready() not $(this).ready():
$(document).ready( function() {
$('#number').on('blur',function() {
term = $(this).val();
alert(term);
});
});
Please see jQuery ready() for further details.
why do you use $(document).ready ( function() when you can shorten it to $(function() and hence you can get your value like
$(function(){
$('#number').on('blur',function() {
term = $(this).val();
});
});
its wrong. how will you get an 'onblur' event for a hidden field ? Hidden fields are similar to text fields, with one very important difference! The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field: To submit information that is not entered by the visitor.
I'm using JQuery Form Plugin for AJAX file uploader.
The (html) form is created dynamically, and looks like this:
<form id="formUpload" action="fileReceiver.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileUpload" multiple>
<input type="submit" value="Upload File to Server">
</form>
Because, the form is created dynamically, I'm using jquery on(). I also need to send a few variables, I'm using data options from the plugin.
The Javascript looks like this:
$(document).on("submit", "form#formUpload", function() {
$(this).ajaxForm({
data: { someVariable : 'someValue' },
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
I think the form is binded correctly, I could call/alert something from the ajaxForm (jquery form plugin) function through beforeSend or Success options.
Now, the problem is the PHP couldn't get the data I posted in the Javascript.
My PHP is simple like this:
<?php
echo $_POST["someVariable"];
?>
It gives me error "Notice: Undefined index: someVariable blah blah blah"
Any advice? Thx :)
Try adding some variables in hidden input inside form
<input type="hidden" name="someVariable" value="someValue">
and remove $(document).on("submit",... event
You can try
var input = $("<input>").attr("type", "hidden").attr("name", "someVariable").val("someValue");
$('#formUpload').append($(input));
this links may help you
http://www.malsup.com/jquery/form/progress2.html
http://www.malsup.com/jquery/form/file-echo2.php.txt
Well, in case your form is being added dynamically then you'd have to use DOMNodeInserted event instead of submit. That way, whenever there's some addition in DOM your form will be attached to form plugin.
You can replace your function with following --
$(document).on("DOMNodeInserted", "form#formUpload", function() {
$(this).ajaxForm({
data: { someVariable : 'someValue' },
complete: function(xhr) {
// do something
}
});
});
But remember, using DOMNodeInserted event will fire that method whenever there's addition of any kind into DOM. So just put what is essential ( in this case form plugin init for #formUpload ) .
Try to locate if you already added the jQuery Form Plugin...
<script src="jquery.form.js"></script>
Your syntax is definitely correct according to http://malsup.com/jquery/form/#options-object
I am trying to use jquery's form plugin from http://www.malsup.com/jquery/form/#ajaxSubmit and .ajaxsubmit to submit my data in a form however I am not really sure what .ajaxsubmit is passing and how I can read this in my php file.
I have a validate function
function validate(formData, jqForm, options) {
alert('About to submit: \n\n' + queryString);
return true;
}
that shows queryString which is
first=testfirstname&last=testlastname&age=90
when I use .ajaxsubmit, nothing happens as listed in my script below.
$(document).ready(function() {
var options = {
target: '#output1',
beforeSubmit: validate,
success: showResponse
};
//submission
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
My form is
<form action="comment.php" method="post" id="myForm">
I was wondering what format is the data being sent, would I do something with
$_REQUEST['first'];
and also how would I also pass in an addition value from the $_SESSION?
Thanks
As far as I know, the jQuery plugin actually sends the plugin data as POST-data to PHP (similar to setting method="post" on your <form> tag). You can access it like this:
$_POST['name_of_field_in_form'];
The name_of_field_in_form is just the name of a field, for example if you have this code <input name="email" type="text" />, you could access it via $_POST['email'];.
About your second query, not sure what you mean, but you can use session_start(); to create a session and after that $_SESSION acts like a 'normal' array.
I am trying to use this piece of code to serialize a form AND send an extra variable not found in the form, at the same time. The following line of code is what I expected, but sadly does not work.
var thePage = theFilename();
$.post("pagedetail.php", { $("#PageDetailForm").serialize(), thePage: thePage },
function(data) {
alert(data);
});
Any ideas?
var serialized = $('#PageDetailForm').serialize();
serialized.thePage = thePage;
$.post("pagedetail.php", serialized,
function(data) {
alert(data);
});
what you can do is to add the extra data to an hidden input and catch it in the
pagedetail.php page .
eg lats say your form
<form id='PageDetailForm'>
<input type="hidden" name="value" id="value" value="the value u wamnt to add goes here" />
....other inputs
</form>
after this just do your normal $.post
$.post("#pagedetail.php",$("#PageDetailForm").serialize(),function(data){
$("#ans").html(data);
// in the pagedetail.php
$echo $_POST['value'];
hope dis help if ur still confused hola me #dplumptre
Try this for the second parameter to $.post:
{ form: $("#PageDetailForm").serialize(), thePage: thePage }
Hopefully you still need this :).
Try the serializeArray() method and then push some additional data in the resulting array, so you don't have splitted arrays etc.:
var postData = $('#form-id').serializeArray();
var additionalData = $('#additionalDataID').val();
postData.push({name: 'additionalName', value: additionalData});
and finally:
$.post(URL, postData);
Try sortable('toArray'):
var thePage = theFilename();
$.post("pagedetail.php", { pageDetailForm: $("#PageDetailForm").sortable('toArray'), thePage: thePage },
function(data) {
alert(data);
});