<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.
Related
I have a form where small labels are displayed above each field, once the user adds a value to that field.
This for is sometimes loaded with some of the fields being pre-populated.
How would i check on page load if any of the form fields have a value and if so, have the label visible?
Here's my current code for displaying labels once a field has a value:
$('.form-control').blur(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
on page load try this:
$('.form-control').each(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
$(document).ready(function(){
$('.form-control').each(function(){
if($(this).val() != ''){
$(this).prev().show();
}
});
});
On document ready, for each .form-control, if the input's value is not blank, do whatever code you would to show the label.
Using focusout Event wouldn't be much of an overkill, would it?
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
// ALTHOUGH BLUR IS OK, ONE COULD SIMPLY BIND THE .form-control CLASSES TO THE focusout EVENT
// THIS ENSURES THAT THERE IS A HIGHER LIKELIHOOD THAT THE FIELD IN QUESTION ONCE HAD FOCUS
// WHICH MAY IMPLY THAT THE USER ALSO INTERACTED WITH THE FIELD IN SOME WAY...
$('.form-control').each(function(elem){
var objElem = $(this);
objElem.focusout(function(evt) {
if ($(this).val()) {
// NOW, YOU SHOULD KNOW WHICH METHOD TO USE TO TRAVERSE THE DOM
// AND GET AT THE LABEL....
// IN YOUR CASE IT SEEMS TO BE THE PREVIOUS ELEMENT BEFORE THE FORM-FIELD.
$(this).prev().show();
}
});
});
});
})(jQuery);
</script>
I am trying to write a code that 'stores items for later' - a button that has url of the item as hidden input, on submit it calls a php script that does the storage in a db. I am more into php, very little knowledge of anything object-oriented, but I need to use jquery to call the php script without moving over there
The problem is how to assign the x and y variables when I have multiple forms on one page
I was only able to write the following
$("form").bind('submit',function(e){
e.preventDefault();
var x = $("input[type=hidden][name=hidden_url]").val();
var y = $("input[type=hidden][name=hidden_title]").val();
$.ajax({
url: 'save_storage.php?url='+x+'&tit='+y,
success: function() {
alert( "Stored!");
location.reload();
}
});
});
It works fine if you have something like...
<form method="post" action="#">
<input type="hidden" id="hidden_url" name="hidden_url" value="<?php echo $sch_link; ?>"/>
<input type="hidden" id="hidden_title" name="hidden_title" value="<?php echo $sch_tit; ?>"/>
<input type="submit" id="send-btn" class="store" value="Store" />
</form>
..once on the page, I've got about 50 of them.
These are generated via for-loop I suppose I could use $i as an identifier then but how do I tell jquery to assign the vars only of the form/submit that was actually clicked?
You'll have to scope finding the hidden fields to look within the current form only. In an event handler, this will refer to the form that was being submitted. This will only find inputs matching the given selector within that form.
$("form").bind('submit',function(e){
e.preventDefault();
var x = $(this).find("input[type=hidden][name=hidden_url]").val();
var y = $(this).find("input[type=hidden][name=hidden_title]").val();
$.ajax({
url: 'save_storage.php',
data: {
url: x,
tit: y
},
success: function() {
alert( "Stored!");
location.reload();
}
});
});
As #Musa said, it's also better to supply a data key to the $.ajax call to pass your field values.
Inside your form submit handler, you have access to the form element through the this variable. You can use this to give your selector some context when searching for the appropriate inputs to pass through to your AJAX data.
This is how:
$("form").bind('submit',function(e) {
e.preventDefault();
// good practice to store your $(this) object
var $this = $(this);
// you don't need to make your selector any more specific than it needs to be
var x = $this.find('input[name=hidden_url]').val();
var y = $this.find('input[name=hidden_title]').val();
$.ajax({
url: 'save_storage.php',
data: {url:x, tit: y},
success: function() {
alert( "Stored!");
location.reload();
}
});
});
Also, IDs need to be unique per page so remove your id attribute from your inputs.
I've created a function for a standard checkbox in php, it's called cbox as well as a standard input box called inp.
<tr><td><?php cbox('charge_cc'); ?> Charge CC? Amount $ <?php inp('charge_amt'); ?></td></tr>
If there is an amount entered into the 'charge_amt' inp field the checkbox needs to be checked as well before they post/submit.
If no amount has been entered into the input field than they do not need to check the box and can proceed to fill out the rest of the form and submit. I'm uncertain on how to accomplish this because i think my php functions for cbox and inp are breaking my jquery/javascript.
As of now i've tried a few variations:
<script type="text/javascript">
function validate(){
if (document.getElementById('charge_cc').checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
No avail, any help would be greatly appreciated.
<td><input type="hidden" name="charge_cc" value="0" class="charge_cc">
<input type="checkbox" id="charge_cc" name="charge_cc" value="1" class="charge_cc"> Charge CC? Amount $ <input type="text" id="charge_amt" name="charge_amt" value="" size="8" maxlength="6"></td>
If all you need is to check/uncheck the checkbox depending on an entry in the charge_amt text-input, I'd suggest:
$('#charge_amt').keyup(function(){
var that = this;
$('#charge_cc').prop('checked', function(){
return that.value.length;
});
});
JS Fiddle demo.
If you want to prevent the user un-checking the checkbox once there's a value in the text-input:
$('#charge_amt').keyup(function () {
var test = this.value.length;
$('#charge_cc').prop({
'checked': test,
'disabled': test
});
});
JS Fiddle demo.
use jquery... if you have a checkbox with an id of charge_cc, this should work
if($("#charge_cc").prop("checked")) ...
jsfiddle with your html and alerts: http://jsfiddle.net/kmV9m/
$(function () {
$('#charge_amt').on('change', function () {
var amount = $(this).val();
if (amount.length > 0) {
$('#charge_cc').prop('checked', 'checked');
} else {
$('#charge_cc').prop('checked',false);
}
});
})
Using a bit of jQuery here to do the work for you should do the trick.
http://jsfiddle.net/devlshone/2HZFE/
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!!
}
Ive got textarea area on each table row with unique ID .
How to retrieve that unique id with javascript?
PHP:
$query = $db->query("SELECT * FROM bs_events WHERE eventDate = '".$date."'");
while($row = $query->fetch_array(MYSQLI_ASSOC)){
echo '<textarea id=\"att_name_" . $row['id'] . "\" style=\"width:300px\"></textarea>";'
}
PHP OUTPUT:
<textarea id="att_name_1" style="width:300px">
<textarea id="att_name_2" style="width:300px">
<textarea id="att_name_3" style="width:300px">
jQuery:
$(document).ready(function(){
$("#book_event").submit(function(){
id = event.target.id.replace('att_name_','');
$.post("Scripts/book_event.php", {
att_name: $("att_name_"+id).val(),
}, function(data){
if(data.success) {
$("#err").text(data.message).fadeIn("slow");
}
}, "json");
});
});
It looks to me like you're naming your textareas to correlate to the database entries, then trying to make updates and pass those values back. Assuming the textareas are in the form you're submitting, you can use:
$('#myform').submit(function(e){
// find each of those text areas
$(this).find('textarea[id^=att_name]').each(function(i,e){
//
// from here-in, e now represents one of those textareas
//
// now submit the update
$.post('Scripts/book_event.php',{
att_name: $(e).val()
},function(data){
if (!data.success)
$("#err").text(data.message).fadeIn("slow");
},'json');
});
e.preventDefault();
});
Ideally though, if you're looking to use AJAX to push updates/changes back to the server, you may look in to .serialize() and push all forms back. Then, on the server-side you'll get the standard $_POST['att_name_1'] values that you can use for your actual updating. e.g.
// .serialize() example
$('#myform').submit(function(e){
$.post('Scripts/book_event.php',$(this).serialize(),function(data){
if (!data.success)
$("#err").text(data.message).fadeIn("slow");
});
e.preventDefault();
});
To solve your problem, you can use each()
$(function()
{
$("textarea").each(function()
{
var textarea_id = $(this).attr('id');
});
});
I don't fully understand the question.
If you want a list of the ids, how about something like:
$(document).ready( function ( ) {
var textareas = new Array();
// Run through each textbox and add the id to an array
$("textarea").each( function( ) {
textareas.push( $(this).attr("id") );
});
// Print out each id in the array
textareas.forEach( function(i) { alert(i); });
});
(that's untested and probably not the quickest way - I'm a bit out of practice)