We Keep Coding

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

I have a textbox and button. I want to show alert with JQuery

I have a textbox and button. I want to show an alert when I click the button. But I have a condition; the innput text value must be X1. If user write X1 in to textbox, show an alert GOOD otherwise alert NOT GOOD.
How can I do that with using jQuery? Here are my html codes.
<input type="text" id="couponInput" class="couponInput" placeholder="Input Code" />
<button type="button" id="couponApply" class="couponApply">APPLY</button>

In case you want specific jquery answer. Here it is ....
$(document).ready(function(){ // Document ready event -- most important
$('#couponApply').click(function(event){
var couponInputval = $('#couponInput').val(); // Getting the input value
couponInputval = couponInputval.toUpperCase(); // Changing to upper case
if(couponInputval == 'X1') {
alert("GOOD");
}
else{
alert("NOT GOOD");
}
event.preventDefault(); // To restrict button to push request to the server
});
});
Hope it helps ......

Add this javascript
//This detect the onClick event on your button
$("#couponApply").click(function(){
//here you retrieve the value of your input
var inputValue = $("#couponInput").val();
//And now, you test it
if(inputValue == "X1")
alert("GOOD");
else
alert("NotGOOD");
});
You can test it here

You don't need jQuery for that, but try this
<button type="button" id="couponApply" class="couponApply" onclick="if($('#couponInput').val() == 'X1'){alert('GOOD');} else {alert('NOT GOOD');}">APPLY</button>
Also if you are trying to verify coupons than this is not a good way to do that - your code will be easy to read in source of your website - you should do it on the server side

remove hidden field based on hidden field value using jquery

i would like to remove a hidden field from the form using jquery based on hidden field value.
please look the below html:
<input type="hidden" name="myvalue[]" value="value1"/>
<input type="hidden" name="myvalue[]" value="value2"/>
<input type="hidden" name="myvalue[]" value="value3"/>
i have jquery function which returns me the above value example:
$('#getValue').click(function(){
.... processing code here.....
return valueOfHiddenField;
});
now i would like to remove the hidden field from the form based on the value return by the getValue
so if the method returns me value1 then any input hidden field in the form with value as value1 should be removed. in this case the first input field of my html above.
any help or suggestion would be a great help ... thanks in advance

$('input[type="hidden"][value="+YOUR_VALUEVAR+"]').remove();
fiddle: http://jsfiddle.net/9tsgy/

You can iterate over input:hidden elements to check values and remove() based on value,
$("input:hidden").each(function () {
if (this.value == "value1") { // your condition here
$(this).remove()
}
}

$('#getValue').click(function () {
$(document).find("input[type=hidden]").each(function () {
if ($(this).value == 'Your Value') {
$(this).remove();
}
});
return valueOfHiddenField;
});

You can also do like this:
let hiddenValue = $(this).val();
$('input[type="hidden"][value="'+hiddenValue+'"]').remove();
Get the value of a hidden field and then use it dynamically and remove specific <input type="hidden">

Jquery: Combine multiple user inputs into one text area?

I'm trying to put together multiple user inputs and then combine them into one textarea after button click.
For example:
User1:Hey, I just met you
User2:And this is crazy
User3:But Here's my number so call me maybe
Combined Result:
Hey, I just met you, And this is crazy, But Here's my number so call me maybe
Here's my code the button click is currently not working but when I tried it before it did work so I was thinking I have some problem w/ my Jquery that triggers this unusual result:
HTML and Imports:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input class="combine" id="input1" disabled="true"></input>
<input class="combine" id="input2" disabled="true"></input>
<input class="combine" id="input3" disabled="true"></input>
<input class="combine" id="input4" disabled="true"></input>
<input class="combine" id="input5" disabled="true"></input>
<input class="combine" id="input6" disabled="true"></input>
<input class="combine" id="Voltes5" disabled="true" size="45"></input>
<button id="setVal">Set</button>
Jquery
$(document).ready(function(){
$('#setVal').on('click',function(){
jQuery(function(){
var form = $('.combine');
form.each(function(){
$('.Voltes5').append($(this).text()+ ' ');
});
});
});
});
Update for sir Arun P Johny
User1: If theres a (no comma when combined)
User2: will
User3: there's a way
Combined Result:
If theres a will, there's a way

Try
$(document).ready(function () {
$('#setVal').on('click', function () {
var form = $('.combine').not('#Voltes5');
var vals = form.map(function () {
var value = $.trim(this.value)
return value ? value : undefined;
}).get();
$('#Voltes5').val(vals.join(', '))
});
});
Demo: Fiddle

Here's a one-liner for non-readability ;)
$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});
Expanded:
$('#setVal').click(function(){
$('#Voltes5').val(
$('.combine')
.not('#Voltes5')
.map(
function(){
return $(this).val();
})
.get()
.join('')
);
});
Get fiddly with it: http://jsfiddle.net/ArtBIT/u57Zp/

Here is one way to do this:
$('#setVal').on('click', function () {
$(".combine[id^=input]").each(function () {
if(this.value) {
$("#Voltes5")[0].value += ' ' + this.value;
}
});
});

There are several different ways to do this..
I'd do it this way using an array:
$(document).ready(function () {
$('#setVal').on('click', function () {
//create an array for the values
var inpAry = [];
$('.combine').each(function () {
//add each value to the array
inpAry.push($(this).val+' ');
});
//set the final input val
$('#Voltes5').val(inpAry);
});
});
but you would need to remove the combine class from #setVal because that would be included in the .each.
This way it would also be possible to have the final box updated on keyup as I'm not just appending the values, the combined values are set each time.

$(document).ready(function(){
$('#setVal').on('click',function(){
var val='';
$('.combine').not('#Voltes5').each(function(){
val+=$(this).val();
});
$('#Voltes5').val(val);
});
});
.text() will give text of the element ,for input val u have to use .val()

So there's immediate big problem in the code, which is that you're referring to your Voltes5 element as a class, not an ID. The jQuery selector you want is:
#Voltes5
instead of:
.Voltes5
There are a few other things to think about too, though, for the sake of functionality and best practices. Firstly, the Voltes5 element also has class combine, meaning that the $('.combine').each() call will include this element. The outcome of this is that it will also append its current text to itself when the code is run (or, when the code is run with the above correction).
When grabbing the current entered text of an input element, a jQuery .val() call is what you want, not .text() - see this answer for some more discussion.
Another thing that could be noted is that you should really explicitly specify what sort of input these elements are; <input type="text"> is hugely preferable to <input>.
Finally, input is a void element (reading), meaning it shouldn't have any content between opening and closing tags. Ideally, you wouldn't even give a closing tag; either have just the opening tag, or self-close it:
<input>
<input />
HTH

replace $('.Voltes5').append($(this).text()+ ' ');
with
$('#Voltes5').append($(this).text()+ ' ');