<ul><li class="rjust">
Edit
<input type="hidden" class="video_title" value="test123">
<input type="hidden" class="video_description" value="Sample Description">
<input type="hidden" class="video_tags" value="Adjust">
<input type="hidden" class="video_tags" value="TXV">
</li>
<li class="rjust">
Edit
<input type="hidden" class="video_title" value="another_test">
<input type="hidden" class="video_description" value="descriptme agian">
<input type="hidden" class="video_tags" value="tag1">
<input type="hidden" class="video_tags" value="tag2">
</li></ul>
When I click on the "Edit" a href, I want to get all the values of the class "video_tags" nearest to it.
Example when the 1st "Edit" is being click (id="4f80a4b5"), I want to get all the value of the "video_tags" which is "Adjust", "TXV".
On the other hand, when I click on the other "Edit" (id="235235"), all the value of "video_tags" that I should get is "tag1","tag2" since it obviously it is near to it.
Take note that the class "video_tags" is flexible, it could have many classes, my example has just only 2 video_tags per li.
Kindly please help me with this matter. Any help would be greatly appreciated and rewarded! Thanks :)
You can try this
var tags;
$(".edit-video-lightbox").click(function() {
tags = [];
$(this).siblings('.video_tags').each(function() {
tags.push($(this).val());
});
});
There is a .siblings() method for this in jQuery:
$('.edit-video-lightbox').click(function() {
$(this).siblings('input.video_tags').each(function() {
//this keyword refers to sibling element
//user this.value to retrieve element's value
});
});
Yeah, I know, three answers already. But just wanted to highlight both the new on method introduced in jQuery 1.7, as well as the nifty map method from jQuery 1.0:
function getVal(elem) {
return elem.value;
}
function getVals(e) {
var tags = $(e.target).siblings('.video_tags'),
values = $.map(tags, getVal);
e.preventDefault();
// do whatever you want with `values` here
}
$('ul').on('click', '.edit-video-lightbox', getVals);
Related
hy, i have a problem with a form. i know the question is simple but i can not have a solution. Well, this is my form:
<form id="search" method="post" action="cerca_redirect2.php" >
<select id="tipo" name="tipo"class="chzn-select" style="width:165px;" tabindex="1" >
<option value="http://case.vortigo.it/vendita-immobili/index.php"> Vendita</option>
<option value="http://case.vortigo.it/affitto-immobili/index.php">Affitto</option>
</select>
<input id="field" name="field" type="text" value=""/>
<input id="submit" type="submit" value="" />
</form>
my goal is when i select "Vendita" and i submit the form i have to go to the url in the select "Vendita", for each select. someone can help me? thanks
In the server side php code, do something like this
if (isset($_POST['tipo']) && !empty($_POST['tipo']))
{
header('Location: ' . $_POST['tipo']);
}
Note: This is a very basic version, you will want to ensure the url is valid by either maintaining a list of urls on the server, or something similar.
There are many different ways, but you can for example use following:
See the onsubmit part in the form definition
<form id="search" method="post" action="cerca_redirect2.php" onsubmit="this.action=document.getElementById('tipo')[document.getElementById('tipo').selectedIndex].value" >
If I understan your question correctly, you need a way to change the action value to the selected option's value
this is how to do that
$(document).ready(function(){
$("#tipo").on("change", function(){
$("#search").attr("action", $(this).val());
});
});
DEMO: http://jsfiddle.net/6ybMP/
You want to change the action of the form based on the select? The following should be along the lines of what you want.
$('#tipo').on('change', function() {
var newAction = this.val();
$('#search').prop('action', newAction);
}
UPDATE
You will want to wrap this code in $(document).ready() so that the event will be registered after the DOM has been loaded.
Like so:
$(document).ready(function() {
$('#tipo').on('change', function() {
var newAction = this.val();
$('#search').prop('action', newAction);
}
});
I have generated multiple text boxes using PHP with name="student[<?php echo $StudentID ; ?>]".
Now on a button click i want to change the value of all these text boxes using jquery.
How do i do this ? Please help.
You can use the Attribute Starts With selector, to look for student[ at the beginning of the name attribute:
$('input[name^="student["]').val('the new value');
It's probably unnecessary to include the [ at the end, and name^="student" will be sufficient, assuming you don't have other inputs with names like student_name or the like.
// If no conflicting named inputs, use
$('input[name^="student"]').val('the new value');
HTML
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<button id="button">Change</button>
JavaScript
$('#button').click(function() {
$('input[name^="student"]').val('some value ');
});
JSFiddle
You can also simply add a class that is unique to all of those text boxes (i.e. changableTextBox) and then select it with that and change them all at once. It's also helpful for the future if you need to adjust some styling on all of them at once. Just declare that class in CSS and you're styling.
<input type="text" class="changeableStudentTextBox" id="student[11]" />
<input type="text" class="changeableStudentTextBox" id="student[23]" />
<input type="text" class="changeableStudentTextBox" id="student[45]" />
<input type="text" class="changeableStudentTextBox" id="student[66]" />
<script type="text/javascript">
$('#button').click( function() { $('.changeableStudentTextBox').val('hi!'); });
</script>
I created an input box and says "comments?" before the user enters anything in it.Code;
<input type="text" name="saysome" value = "comments?"/>
But, i want to delete this "comments?" as soon as it is clicked.I am trying to do input box just like the search box in here, actually exaclty same. How can i do that?Can it be done by only javascipt? :(
Thanks
You can use the html5 placeholder attribute found here:
HTML5 Specs
For example:
<input type="text" name="saysome" placeholder = "comments?"/>
You could also take a javascript approach for browsers that do not support HTML5.
Simple method that will clear it anytime the box has focus, and not if the user has entered anything into it
<input type="text" name="TB" value="Please Enter.." onfocus="this.value==this.defaultValue?this.value='':null"/>
As other commenters mentioned, you should check out placeholder. To answer your question though, this method will remove the text on mouse click if the user has not already entered something. This assumes that the id of the input is textbox. You will have to change it to whatever you have or else assign the input an id.
<input id="textbox" type="text"/>
and the JS:
document.getElementById('textbox').onclick = function()
{
var box = document.getElementById('textbox');
if(box.value==box.defaulValue)box.value =='';
}
<input type="text" name="saysome" onblur="if(this.value=='') this.value='comments?';" onclick="this.value=''" value="comments?" />
See this example # http://x.co/Z2pa
Non-jquery:
onClick="clearComments()"
function clearComments() {
commentInput = document.getElementById("commentsId");
if(commentInput.value == 'comments?') {
commentInput.value = '';
}
}
Without jQuery:
Give the input an ID, and clear its value using an onclick event.
<input type="text" name="test" id="test" value="test" onclick="if(document.getElementById('test').value=='test')document.getElementById('test').value='';">
Also supports older browsers that don't use HTML 5.
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.
I toggle a div using something like this -
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3
<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div>
JAVASCRIPT
$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();
$('input[name="myRadio"]').change(function() {
var selected_type = $(this).val();
switch(selected_type) {
case "myDiv_1":
$('#myDiv_1').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_2":
$('#myDiv_2').slideDown();
//if others are visible just slideup
$('#myDiv_1').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_3":
$('#myDiv_3').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_1').slideUp();
break;
}
}
);
This works fine. My question is how I can improve it and make it more flexible as if I have to MORE divs I have to modify all cases of switch.
Also should enclose the switch functionality in a function and bind this function to events such as click and change (just to ensure that toggling works)??
Thanks for your help.
This works, I just tested it.
<script type="text/javascript">
$(document).ready(function(){
$('.MyDiv').hide();
$('input[name="myRadio"]').change(function(){
var selected = $(this).val();
$('.MyDiv').slideUp();
$('#'+selected).slideDown();
});
});
</script>
The radio buttons should look like this, where the value is the id of the element that should be shown.
<form action="example.com" method="post">
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
<input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>
And finally, the divs should look like this, all having the class MyDiv:
<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>
The following is based on the code you pasted here - before using, read below:
$("div").hide();
$("input[name='myRadio']").change(function(){
$("div:not(#"+$(this).val()+")").slideUp();
$("div#"+$(this).val()).slideDown();
});
Before Using...
I would suggest you add a class to each of the collapsable panels, maybe .panel. And then update the selectors to modify only div.panel instead of every div on the page.
your solution doesn't work in IE 8-- actually has the opposite behavior. Use the "click" function instead of "change"
$('.myDiv').hide();
$('input[name="myRadio"]').click(function(){
var selected = $(this).val();
$('.myDiv').slideUp();
$('#'+selected).slideDown();
});