Is there a certain or special of dealing with hidden fields in jQuery? I am using a hidden input field and am not receiving a value. Obviously, my code is incorrect and would be grateful if someone could show me the error. many thanks
<input id="customer" name="customer" type="hidden" value="<?php echo $_SESSION['kt_idcode_usr']; ?>" />
$('#submit').click(function () {
var name = $('.uname').val();
var customer = $('.customer').val();
var department = $('#department').val();
var email = $('.email').val();
var position = $('.position').val();
var feedback = $('.feedbacknew').val();
var data = 'uname=' + name +
'&customer=' + customer +
'&department=' + department +
'&email=' + email +
'&position=' + position +
'&feedbacknew=' + feedback;
$.ajax({
type: "POST",
url: "feedback.php",
data: data,
success: function (data) {
$("#feedback").get(0).reset();
$('#message').html(data);
//$("#form").dialog('close');
$("#flex1").flexReload();
}
});
return false;
});
$('.customer').val(); ???
not ., #
result
$('#customer').val(); // works
try changing
var customer = $('.customer').val();
to
var customer = $('#customer').val();
you don't have such a class customer anywhere in this code
This line of code is wrong
var customer = $('.customer').val();
you have defined your hidden field by id, not by class, so you would need to use a # instead of a . on the selector
var customer = $('#customer').val();
The line you have here:
var customer = $('.customer').val();
...is looking for elements with a class called "customer". You don't have any such element. You have an element with an id of "customer". I suspect it will work if you simply change this line to:
var customer = $('#customer').val();
I'd suggest doing this for the rest of your input fields as well. Generally you'll want to identify them by id when collecting values to submit the form. Identifying them by class is typically more for things like styling different kinds of fields, binding event handlers, and so on.
note the difference:
alert($('.customer').val());
and
alert($('#customer').val());
. is for classes, see http://api.jquery.com/category/selectors/
I can see that for customer you are using jquery selector ".customer" which searches for an element with class name "customer" but your input has id equal to this, so:
var customer = $('#customer').val();
may I suggest serialize()?
Related
I have a form which I am submitting which captures the subject line which is a hidden field and has a value of 'Faulty Item'
https://jsfiddle.net/k8tnns73/
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item');
});
What i require is when the form is posted that the subject line 'Faulty Item' is captured like so but also the order number entered value is appended to the subject line on form submission.
I have tried the following but to no avail:-
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item')&&('#45354949').val();
});
is there a method in jQuery that will allow me to do this?
You can read them into variables and then do with them as you please:
$(document).ready (function(){
var faulty = $('#zendesk_field_zen_subject input').val('Faulty Item');
var otherField = $('#45354949').val();
// do what you would like with the two fields
//...
});
Assuming #45354949 is an order number and not a HTML element, you can do this.
$(document).ready (function(){
//Select the input
var subject = $('#zendesk_field_zen_subject input');
//Store order number in a variable
var orderNumber = '#45354949';
//Use this to obtain order number from an element instead
//var orderNumber = $('#myElement').val();
// Select the input and make the value faulty item + order number
var finalSubject = subject.val('Faulty Item '+orderNumber);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zendesk_field_zen_subject">
<input type="text">
</div>
you can use + instead of && to append the values as shown below.
I have added extra space in between the two values
$(document).ready (function(){
$('#zendesk_field_zen_subject input').val('Faulty Item') +' '+ $('#45354949').val();
});
i have research form with few questions and answers and i'm trying to catch ID from id of form element (radio, checkbox, etc..). HTML form is generated dynamically from MySQL, that is a reason why id's and name's have only common value "question".
I have inputs like this:
<input type="text" name="question[1]" id="question-1" value="">
<input type="radio" name="question[2]" id="question-2" value="1"> Foo
<textarea name="question[3]" id="question-3"></textarea>
And i need to catch number from id. E.g. catch number 3 from id="question-3". It is possible to do that?
There is my js code. When you change value of any form element with id started "question-", data will be post. It works, but i need detect number in ID element, because i would like to generate next one ajax request (GET) to remove answer (e.g. /research/delete-answer/?id=3).
$('[id^=question-]').change(function() {
var formId = <?= $this->form->id; ?>;
var dataString = $('[id^=question-]').serializeArray();
$.ajax({
type: "POST",
url: "/research/save/?id=" + formId,
data: dataString,
success: function(data, status) {
console.log('Saved [' + status + ']');
console.log('Data [' + dataString + ']');
}
});
});
Thanks for help.
id="[^-]+-(\d+)
Try this.See demo.
http://regex101.com/r/pQ9bV3/4
var re = /id="[^-]+-(\d+)/g;
var str = '<input type="text" name="question[1]" id="question-1" value="">\n<input type="radio" name="question[2]" id="question-2" value="1"> Foo\n<textarea name="question[3]" id="question-3"></textarea>';
var subst = '';
var result = str.replace(re, subst);
$('[id^=question-]').change(function(event) {
var id = $(event.target).attr('id').replace('question-', '');
should give you the number within the id of the element which triggered the change event if that is what you were looking for, I am not totally sure what you are asking.
I'm trying to allow users to add a list of 'favourites' to a text box but when adding more than one value it replaces the value already there. Can anybody help? Thanks this is my code:
var name
function getFavourite() {
name = "Student 1, ";
$('#output').val(name)
saveFavourites();
}
function getFavourite2() {
name = "Student 2, ";
$('#output').val(name)
saveFavourites();
}
function saveFavourites() {
var fav = $("#output").val();
if (fav !== "") {
localStorage[name] = $("#output").val();
$("#output").val(name);
}
}
function loadFavourites() {
var fav = $("#name").val();
if (name !== "") {
$("#output").val(localStorage[name]);
$("#name").val("");
}
}
using val will replace the existing value as you already noticed so i would do something like this if you want to add to that value.
$("#output").val($("#output").val() + ', ' + name);
At least if i understand you correctly. This would get the excising value and then add the new value to it (in this case with a comma but is not necessary)
Of course if you need the same element twice or more is better to assign it to a var instead of calling the selector twice.
I think you are looking into multiple select dropdown, something like this:
http://codepen.io/martynasb/pen/kawxq
You don't an text input, you want a select where you can select multiple values. In html, it's <select multiple>.
The plugin I know that provides the best experience for this is is Select2: http://ivaynberg.github.io/select2/#basics
And you don't have to load all the options right away, they can be fetched via ajax easily.
I have location name and location Id in database table. Using foreach loop i'm printing the values in checkbox in PHP. I have a submit button which triggers a javascript. I want the user selected all checkbox values separated by comma, in a javascript variable. How can I do this?
<!-- Javascript -->
<script>
function getLoc(){
var all_location_id = document.getElementByName("location[]").value;
var str = <!-- Here I want the selected checkbox values, eg: 1, 4, 6 -->
}
<script>
foreach($cityrows as $cityrow){
echo '<input type="checkbox" name="location[]" value="'.$cityrow['location_id'].'" />'.$cityrow['location'];
echo '<br>';
}
echo '<input name="searchDonor" type="button" class="button" value="Search Donor" onclick="getLoc()" />';
var checkboxes = document.getElementsByName('location[]');
var vals = "";
for (var i=0, n=checkboxes.length;i<n;i++)
{
if (checkboxes[i].checked)
{
vals += ","+checkboxes[i].value;
}
}
if (vals) vals = vals.substring(1);
This is a variation to get all checked checkboxes in all_location_id without using an "if" statement
var all_location_id = document.querySelectorAll('input[name="location[]"]:checked');
var aIds = [];
for(var x = 0, l = all_location_id.length; x < l; x++)
{
aIds.push(all_location_id[x].value);
}
var str = aIds.join(', ');
console.log(str);
var fav = [];
$.each($("input[name='name']:checked"), function(){
fav.push($(this).val());
});
It will give you the value separeted by commas
I you are using jQuery you can put the checkboxes in a form and then use something like this:
var formData = jQuery("#" + formId).serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
success: success
});
In some cases it might make more sense to process each selected item one at a time.
In other words, make a separate server call for each selected item passing the value of the selected item. In some cases the list will need to be processed as a whole, but in some not.
I needed to process a list of selected people and then have the results of the query show up on an existing page beneath the existing data for that person. I initially though of passing the whole list to the server, parsing the list, then passing back the data for all of the patients. I would have then needed to parse the returning data and insert it into the page in each of the appropriate places. Sending the request for the data one person at a time turned out to be much easier. Javascript for getting the selected items is described here: check if checkbox is checked javascript and jQuery for the same is described here: How to check whether a checkbox is checked in jQuery?.
This code work fine for me, Here i contvert array to string with ~ sign
<input type="checkbox" value="created" name="today_check"><strong> Created </strong>
<input type="checkbox" value="modified" name="today_check"><strong> Modified </strong>
<a class="get_tody_btn">Submit</a>
<script type="text/javascript">
$('.get_tody_btn').click(function(){
var ck_string = "";
$.each($("input[name='today_check']:checked"), function(){
ck_string += "~"+$(this).val();
});
if (ck_string ){
ck_string = ck_string .substring(1);
}else{
alert('Please choose atleast one value.');
}
});
</script>
How would I submit the id into the form name to submit a certain form?
function submitComment(id)
{
alert('comment on song id: '+[id]+'');
document.postcomment.submit();
}
I want to be able to submit.. postcomment43 or postcomment 42.. whatever the value of ID is joint to postcomment
Tried this:
function submitComment(id)
{
alert('comment on song id: '+[id]+'');
var formToSubmit = 'postcomment' + id;
alert( ''+ formToSubmit +'' );
document.formToSubmit.submit();
}
creates the formToSubmit name correctly but doesn't fire. how do I properly place the formToSubmit variable in the document.form.submit
It seems that just putting in formToSubmit is going to look for the form with name formToSubmit
Give your forms an unique ID:
<form id="postcomment42" action="..."></form>
<form id="postcomment43" action="..."></form>
<form id="postcomment44" action="..."></form>
Then use the getElementById function to get the desired form:
function submitComment(id)
{
var formToSubmit = document.getElementById('postcomment' + id);
if (formToSubmit != null) formToSubmit.submit();
}
Although I suspect there's something wrong with your design. Why do you have multiple forms? Can't you have a single form to submit a comment like:
<form id="postcomment" action="comment?id=42" method="post"></form>
Could you give a little more details on what the interface looks like and what you are trying to achieve?
If your forms only have names, and not ID's, then you could do the following:
// by name
function submitComment(id)
{
var theForm = 'postcomment' + id;
document.forms[ theForm ].submit();
}
The are many, many ways to submit a form via JS, but considering your question I think this is the most applicable manner.