We Keep Coding

How to change a hidden button value

In my project, I use ajaxSubmit to upload file. And i set flUpId init value is "flUpInt".
When i click fulId first time, i can uplode file to linux server with action.php. In action.php, I set $flUpV="flUpChg", and this value return back.
I have tested in success: function(data) that alert(data.flUpV) is "flUpChg", and this value is correct. I use $('#flUpId').val()=data.flUpV; to set the hidden button of flUpId value. So "flUpInt" should be changed to "flUpChg"
When I Click fulId second time, I find flUpId is "flUpInt", it is not "flUpChg".The third time, fourth time...., flUpId is always "flUpInt".
Here is ajax code:
$(function () {
$("#fulId").wrap("<form id='fulfId' action='action.php?act=upFileCsc' method='post' enctype='multipart/form-data'></form>");
$("#fulId").change(function(){
var flUpV=$('#flUpId').val();
alert(flUpV);
$("#fulfId").ajaxSubmit({
dataType:'json',
data:{flUpV:flUpV},
beforeSend: function(){...},
uploadProgress: function(){...},
success: function(data){
$('#flUpId').val()=data.flUpV;
alert(data.flUpV);
},
error:function(xhr){...}
});
});
});
Here is html code:
<input type="file" id="fulId" name="mypic"><input type="hidden" id="flUpId" value="flUpInt" >

To set the value you need to pass it to the ,val() method as a parameter, not use assignment.
So instead of
$('#flUpId').val()=data.flUpV;
use
$('#flUpId').val( data.flUpV );

If the button is hidden you can not change it unless it is controlled by something else, something visible

Send hidden input data using AJAX

I am using AJAX live search plugin.
It passes input data to backend-search.php
backend-search.php selects data from the database and return to the search page.
Now I want to pass one hidden input value with the search query.
Hidden Input
<input type="hidden" name="group" value="<?php echo $grp_id; ?>" />
Following is my html in search.php
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search..." />
<div class="result"></div>
Javascript
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var term = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(term.length){
$.get("backend-search.php", {query: term}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
How do I send the data of the hidden input field with above js?

You could use $.post instead of $.get like this:
$.post( "backend-search.php?query="+ term, { hidden_key: "hidden_value"})
.done(function(data) {
alert( "Data Loaded: " + data );
});
So, customizing it for your code,
if(term.length) {
// get value of hidden field
var hidden_value = $('[name="group"]').value();
// make a post request, but also pass query params
$.post("backend-search.php?query=" + term, { group: hidden_value})
.done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
}
Here, everything after the ? mark is passed as a query string (i.e. via get method) whereas the hidden field is passed by the Post method.
In your Php script, use print_r($_REQUEST) to verify that you get the 2 parameters as desired.
Also, you should encode URI parameters like this encodeURIComponent(term) to make sure your javascript does not break if the user enters special characters

html/javascript: Is there a way to force data inputted into a text input to go into its value attribute?

What i have is a div with text inputs. What i want to do is send the div's HTML code to the server to be used on another page like so:
$.ajax({
url: 'process.php',
type: 'POST',
data: {
html: $("#form").html()
},
success: function (data) {
}
});
The thing is, if a user types in some data into the text inputs, that data is lost since its not part of the HTML. Is there a way i can force this data into the HTML? eg by using javascript to edit each input's value attribute?
Thanks in advance

Try the input event:
$(document).on('input', 'input.your_input', function() {
var that = $(this);
that.attr('value', that.val());
});
Inspect the input element and try type something:
$(document).on('input', '#textInp', function() {
var that = $(this);
that.attr('value', that.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="textInp" />

You can try sending the input values via parameters in the ajax function.

Try to run this snippet before making the call,
$("#form :text").attr("value",funcion(){
return $(this).val();
});
Instead of binding change event to all the input elements initially you can add the attribute before sending them to server.

You can try like this:
$("input").on('change', function() {
$(this).attr('value', $(this).val());
});

How can I hold value in input without cookie

I append a text value with jquery. But when I was refresh the page, input value disappear. I can use jquery cookie but I don't want to use this method. How can I hold value in input without cookie. There is an example and jsfiddle demo below.
<input type="text" id="couponInput" class="couponInput" placeholder="Coupon code" />
<button type="button" id="couponApply" class="couponApply">APPLY COUPON</button>
<span class="removeCoupon"></span>
<script>
$(document).ready(function(){
$('.couponApply').click(function(event){
var couponInputval = $(".couponInput").val();
if(couponInputval == "x1"){
alert('Coupon Applied!');
$( ".removeCoupon" ).append( "Remove Coupon" );
$(".couponInput, .couponApply").attr('disabled','disabled');
$('.removeCoupon').click(function(){
$(".couponInput, .couponApply").removeAttr('disabled','disabled');
$(".removeCoupon").empty();
});
}
else{
alert('Error');
}
event.preventDefault();
});
});
http://jsfiddle.net/vsgfj05h/

You can use sessionStorage or localStorage - it's the best way to do it

You can use the local storage instead of cookie.
It not working inside the jsfiddle. I think it's because jsfiddle uses iframe to display the results.
Simple usage:
if (localStorage.couponInputval) {
$(".couponInput").val(localStorage.couponInputval)
}
localStorage.couponInputval = $(".couponInput").val();
MDN Documentation

Sending one of multiple forms with jQuery

I'm doing a thing like the follow-:
$.each(data2, function(key2, val2) {
$('#posts').append('<div class="send_comment" align="right">');
$('#posts').append('<input type="hidden" class="com_post_id" value="'+i+'"><br /\>');
$('#posts').append('Author: <input type="text" class="com_author"><br /\>');
$('#posts').append('Img: <input type="text" class="com_img"><br /\>');
$('#posts').append('Text: <input type="text" class="com_text"><br /\>');
$('#posts').append('<button class="new_comment">Send</button>');
$('#posts').append('</div>');
});
How can I send these fields with $.post? With $(this), I can get the clicked element, but then?

Since it is dynamically injected element,you should bind the functionality using jQuery on
$(function(){
$(".send_comment").on("click",".new_comment",function(e){
e.preventDefault();
var item=$(this);
var postId=item.parent().find(".com_post_id");
var author=item.parent().find(".com_author");
var msg=item.parent().find(".com_text");
$.post("yourPage.php", { id : postId, author:author ,msg:msg },function(result){
//do whatever with result
alert(result);
});
});
});
http://api.jquery.com/on/
jQuery on will work on current and future elements.

data = $(this).closest('form').serialize()

I always found the modal form example from jqueryui's site as a good example of how to send data from a form: http://jqueryui.com/demos/dialog/#modal-form
Essentially give your fields ids, then:
var author = $( "#author" ),
image = $( "#image" ),
text = $( "#text" ),
allFields = $( [] ).add( author ).add( image ).add( text );
Then use post:
$.post("your_url_that_processes_data",allFields, function(data){
// do something with data
});
If you have multiple forms that vary slightly there are plenty of ways to go about that. I'd recommend either changing the action URL OR grabbing an "id" from some DOM element some how. Maybe you can change the form id to something like : "form-".id in your script then read it before you submit.
I can potentially try to help with a more detailed use case?