How does onchange carry selected text and hidden value? - javascript

I have a dynamically populated PHP dropdown menu that gathers the following information from the database:
echo '<option value="'.$image['id'].'">'.$image['description'].'</option>';
I then have a JavaScript function that shows the selected text - description in an input box for editing and then on submit update back into the database.
Question: Is there away using JavaScript that I could pass the id and description together but only have the description show in the input box for editing?
$('#captionSelect').change(function(){
$('#captionInput').val($("#captionSelect option:selected").text()).show();
});

you can try this.
$('#captionSelect').change(function(){
$('#captionInput').val($("#captionSelect option:selected").html()).show();
});
Thanks.

hello jess Try this out....
$('#captionSelect').change(function(){
$('#captionInput').val($("#captionSelect").val());
});

You would need to add a hidden form field to your form.
Then you can use:
$('#captionSelect').change(function(){
var $selected = $("#captionSelect option:selected");
$('#hiddenField').val($selected.val());
$('#captionInput').val($selected.text()).show();
});
I added the $selected to avoid multiple look-ups.

Related

Sharepoint Multiple Value Lookup Value

I hope someone can help me out here.
I have a SharePoint list with a Choice type lookup field.
I'm able to retrieve the selected value with the code below.
$("select[title='My field name']").change(function()
{
alert($(this).val());
} );
However this won't work when the field is set to "Allow multiple value".
If this options is enabled instead of the drop-down box an add/remove option is displayed. How can I get the selected value in this case?
Any help would be appreciated.
The change function is not getting fired when using multiple values Lookup field.
Try to use "dblclick" event :
$('select[Title = "SelectTitle"] option').dblclick(function() {
alert( "Handler for .dblclick() called." );
});
otherwise, you can add a click event to the "Add" button.
Hope this help!
You need to try this code.
$(this).options[$(this).selectedIndex].value

JQuery getting the closest element and filtering children

I have 3 forms with IDs ( form1 , form2 , form 3). every form has its own different drop down lists (drop1, drop2) and submit button.
When you click submit button in every form . It checks which option (in the drop down list of the same form) is selected . To find the exact selected Option I use this code :
$(".submitButton").each(function(){
$( this ).click(function(){buttonAddClicked(1)});
});
function buttonAddClicked(FormID){
$('form'+ FormID +' *').filter('.MyDropDownList').each( function(){
var selOption=$(this).find('option:selected');
}
Till now everything is working fine. I get the selected option with no problems at all.But, when I make some modifications problems happens.
On document ready, I copy form1 html . So, form1 is duplicated with the same id.
--Let's say that I have form1A , form1B--
When I press submit button in form1A or form1B the code always go to the selected option in form1A. This problem is killing me .
How can I modify my code to catch the form closest form . I tried some techniques but didn't work . The problem is in using ('*') with filter with closest.
Or if There's another solution to solve this I would be very thankful for you guys .
Thank you .
Edit: I can Get the closest form easily , but how to loop (each) on that form Drop-Down-Lists,
The problem is for all button clicks you are passing 1 as the form id.
There is no need for that, assuming the button is within the form then, you can use .closest() to find the form which contains the button then use .find() to find the select element and .val() to find its selected value as shown below
jQuery(function () {
$(".submitButton").click(function () {
var $form = $(this).closest('form');
var selectedValue = $form.find('.MyDropDownList').val();
//do whatever you want to do with the selectedvalue
//if you have multiple elements and wants to have an array of values
var selectedValues = $form.find('.MyDropDownList').map(function () {
return $(this).val()
}).get();
});
})
First, you should never have duplicate IDs in the document. It causes problems with assistive technology. So the best solution is to modify the ID when you duplicate the form.
However, you can use jQuery's closest to find the closest parent http://api.jquery.com/closest/
function buttonAddClicked(){
var selOption = $(this).closest('form').find('.MyDropDownList').val();
}

How to fetch the value from td tag & show this value in a textbox in another page in php?

I have 2 pages Manage.php & edit.php
in manage.php, I have an HTML table created with dynamic data and cannot predict the number of rows in it. Each row has a name column , edit button & delete button.
What i want that when i click on any edit / delete button its corresponding value of name column
should be displayed in textbox in edit page using php????
Thanks in advance
You need to use jquery for this.
Try
$('.buttonclass').on('click', function () {
var column_name= $(this).closest('tr').next().find('input').val();
});
Of course this assumes that the first column is the name column and is looking in to a element.
You can change it to .find('td').html();
You have to bind primary key to the edit and delete button for this particular record, then you have to pass this id/name to the edit page and assign it to that text box. if you are passing only id then you can make select query for selecting name.
try this:
i assume your list is in manage.php:
pass related id and get it into another page.
Edit
Delete
and in edit.php :
<?php
$id = $_REQUEST['id'];
$mode = $_REQUEST['mode'];
if($id !="")
{
if($mode == "edit")
{
//fetch data using id and disply it into your textbox
}
}
?>
and if you want additional security use base64_encode and base64_decode.
example:
<?php
$id = "1";
$encodeid = base64_encode($id);
?>
Edit
and in second page
<?php
$id = $_REQUEST['id'];
$decodeid = base64_decode($id);
?>

jQuery Copy text field's value from a different form into another form's text field

I have two forms.
I want to copy the value of one of the text fields in form 1 into another in form 2.
Text field names and ids are different.
How can I achieve this?
This didn't work:
document.getElementById('name').value = document.getElementById('user').value;
Thanks!
If you're asking for jQuery you could try:
$("#name").val($("#user").val());
http://jsbin.com/exudif/2/
$(document).ready(function()
{
$('#btn1').click(function()
{
$('#field2').val($('#field1').val());
});
});
To get the value using jquery .it has to be done this way .
Also make sure you have given id to the input fields .
like this: <input type='text' name='user' id='user' >
Then only this code will work properly
$(document).ready(function()
{
$('#buttonElement').click(function()
{
$('#name').val($('#user').val());
});
});

jQuery serialize remove empty Select

I have a big form, that will be serialized by a jQuery function.
The problem is that I need to remove from this form before being serialized all the empty values.
I found a way to successfully remove all the empty input text fields, but not the selections.
It does not work properly with select dropdowns.
Ceck below:
echo "<script type=\"text/javascript\">
$(document).ready(function() {
$('#submForm').validate({
submitHandler: function(form) {
// Do cleanup first
$('input:text[value=\"\"]', '#submForm').remove();
$('select option:empty', '#submForm').remove();
var serialized = $('#submForm').serialize();
$.get('".$moduleURL."classes/DO_submission.php', serialized);
window.setTimeout('location.reload()', 8000);
return false;
form.submit();
}
})
});
It should completely remove the dropdown selections where the values are empty. Not only the options but the entire select box should not be included in the serialize function.
How do I achieve this?
$('select option:empty', '#submForm').remove();
This code is not working as it should..
First, a select can not have an empty value. It will default to the first option if the selected attribute is not set.
Second, $('select option:empty') selects the empty options. To do something, an option should have a value, so afaik the selector will never work.
What you need to do is check all selects to see if they have a different value than their default, and if it is not the case, remove them.
If with 'empty select' you mean that the user has not chosen a 'valid' option (for example the fist option of a select is <option value=''>Select your value</option> )why don't you iterate on the select and check their value?
$('select').each(function(){
if ($(this).val() === ''){//this assumes that your empty value is ''
$(this).remove();
}
});
EDIT - sorry for the error, i missed the last parenthesis, i tried it and it works for me
I would just instead of serlizing the the whole form I would use jquery Form and then all you have to do is call
$('#submForm').ajaxSubmit({/.../});
Try
$('select option:selected:empty').parent().remove();
Edited after reading Nicola's comment.

Categories

Resources