Is there a way to post both a select options value and it's content:
<option value="post this">post this too</option>
Not through HTML alone. You could do it with JQuery and some Ajax.
Example:
var optionValue = $("#yourSelectId").val();
var optionText = $("#yourSelectId option[value='" + optionValue + "']").text();
You can do it only with Javascript
JQUERY Example:
<form id="myform">
<select><option value="post this">post this too</option></select>
</form>
$("#myform").submit(function (){
$("#myform select option).each(function (element){
$(element).val($(element).val() + '||' + $(element).text());
});
});
For the content, you can post with PHP. For the value, I recommend this JavaScript:
function getValue()
{
var value = document.getElementById("optionid").value;
return value;
}
You can add a hidden input which will be populated with selected text from select control, for this you can use for example onchange event to which you will attach a javascript method.
Related
<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.
I have a select box which is created with PHP like:
echo " <option value=\"".$row['CatId']."\">".$row['CatNaam']."</option>";
Where catid is the id which needs to be sent.
Under the select box I have a jQuery clickable div like:
<div id="addtag" style="cursor: pointer;" onclick="clicktag();">
In my script I have a function clicktag like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added ");
}
</script>
What I want to do is alert the selected value(the catid) so the function must do like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+tagid);
}
</script>
But how can I get tagid? I tried a lot of examples but can't get it working.
You need a reference to the <select> element in order to get its value. How you get that kind of depends on how the HTML looks, but the easiest way is to give it an ID (if it doesn't have one already) and select it using that:
<select name="yourSelect" id="yourSelect">
// option tags here
</select>
Then the code:
function clicktag() {
var tagId = document.getElementById('yourSelect').value;
// the rest of your code
}
try val()
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+ $('#yourSelectID').val());
}
Use the change event for the select box:
//where #selectBox is id of your select box
$('#selectBox').change(function() {
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
Use .val() to get the <select> element's current value.
Example:
<select name="mySelectElement" id="selectElement">
<option value="0">First element</option>
<option value="1">Second element</option>
...
</select>
<script type="text/javascript">
function onClick() {
alert('The selected value is ' + $('#selectElement').val());
}
</script>
$('#selectBox').live('change',function(){
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
The selected value is the catid you say
Put it in a var and it will works.
you can try to put this in your code
function clicktag()
{
$('#addtag').hide();
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
}
</script>
I'm newbie with jQuery. I Want to get value from these two textarea,
I have html like this and jquery below :
Html :
<pre>
<a id="send-thoughts" href="">Click</a>
<textarea id="message1" class="message">Hello</textarea>
<textarea id="message2" class="message">World</textarea>
</pre>
jQuery:
jQuery("a#send-thoughts").click(function() {
var thought= jQuery("textarea.message").val();
alert(thought);
});
Why only one value show up ? and how to get two value of textarea ?
http://jsfiddle.net/guruhkharisma/9zp9H/
var text = "";
jQuery("textarea.message").each(function(){
text += jQuery(this).val() + "\n";
})
Try thought = $('textarea').text()
i think this should work
or thought = $('.message').text();
Use the each() method.
jQuery("a#send-thoughts").click(function() {
jQuery("textarea.message").each(function() {
var thought= $(this).val();
alert(thought);
});
});
Check the online doc for more information: http://api.jquery.com/each/
.val(), like all the jQuery getters, returns the value of the first matched form-input element. You will have to use a .each() loop and concatenate the values:
jQuery("a#send-thoughts").click(function() {
var thought = '';
jQuery("textarea.message").each(function() {
thought += $(this).val() + ' ';
});
alert(thought);
});
<pre>
<a id="send-thoughts" href="">Click</a>
<textarea id="message1" class="message1">Hello</textarea>
<textarea id="message2" class="message2">World</textarea>
</pre>
jQuery:
jQuery("a#send-thoughts").click(function() {
var thought1= jQuery("textarea.message1").val();
alert(thought1);
var thought2= jQuery("textarea.message2").val();
alert(thought2);
});
I ve been trying to obtain the value of my form input elements, but I am just not having any luck with it.
I have the following form within a while loop in PHP, so there will be multiple forms.
<form method='POST' action=".$_SERVER['SCRIPT_NAME']." name='form_set_deadline' class='form_set_deadline'>
<input type='hidden' value='".$data3['unique_name']."' name='file_id' class='file_id' />
<input type='hidden' value='".$user_id."' name='client_id' class='client_id' />
<table>
<tr>
<td align='left'><input type='button' name='set_file_options' value='Submit' class='set_file_options' /></td>
</tr>
</table>
</form>
Now, I am trying to get the value of the hidden fields of jquery, but just don't know how to access the hidden field values. Remember, there are multiple of these forms on the page. Here is the jquery form, contained within a function.
function setFileOptions(){
$('.set_file_options').each(function(e){
$(this).unbind("click").click(function(e){
e.preventDefault();
//set form variables
var file_id = // DON'T KNOW HOW TO GET THE HIDDEN FIELD INPUT VALUE?
alert(file_id);
}); //END THIS CLICK FUNCTION
});
} //END MAIN FUNCTION
Thanks for the help/tips!
So after all the input received from you all, I have decided to use the following to get all the form data:
var form_data = $(this).closest('form').serialize();
Thanks again!
var file_id = $(this).closest('form').find('.file_id').val();
Alternatively, a pure JS solution:
var file_id = this.form.elements['form_id'].value;
A selector to select all <input type="hidden"/> elements:
var hiddens = $(this).closest('form').find(':hidden');
//hiddens.eq(0) = file_id
//hiddens.eq(1) = client_id
If you do not have anything attached to your classnames, I recommend to drop these attributes, and use the name-attribute selector:
var file_id = $(this).closest('form').find('[name="file_id"]').val();
Try this,
$(this).closest('form').find(':hidden'); //should get you the hidden fields inside the form
And there could be more than one fields so you may need iterate to get all the hidden fields,
var field_val = [];
$.each ($(this).closest('form').find(':hidden'), function (index) {
field_val [$(this).attr('class')] = $(this).val();
});
var file_id = $(this).closest('table').siblings('.file_id').val()
Have you tried:
var file_id = $('input[name="file_id"]').val();
Try this:
var fileid = $(this).parents('form').find('.file_id').val();
I was seeking help in a previous threat, and the advice lead me in a different direction. As such, the thread died. I've made a lot of progress, and I feel very close to my answer.
I have two files:
Local file: maps.php
Remote file: maps_append.php
maps.php has a form select tag. I need jQuery to get the value of whatever option is select and load the remote URL (maps_append.php) with maps_append.php?cmd=(value)
What I have is:
<form method="post" action="maps.php">
<td colspan="3">
<select id="cmdview" name="cmd">
<option value=""></option>
<option value="commdata" {if $cmdOn == "commdata"}selected="true"{/if}>Communications</option>
<option value="contacts" {if $cmdOn == "contacts"}selected="true"{/if}>Contacts</option>
<option value="enrollment" {if $cmdOn == "enrollment"}selected="true"{/if}>Enrollment</option>
<option value="all" {if $cmdOn == "all"}selected="true"{/if}>All Schools</option>
</select>
<input type="submit" name="doSwitch" value="Submit" />
</td>
<div id="append"></div2>
</form>
This is my HTML. My jQuery is:
<script>
$('#cmdview').change(function() {
//alert('Handler for .change() called.');
var str = "";
url = "maps_append.php?cmd=str";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$.post( url, { cmdview: str } ,
function( data ) {
var content = $( data );
$('#append').load(url);
})
.change();
});
</script>
The problem is my $_GET value (cmd) is always "str". It won't take the value of my select HTML. I can't figure out the syntax for it to great the select value.
All I need is str to = the value of whatever < . option . > is selected
EDIT::
I'd like to add that I know the $.post isn't needed now that I'm doing a _GET value. But, I don't know how else to format this... :(
change
url = "maps_append.php?cmd=str";
to
url = "maps_append.php?cmd=" + str;
Make sure you have proper indentation, or else you are going to get lost quickly. I have cleaned up most of your code. You were hard coding "str" in your url instead of concatenating the variable:
<script>
$('#cmdview').change(function() {
//alert('Handler for .change() called.');
var str = '',
url = 'maps_append.php?cmd=';
$('select option:selected').each(function () {
str += $(this).text() + ' ';
});
url += str;
$.post( url, { cmdview: str } , function( data ) {
var content = $( data );
$('#append').load(url);
}).change();
});
</script>
Also note that you are first doing a POST request to maps_append.php which will have both $_POST['cmdview'] and $_POST['cmd'] set to the options you sent, then once that script has returned a response, you make a GET request by using the load() method, which will then replace the HTML in #append. Not sure why there is that last change() at the end.
From what I can tell, it sounds more like you're trying to do something more like this:
<script>
$('#cmdview').change(function() {
var url = 'maps_append.php?cmd=' + $(this).val();
$.get(url, function(data){
$('#append').append(data);
});
});
</script>
I believe that what you're are trying to accomplish can be resolved with much simpler code. Try replacing your existing JavaScript with this:
$(function() {
$('#cmdview').change(function() {
$('#append').load("maps_append.php?cmd=" + $(this).val());
}).change();
});
This code is simply saying, when you change #cmdview load the contents of the file maps_append.php?cmd= with the value of #cmdview appended to the url. This should make it so you can access the value of #cmdview in your PHP code with $_GET['cmd'].