I have couple of input field and values in them. This is projected to the user.
The user can modify these values and submit them.
When submitted, I need to check which input field is modified.
I can compare the previous fields and current fields and check. But I am trying to find more optimized way to do this.
I can use javascript, php, jquery and html tricks
<input id="input1" value="someValue" type="text">
<input id="input2" value="someValue" type="text">
Script:
$('input').on('change',function(){
var id = $(this).attr('id');
alert("input field is modified : ID = " + id);
});
You can create 2 different input, 1 hidden with a class like originalVal and 1 visible for every input.
Then on submit you do something like that :
$('input').each(function(){
var currentVal = $(this).val();
var originalVal = $(this).closest('.originalVal').val()
if(currentVal != originalVal){
//This input has changed
}
})
Since no code was given, you could compare what was in the input compared to what is now in it.
HTML Input:
<input type="text" id="testInput" value="DB Value"/>
jQuery
var modifiedInputs = [];
var oldVal = "";
$("#testInput").focus(function() {
oldVal = this.value;
}).blur(function() {
console.log("Old value: " + oldVal + ". New value: " + this.value);
//If different value, add to array:
if (this.value != oldVal) {
modifiedInputs.push(this.id);
}
});
Fiddle: http://jsfiddle.net/tymeJV/tfmVk/1/
Edit: Took it a step further, on modification of an input, if the changed value is different from the original, it pushes the elements ID to the array.
I would say your best bet would be to get the initial values from the input fields, and then compare them later on. Then, just do a comparison once the submit button is clicked. For instance, put this somewhere in your $(document).ready() that way it will retrieve the initial value.
var oldValue=[];
$('input').each(function(){
oldValue.push($(this).val());
});
Then you can compare later on when you hit the submit.
you could compare with default value like this
for(var i in formObj)
if('value' in formObj[i] && formObj[i].value!=formObj[i].defaultValue){
//do what ever here ...
}
Related
I have a list of songs. I'm trying to determine whether or not a song on the list has been checked or not. If so I need to know the value of the checkbox.
my html looks like this... the value $song_id is pulled from the list in the database.
<input type='checkbox' name='song[]' value='$song_id' />
There could be 10 songs... there could 100.
I need to know which ones have been checked and how to get the value.
On click save item ID of item to array; (js)
On click search was such ID already checked; (in array)
ADDED
You should use jQuery (or raw javascript) to do logic you want. jQuery is http://jquery.com/ using it you can do you want on front-end. Do this on back-end is bad idea.
Once you submit the form the $_POST['song'] variable will contain an array of all the $song_id's that were selected.
You can do something like this:
<input type='checkbox' name='song[]' class='songItem' value='$song_id' />
<input type='hidden' id='selectSongsHidden' />
In JavaScript,
var selectedSongValues = [];
var selectedSongsString = ""; // for comma-separated values
function GetSelectedSongs()
{
var songs = $('.songItem');
var selectedSongs = [];
for(var i=0; i<songs.length; i++)
{
var checked = $(songs[i]).is(':checked');
if(checked)
{
selectedSongs.push(songs[i]);
}
}
for(var j=0; j<selectedSongs.length; j++)
{
selectedSongValues.push($(selectedSongs[j]).val());
selectedSongsString += $(selectedSongs[j]).val() + ",";
}
$('#selectSongsHidden').val(selectedSongsString);
}
When you press submit, in the onclick event you can call this function and set the value to a hidden field.
You can see this in a working http://jsfiddle.net/A3e3y
foreach ( $_POST['song'] AS $song_id ) {
// do smth with $song_id ...
}
I have some hidden input fields like this ...
<input type="hidden" class="added_ids[]" name="added_ids[]" value="5190">
<input type="hidden" class="added_ids[]" name="added_ids[]" value="5340">
<input type="hidden" class="added_ids[]" name="added_ids[]" value="2488">
....and so on.
I need to get the values of each of the input fields so that I can pass it as a parameter to my php page.
url: "index.php/autocomplete/test_search?added_ids[]=" + //array holding ids
so I need to know how I do it in jQuery ..
try something like this
var array = $('.added_ids\\[\\]').map(function() {
return this.value;
}).get();
console.log(array); \\will give you ["5190", "5340", "2488"]
You can use map():
var added_ids = $('.added_ids\\[\\]').map(function() {
return this.value;
}).get();
var url = "index.php/autocomplete/test_search?added_ids[]=" + added_ids.join();
In your PHP you can then retrieve the value and split it by , to return it back to an array.
I have this code to append the input panel #yearPanel after the select box #before changed.
$("#before").change(function() {
var selected = $('#before option:selected').text();
if(selected == bankShowYear) {
$(yearPanel).insertAfter("#yearAnchor");
var value = $("#yearHiden").val();
$("#year").val(value);
} else {
$("#yearPanel").remove();
}
});
I want to keep the input value of #year in #yearPanel after submitting by PHP. I tried to store the value in #yearHidden and assign it to #year after all the input are rendered but it doesn't work.
How to keep the input value?
Try this:
$("#before").change(function() {
var selected = $('#before option:selected').text();
if(selected == bankShowYear) {
$(yearPanel).insertAfter("#yearAnchor");
var value = $("#yearHiden").val();
$("#year").val(value).attr('name', 'year');
} else {
$("#yearPanel").remove();
}
});
Then, on your next page:
$("#year").value(<?php echo $_REQUEST['year']?>);
OR
<input id="year" value="<?php echo $_REQUEST['year']?>" />
your input needs a name attribute in order for it to be passed along to your serverside php script
You need to pass the value to PHP via a hidden field and PHP will have to render it on the next page. In other words the value needs to go from the client-side to the server-side and back to the client-side.
My question might be quite easy for you guys, but it's hard for me...
I have a text field and I want to change its value between once <label id="some_id"> is clicked. Until what I've described now, I can do it myself with jQuery, but here comes the complex part (for me, obviously):
I have two values I want for that text field, and once that <label> is clicked, it switches to the value that isn't shown, but once we click it again, it goes back to the original text the text field contained.
I have to keep my jQuery/JS internal because I get the desired values from the database and I don't want to make my .js files .php.
This is what I got:
<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />
It does the first part I need, changing the value of the field to the new value, but once that button gets clicked again, I want the original text.
Thank you.
You can compare its current value to the available possibilities.
<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">
var possibilities = ["foo", "bar"];
$('#toggle').click(function(){
var old_val = $("#stuff").val(), new_val;
if (old_val == possibilities[0])
new_val = possibilities[1];
else
new_val = possibilities[0];
$("#stuff").val(new_val);
});
demo
First, don't use inline JavaScript.
You can use a combination of .toggle() and data-* attributes for this. For example, using a data-toggle attribute for the value you want to toggle with.
<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>
$("label[for][data-toggle]").each(function() {
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue;
$this.toggle(function() {
originalValue = $for.val();
$for.val($this.data("toggle"));
}, function() {
$for.val(originalValue);
});
});
See it here.
UPDATE #1
I added usage of for attribute of <label>.
UPDATE #2
If you don't want to use .toggle() due to the deprecation notice.
$("label[for][data-toggle]").each(function() {
/* cache */
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue = $for.val();
/* state variable */
var which = 0;
$this.click(function() {
$for.val(which ? originalValue : $this.data("toggle"));
which = 1 - which;
});
});
See the non-.toggle() alternative here.
For doing this, on the first button click you need to store the current value of input in some variable and then on 2nd click you can assign that variable to input value. If you donot want to have js file, you can simply use <script></script> tags to write the jquery.
`<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">
<script>
var currentValue="";
function replaceText(newval){
currentValue= $("#html").val();
if(currentValue!=newval)
$("#html").val(newval);
$("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
}
</script>`
DEMO HERE
You can store the values into JavaScript variables and use jQuery click method instead of onclick attribute.
var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";
$('label[for=html]').click(function() {
$('#html').val(function(i, currentValue) {
return currentValue === def ? up : def;
});
});
Is it possible to get some other attribute's value than attribute named value with $_POST
example: <option value="FusRo" name="Dah"></option>
Normally when i use $_POST['Dah'] The php grabs FusRo (the value).
But I want to grab another attribute's value than attribute named value. I hope you understand.
If I cant use $_POST to grab some other value, is it some other comand i can use?
Another example:
If i use
<option value="FusRo" name="Dah"></option>
Can I get the "Dah" with $_POST instead of "Fusro" ?
You can put your other value in a hidden field:
<input type="hidden" name="DahHidden" value="somethingelse" />
Then get it from $_POST with:
$_POST['DahHidden']
If this value has to dynamically change based on what's in the <select>, then you'll need JavaScript.
If you want to grab the keys from $_POST (i.e. the name attributes from your form fields), you can iterate over $_POST like this:
foreach( $_POST as $key => $value)
echo $key . ' => ' . $value; // Will print Dah => value (eventually)
Note that iterating over $_POST will likely produce more output than just that one form element (unless 'Dah' is the only thing you submitted in your form.
The only way is to use JavaScript to modify the posted data, or even simpler use jQuery
then it would look like something like this :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
</head>
<body>
<form name="skyrim" id="skyrim">
<input type="text" value="FusRo" name="Dah" data-name="dhovakin" data-race="kajit" />
<form>
<script>
$('#skyrim').submit(function( e ){
data = {};
url = 'http://sandbox.local/testpost.php';
e.preventDefault();
$('input, textarea', this).each(function(){
var pcs = $( this ).data();
var ename = $( this ).attr('name');
if(undefined == data[ ename ] ){
data[ ename ] = {};
data[ ename ]['_'] = $(this).val();
}
$.each(pcs, function(k, v){
data[ ename ][k] = v;
});
});
$.ajax({
url : url
,data : data
,type : "POST"
}).done(function(){
});
});
</script>
</body>
</html>
The above code will add all the attributes starting with data- to the post .
the result of the above is :
Dah[_] FusRo // default value
Dah[name] dhovakin // data-name
Dah[race] kajit // data-race
$_POST only gives you the names of the field, and their corresponding value, nothing more.
No, you cannot post anything else then the "value" of an inputfield.
You could hack your way into it by using javascript. Something like
document.getElementById('FORM').onsubmit = function() {
document.getElementById('FIELD').value = document.getElementById('FIELD').customAttribute
}
However, if javascript is disabled, your form will submit the wrong values. Not a really solid solution.
Sounds to me more like you will have to redefine your values, I can't really imagine why you would like to alter this behavior.