jQuery - the function doesn't get an ID/class - javascript

This function doesn't get the ID or class (first line), so the code is applied to all the fieldsets. For me that's not a big problem, but I would like to focuse the code on two specific IDs to make the code more compatible for plugins.
$('#feedburner_widget').ready(function() {
$('input').focus(
function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$('input').blur(
function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
Basically, this code adds a class to a fieldset when the user clicks on the input field. The ID is on the first line, but the code applies the effect to all the fieldsets. And it works exactly in the same way if I change '#feedburner_widget' to document. What I'm doing wrong? Thanks.
Edit: And this is the HTML code:
<form id="feedburner_widget" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_attr($user); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<fieldset >
<input type="text" class="field" name="email" placeholder="<?php echo esc_attr($text); ?>" />
<input type="hidden" value="<?php echo esc_attr($user); ?>" name="uri" />
<input type="hidden" name="loc" value="<?php bloginfo('language'); ?>"/>
<span>
<input type="submit" value="" />
</span>
</fieldset>
</form>

When you do $('input'), you are asking jQuery to do a global search in the whole document. It does not 'remember' that you have just fetched the #feedburner element.
To search for only the elements in the #feedburner element, you could use the find() function on the jQuery object, like this:
$(document).ready(function() {
var $inputs = $('#feedburner_widget').find('input');
$inputs.focus(function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$inputs.blur(function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
In this particular case, you could also just alter the CSS selector to search directly for inputs inside the #feedburner_widget like this: $('#feeburner_widget input') If that element was already in a variable in your code, however, you should use the find method.

Related

display next span when filling in input of previous span

I have 2 input fields in each span. when the first span of the row is filled with some date, the next span should be visible.
<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
for ($i=1; $i<=10; $i++)
{
?>
<span name="datalist_2field" class="display_none xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
}
?>
jQuery:
$('input[name="inputfield_smpc"]').keyup(function(){
$(span.xyz).next().removeClass('display_none');
$(span.xyz).next().addClass("display_inline");
});
Unfortunately it doesn't work. What's wrong? Thanks!
I'd recommend the change() event instead of keyup(). The reason you shouldn't use keyup() is because if a user inputs a value using autofill, it will not fire keyup(). However, autofill does fire the change() event, and your verification script will run, and the input will be verified.
As for why it isn't working, you have
.removeClass('display_none')
but the item you're trying to select doesn't have a class name called 'display_none'
if your trying to change the css without using another class you can use something like this
.css("display", "block");
display_none need to be added to second input instead of the span based on your requirement.
Code sample for your first span:
HTML
<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right display_none" name="inputfield_evmpd" value=""></input>
</span>
jQuery
$('input[name="inputfield_smpc"]').keyup(function(){
$(this).next().removeClass('display_none');
$(this).next().addClass("display_inline");
});

Access sibling variable of text-field

I have a simple form, just a single text field containing a email from a MySQL database. The user has 2 buttons one can completely update the email with what they replace it with or they can choose to return the email to a default state i.e. the original email. It all works OK if you have the 2 buttons immediately 'in-situ' with the relevant text-field. But if you put the 'reset' button in a separate table cell, the 'onlick' set-email-back-to-default function stops working, and I don't understand how to fix it.
It will work like this because the reset button is slap-bang next to the text field:
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
<input id="reset-cc" name="add" type="button" value="Set to default" />
Here's the JavaScript:
$(document).ready(function() {
$('#reset-cc').click(function() {
$(this).siblings('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
$('#update_cc').submit();
return false;
});
But if I place the reset button in a separate table cell as follows the function ceases to work as if it can no longer access the text field:
<td>
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
I assume I need to modify the JavaScript so it can still access the text field even though it is now separated by a table-cell but I don't know how to do it.
Your problem lies here:
$(this).siblings('input[name="cc_email"]')
By moving the input button into a different TD it is no longer a sibling (as the other answers have indicated). You may want to just give the button an ID and reference it that way:
//this bit |
// v
<input id="cc_email" name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
//...
$("#cc_email")...
Which will be easier than making convoluted parent/find calls. This button is unique, is it not?
The .siblings() function searches in a collection of siblings within the same parent. If you put them into different parents then they are not siblings. Try replacing it with something like:
$(this).parent().prev().find('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
If the input will always be in the same tr as the button, search for the input field within the row:
$('#reset-cc').click(function() {
$(this).closest('tr').find('input[name="cc_email"]').val('original#example.com');
$('#update_cc').submit();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="cc_email" type="text" value="loaded#example.com" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
</tr>
</table>

Send value of div on form submit

I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.
Here is the "textarea":
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
$_POST['dash_new_shout_textarea'] : '' ?>"></div>
The form is just a normal form with method=post.
Here is the php:
$newShoutTextarea = $_POST['dash_new_shout_textarea'];
Thanks for the help
I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.
HTML
<form onsubmit="prepareDiv()">
<div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
<input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>
Javascript
function prepareDiv() {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}
Your PHP remains the same.
What you can do is this:
<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>
the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable
You can add a hidden input to your form and update it with jquery
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="></div>
<form id="target" method="post" action="destination.php">
<input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
<input type="submit" value="Submit">
</form>
script
$("#target").click(function() {
$("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});
What you can do is use jQuery for this.
DEMO HERE
Proper scenario would be:
*Get value from div and save it into hidden field. *
This has to be done when you submit form:
$(function () {
$("#send").on("click", function () {
$("#hiddenfield").val($("#dash_new_shout_textarea").text());
alert($("#hiddenfield").val());
$("form#formID").submit();
});
});

replaced Button wont work

i have this html form
<form action="" method="post" name="login_form">
Email : <input type="text" id="email2" name="email" /><br />
<span id="passwordT" >Password : </span>
<input type="password" name="password" id="password2"/><br />
<input type="button" id="submit_botton" value="Login" />
<div><input id="forgot" type="button" value="Forgot your Password?" /></div>
</form>
and the javascript here
var forgot = $('#forgot');
var forgot2 = $('#forgot2');
forgot.click(function() {
$('#password2').hide();
$('span#passwordT').hide();
$('input#submit_botton').prop('value', 'Reset Passowrd');
$('input#forgot').replaceWith('<input id="forgot2" type="button" value="Login here" />');
});
$('input#forgot2').click(function() { // this function didnt want to work
$('input#forgot2').prop('value', 'Forgot your Password?');
$('#password2').show();
$('span#passwordT').show();
$('input#submit_botton').prop('value', 'Login');
});
HERE JS-DEMO
what i want is :
when i click on second function i will get back the buttons as they were in first time.
I tried to make this second function inside the first but what i got is the function works but only one time , i mean if i click again to reset password will not work.
thanks for the help.
Your problem is that you're trying to attach an event handler to an element that doesn't exist yet. That's not possible with direct event handlers. Use delegated events instead.
$(document).on('click','#forgot2', function(){ ... });
document can be replaced with any #forgot2 container that exists at binding time.
As a side note, take into account that when you use selectors by id (e.g #forgot2) it's not necessary to add anything else since an id identify one and just one element (repeated ids are not allowed). So this selector input#forgot2 is not wrong but more complex than necessary.

Enable checkbox if text field is not empty with inconsistent id

Purpose is to have checkboxes disabled when the page loads, and remain greyed out until textbox is filled.
<input type="text" name="<%=commentID%>" />
<input type="checkbox" name="<%=SkipID%>" value="N" disabled/>
I tried to do something like
<input type="text" name="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>') />
function userTyped(commen){
if(this.value.length > 0){
document.getElementById(commen).disabled=false;
}else{
document.getElementById(commen).disabled=true;
}
}
But it did not work. I am assuming because of the inconsistency of the name, but I have to have that.
You haven't given id to your html elements and is trying to use getElementById, which will return null. Javascript engine will not be able to set disabled attribute of null. Try setting id attribute, for elements as given below.
Also in your userTyped function you are referencing this. this here is the window object and not the input element. You need to pass the reference to input element to make this work, like this onkeyup="userTyped('<%=SkipID%>', this)"
Please find a possible correction below:
<input type="text" name="<%=commentID%>" id="<%=commentID%>" onkeyup="userTyped('<%=SkipID%>', this)" />
<input type="checkbox" name="<%=SkipID%>" id="<%=SkipID%>" value="N" disabled/>
/** commen is the id
* e is the input element
**/
function userTyped(commen, e){
if(e.value.length > 0){
document.getElementById(commen).disabled=false;
}else{
document.getElementById(commen).disabled=true;
}
}
jsFiddle here: http://jsfiddle.net/deepumohanp/dGS9H/

Categories