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();
});
Related
I have a form where users can create recipes. I start them off with one ingredient field (among others) and then use .append() to add as many more as they want to the div container that holds the first ingredient. The first input field has an id of IngredientName1 and dynamically added input fields are IngredientName2, IngredientName3, etc.
When they start typing in the input field, I pop a list of available ingredients filtered by the value they key into IngredientNameX. When they click on an ingredient in the list, it sets the value of the IngredientNameX field to the text from the div - like a search & click to complete thing. This all works very well; however, when you add IngredientName2 (or any beyond the one I started them with initially) clicking on an available ingredient sets the values of every single IngredientNameX field. No matter how many there are.
I hope this is enough context without being overly verbose, here's my code (I've removed a lot that is not relevant for the purpose of posting, hoping I didn't remove too much):
<div id="ingredientsContainer">
<input type="hidden" id="ingredientCounter" value="1">
<div class="ingredientsRowContainer">
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName1" placeholder="Ingredient" id="IngredientName1" data-ingID="1"><span class="focus-border"></span></div>
</div>
<input type="hidden" name="Ingredient1ID" id="Ingredient1ID">
</div>
<script>
$(document).ready(function(){
$(document).on('keyup', "[id^=IngredientName]",function () {
var value = $(this).val().toLowerCase();
var searchValue = $(this).val();
var valueLength = value.length;
if(valueLength>1){
var theIngredient = $(this).attr("data-ingID");
$("#Ingredients").removeClass("hidden")
var $results = $('#Ingredients').children().filter(function() {
return $(this).text() === searchValue;
});
//user selected an ingredient from the list
$(".ingredientsValues").click(function(){
console.log("theIngredient: "+theIngredient);//LOGS THE CORRECT NUMBER
var selectedIngredientID = $(this).attr("id");
var selectedIngredientText = $(this).text();
$("#IngredientName"+String(theIngredient)).val(selectedIngredientText);//THIS IS WHAT SETS EVERYTHING WITH AN ID OF IngredientNameX
$("#Ingredient"+String(theIngredient)+"ID").val(selectedIngredientID);
$("#Ingredients").addClass("hidden");
});
$("#Ingredients *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} else {
$("#Ingredients").addClass("hidden")
}
});
$("#AddIngredient").click(function(){
var ingredientCounter = $("#ingredientCounter").val();
ingredientCounter++;
$("#ingredientCounter").val(ingredientCounter);
$('#ingredientsContainer').append('\
<div class="ingredientsRowContainer">\
<div class="ingredientsInputContainer"><input class="effect-1 ingredientsInput" type="text" name="IngredientName'+ingredientCounter+'" placeholder="Ingredient" id="IngredientName'+ingredientCounter+'" data-ingID="'+ingredientCounter+'"><span class="focus-border"></span></div>\
</div>\
<input type="hidden" name="Ingredient'+ingredientCounter+'ID" id="Ingredient'+ingredientCounter+'ID">\
');
});
});
</script>
[UPDATE] I realized the problem is happening because the function is running multiple times. I assume this happening because I'm calling a function on keyup of a field whose id starts with IngredientName so when one has a key up event, all existing fields run the function. How do i modify my:
$(document).on('keyup', "[id^=IngredientName]",function () {
to only run on the field with focus?
I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.
ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});
$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});
You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});
This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});
So I have a hidden field on my form which contains a URL (EG - http://www.domain.com?asset=)
What I need to do is on form submit extract the value from a checkbox and append it to the value in my hidden form so that the result will look something like:
http://www.domain.com?asset=123abc
Thanks in advance!
var url = 'http://www.domain.com?asset=',
jq_checkbox = $('input#my-check-box'), // suppose id of your checkbox is my-check-box
jq_hidden = $("input#my-hidden-field"), // and id of your hidden field is my-hidden-field
jq_form = $('form#my-form') // and id of your form is my-form
.submit(function(){
jq_hidden.val(url + jq_checkbox.val());
});
$("hiddenfield").val($("hiddenfield").val() + "123abc");
Simple call this function on form submir or click event you want you get your desired output here i check output by alert
<script>
function check(){
var checkbox= $("#checkbox").val();
var hidden_val= $("#url").val()+checkbox;
alert(hidden_val);
}
</script>
here
checkbox is checkbox ID
url is hideen item ID
hope it will help you
i know we can manally log any input value by its selector
console.log('inputName='+$('#inputId').val()+'....)
But is there -simpler- a way to log all input values? if it's posible to do it when any input changes
You can use serialize to serialize the form elements to a string for logging. It follows the same rules for including or not including elements as normal form submission. The only caveat is that the content of input type="file" fields isn't serialized, for perhaps obvious reasons.
To fire it when any of the inputs changes:
$("form :input").change(function() {
console.log($(this).closest('form').serialize());
});
Live demo using the form shown in the documentation
You may get in form of query string using $("form").serialize().
This would log the form every time anything changes:
$("form :input").change(function(){
console.log($("form").serialize());
});
Edit:
Removed my focusout suggestion, as I realized that change is actually only fired when the element looses focus.
I made this little component:
$("form :input").change(function() {
var fields = $(this).closest('form').serialize();
serialize_to_console( fields );
});
/*
SERIALIZE TO CONSOLE
Transforms string to array and show each param in console if not empty */
var serialize_to_console = function( serialized ) {
var splited_serialized = serialized.split('&');
$.each( splited_serialized, function(index, key) {
var input = key.substr(0, key.indexOf('='));
var value = key.substr( key.indexOf('=') + 1 );
if( value !== '' )
console.log( '[' + input + '] = \'' + value + '\'' );
});
}
Enjoy!
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()?