Say I have this div block:
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
I need to the select the form inside this div. I am able to select the div by $('#some_id') but when I try to select the form by $('#some_id').find('form') (or get or $('#some_id:form')) I get this error:
Uncaught TypeError: $(...).find is not a function
Any possible solution?
There is nothing wrong with what you attempted, provided that jQuery is properly included in your page and you are properly referencing it with $ or jQuery if it is in noConflict mode.
console.log(
$('#some_id').find('form').get()
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some_id" style="display: none;">
<form action="someAction" method="post">
<input type="hidden" name="some-name" value="some-value">
</form>
</div>
You don't want a : to select the child you want >
Your selector should look like this:
$('#some_id > form')
Also make sure you are including jQuery, it looks like your code cannot find it.
Related
I have the following script used in html.twig page:
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/external/jquery/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jeoquery.js')}}"></script>
<script type="text/html" id="my_prototype">
<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label for="my_date">Date</label>
<input type="text" id="my_date" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>
</script>
My question is: How can I select "my_date" in jquery ? I wrote this, but it doesn't work:
$('#my_date').datepicker();
Thanks for your help,
Can you do the same with a jQuery object rather than a prototype?
e.g.: (I removed the id attributes so you can have more than one)
var $proto = $('<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label>Date</label>
<input type="text" class="date_field" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>");
This gives you a DOM structure you can insert where you need to.
Plus you can use
$proto.find('.date_field').datepicker();
...or you may have to insert it first and then call the datepicker extension.
I'm guessing you've put these tags between script tags because you're using it as a template.
Applying jquery-ui datepicker works on actual dom elements.
So you need to first apply your template and generate the "real" elements, then apply the datepicker.
Edit: and watch what happens with the id, when you generate multiple forms, you shouldn't have the same id multiple times. If it's transformed in something like "my_date_1", "my_date_2", maybe you're better off using a dedicated class for identifying the datepicker inputs instead of the id.
same behavior to multiple elements.
// html
<div id="">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div id="">
<input type="hidden" value="2595" />
</div>
<div id="">
<input type="hidden" value="2563" />
</div>
now i want to check which div to clicked to add friend and to take the hidden value and send it to server using this code
$().click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
I'v tried using it like this
$("#div1,#div2,#div3").click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
but i had more element the code grow and it's not dynamic, also the same thing if i want to make behavior to like button ,i have multiple like button how should i know which post and which like
Your selectors are all wrong. The div elements do not have any id attributes, so selecting them as you are will not work. Secondly, you want to use :hidden or input[type="hidden"] to select the hidden inputs. Finally, to get the value of a form element, use val(), not value().
If you want to make this dynamic, so the code will work for x number of div elements, use a class to identify them and then this within the handler to access the element that raised the event, like this:
<div class="foo">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div class="foo">
<input type="hidden" value="2595" />
</div>
<div class="foo">
<input type="hidden" value="2563" />
</div>
$('.foo').click(function(){
x = $(this).find('input[type="hidden"]').val();
alert(x)
});
Example fiddle
try
<div id="div1">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$("[id^=div]").click(function() {
$x=$(this).find("[type=hidden]").val();
});
or
<div class="classSelector">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$(".classSelector").click(function() {
$x=$(this).find("[type=hidden]").val();
});
I've got this really frustrating problem. I want to submit a form with Javascript and no matter what I try I always end up getting Uncaught exception: TypeError: Cannot convert 'document.getElementById('loginForm')' to object.
I've been staring at this code for some time now and I really can't figure it out. I'm sure it's really simple, but I just can't see the solution.
Here is my code:
<form method="post" action="do.php?a=signin" id="loginForm">
<input name="usr" class="test" placeholder="Användarnamn" type="text" />
<input name="pwd" class="test" placeholder="Lösenord" type="password" />
</form>
<span class="test"><img src="gfx/ico/fb.jpg" alt="" /> Logga in via Facebook</span>
<span class="test"><img src="gfx/ico/Unlock.gif" alt="" /> Logga in »</span>
<script type="text/javascript">
function doLogin() {
document.getElementById('loginForm').submit();
}
</script>
What am I missing!?
The solution was that I accidentally had entered another <form> earlier in my code. I removed it and now it works like a charm!
first you have to add name attribute to your form
<form name="loginForm" ...>
and then apply below.
document.forms["loginForm"].submit();
OR
document.loginForm.submit();
tip:
You can not have the buttons named submit and use submit(). The
buttons override the method. Rename the buttons to something else and
it will work.
<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?
You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />
Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/
This is a form validation for jquery:
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
I need something like that but the tips has to appear when I select the input text form by clicking on it and has to dissapear when I select another input text form.
Is there a way to do this with jquery, mootools, scriptaculus or any other library ?
Thanks ^_^
In jquery, I'd do something like this:
$('input').focus(function(){
$(this).sibling('div.form_tooltip').show();
});
$('input').blur(function(){
$(this).sibling('div.form_tooltip').hide();
});
corresponding html:
<div class="form_input">
<label for="..">label</label>
<input type="text" name="" id="" value="" />
<div class="form_tooltip" style="display: none;">
Here goes the html that appears in the tooltip, you probably want this div to be positioned relatively to the div.form_input.
</div>
</div>