In my php file I call a link with jquery. That link contains a select list with an input text.
$(document).ready(function() {
$(add_button).click(function(e){ //on add input button click
var linkUsers='<div id="selectUsers"><select name="selectUsers" ><option value="">Select a ...</option><option value="LASTNAME">LASTNAME</option><option value="FIRSTNAME">FIRSTNAME</option><option value="ZIPCODE">ZIPCODE</option><option value="EMAIL">EMAIL</option><option value="STATUS">STATUS</option><option value="LICENSE">LICENSE</option><option value="OTHER">OTHER</option></select><br><br> </div><div><input type="text" id="mytext" name="mytext"> <br><br>';
$(wrapper).append(linkUsers);
I want to retrieve the value of selectUser and mytext and put them in a database or php variable.
I tried to see if I can have the correct result with jquery so I used alert and it display the right value.
`//when the user choose an option in the select list
$('#selectUsers select').change(function(){
tableselect = $(this).val() ;
alert(tableselect[$i]);`
What I want to do is to retrieve this value and to put it in a database and to retrieve the input text written by the user (I have no idea how to do that ? how to detect that user has filled the blank ?)
The other problem is that I call the jquery link as many as the user want so it will be useful to put the value of selectUser and mytext in an array variable but I don't know how !
If someone can help me U will be grateful. THANKS A LOT !
This is the jQuery ajax code
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#selectUsers select').change(function(){
tableselect = jQuery(this).val() ;
var data_pro = {
action: 'update_record',
tableselect: tableselect
};
jQuery.ajax({
type: "POST",
dataType : 'html',
url: ajaxurl,
data: data_pro,
success: function(data){
}
});
});
});
</script>
this is the php function put it in your functions.php file
add_action('wp_ajax_update_record', 'update_record');
add_action('wp_ajax_nopriv_update_record', 'update_record');
function local_pickup_shipping_options(){
print_r($_POST['tableselect']);
}
Hope this will resolve your issue
Note : wrapper not specified as class or id ,replace according to that.i am assuming as id
you can pick the value of select box and input like this .
For select :
Note : add id on select box ,for now i have added "selectUsers"
$("#wrapper").on("change","#selectUsers",function(){
alert($(this).val());
});
For input :
$("#wrapper").on("keyup","#mytext",function(){
alert($(this).val());
});
then you can send this response by ajax to php file ands store into db.
you can change event according to need.
Hope this will help you.
Related
I have a select box which populates data based on selection on other select boxes.
I am able to populate data. But how to make a value selected and do onchange event during editing of the form. ie, updation.
I am facing difficulty in making it selected based on database entry and to do onchange. What I am able to do it just the populating data from DB based on change.
you can easly create it with jquery, here's the example:
$('#id_of_your_select').change(function(){
var val = $('#id_of_your_select option').attr('selected', 'selected');
$.post({
url: "your_url",
data: {
value: val; // get the input post of value in server side
},
success: function(result){
// loop a json array and use append function of the jquery on the second select box
}
})
});
i can only explain like that cause there's no code that you give.
I'm having a problem getting modified text from input. The input is loaded with some text I get from a database and with an option i should take the onlyread attr off and change the values. Thats ok but when i click on the save button after writing something else in the inputs, it gets the old values with .val(). How can i get the new ones?
The code is something like this.
var anInput = $("#anInput").val(); //gets old value
var otherInput = $("#otherInput").val(); //gets old value
$.ajax({
type: "POST",
dataType: "html",
success: doSomething,
timeout: 4000,
error: someProblems,
url: "modules/mod.php",
data: {anInput: anInput, otherInput: otherInput}
});
I added the AJAX code just to mention that i need the values to do something. AJAX is working.
I know this can be done with a form but that will reload the page and I don't want that.
Sorry for my rusty English and thanks :)
EDIT: Perhaps I'm not correctly speaking when saying "change the values" what I'm doing is selecting the text and writing something else.
I show some information with the inputs, click a button that allows me to modify, type some new text in the inputs and then click "save"
HTML is genereted by another AJAX
<div class="infoVideo">
<input id="anInput" value="someTextFromDataBase">
<input id="otherInput" value="someTextFromDataBase">
<input type="button" id="btnMod">
<input type="button" id="btnSave">
</div>
If I erase and type something else in the input .val() is getting old someTextFromDataBase
Edit: As per a guess in my comments, there was more than one #anInput in the page so the code was only retrieving the value from the first one which was not the one being edited. The solution is to not have any duplicate id values in the HTML of the page.
I suspect that your code isn't really like you show. You are probably doing these:
var anInput = $("#anInput").val(); //gets old value
var otherInput = $("#otherInput").val(); //gets old value
only once and then trying to use anInput and otherInput much later when the form fields have already changed. You can get the current values by not caching those and just retrieving the current values when you need them by changing this:
data: {anInput: anInput, otherInput: otherInput}
to this:
data: {anInput: $("#anInput").val(), otherInput: $("#otherInput").val()}
That way, you are always retrieving the latest and greatest values right before your Ajax call.
Please confirm format of data returned by mod.php. The AJAX block is expecting to receive HTML formatted text dataType: 'html', -- but you are sending json, so is that what you are expecting back?
If this note doesn't reveal the solution, then please show us your doSomething function - that's where the returned data is handled.
Probably you've tried this already, but what happens if you do this:
var anInput = $("#anInput").val(); //gets old value
alert(anInput);
var otherInput = $("#otherInput").val(); //gets old value
alert(otherInput);
$.ajax({ //etc });
I'm using X-Editable to give users the possibility to edit values inline. This works great, but I now want to use it for some money values which are localized in a "European way" (e.g.: € 12.000.000,00). When I click edit, I want the input to only contain 12000000 though.
Is there a way that I can sanitize the value in X-editable before it gets displayed in the X-Editable input? All tips are welcome!
See the plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. From X-editable documentation it is evident you can use value property of configuration to format the value you want to send to the editor as shown below.
Element displaying money value in your HTML:
12.000.000,00
Javascript code in your HTML:
<script type="text/javascript">
$(document).ready(function() {
$.fn.editable.defaults.mode = 'inline';
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function(input) {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
}
});
});
</script>
If you want to format the value back for display after editing you can do that in display property of the configuration hash like this:
$('#money').editable({
type: 'text',
pk: 1, //Whatever is pk of the data
url: '/post', //Post URL
title: 'Enter money', //The title you want to display when editing
value:function() {
return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
},
display:function(value) {
//var formattedValue = formatTheValueAsYouWant(value);
//$('#money').text(formattedValue);
}
});
Seems like there is no callback function available for what you want.
so You need to make it outside of the library.
here is how to do it.
$(document).on("focus",".form-control.input-sm",function(){
//remove all characters but numbers
var _val = $(this).val().match(/\d/g).join("");
//set it.
$(this).val(_val);
});
replace the part of .form-control.input-sm into your case.
I just tested this on the library's demo site's first demo fieled named "Simple text field" with chrome developper tools
http://vitalets.github.io/x-editable/demo-bs3.html
Since x-editable form would be generated right before showing up.You need to hook an event to document and wait for input field inside of x-editable form gets focus which is the time x-editable shows up and edit the value into whatever you want.
and Yes, This method works AFTER the input field shows up but It's hardly possible to notice that value is changing after it gets displayed.
First of all, Thanks in advance,
I am designing an questionnaire which has 3-5 radio buttons and one comment box for each and every questions. Some of the options are mandatory, so that the user must fill some comments or else he cannot fill other questions. Both the names of radio button and textarea are the question_id and the value of radio button is the checked value. The names are stored as array so to insert in the db while submitting the form.
The input fields are
<input type='radio' name='ans_val[<?php echo $qid; ?>]' value='<?php echo $gans; ?>' />
<textarea rows='3' name='cmnt[<?php echo $qid; ?>]' id="req"></textarea>
I used ajax to find whether the selected option is mandatory or not, because the options are stored in the database. I was able to view the passed value while selecting an option and the result of the query which executed to check the mandatory option. The ajax code I used is
$(document).ready(function () {
$('input:radio').click(function(){
var ans_id = $(this).attr('value');
var q_id = $(this).attr('name');
var dataString = 'id='+ans_id;
$.ajax({
type: "POST",
data: dataString,
url: "ans_chq.php",
success: function(data){
$('body').append(dataString);
// $('textarea').html(dataString);
}
});
});
});
In ans_chq.php, when the user selects a mandatory option '$mandatory' will become '1' else '0'.
I would like to know, how to return the variable $mandatory from the other page to the current page and how to validate respective textarea based on the options selected...
Please help me with this...
if you have seperate id's for each field then do this:
$("#elementId").prop("required", "true");// here elementId is id of your input field.and id should be distinct for each input
if you have class for each field then do this:
$(".elementId").prop("required", "true");// here elementId is class of your input field.and class need not to be unique.
if you are using input fields with name then try this:
$("input[name='q_id']").prop("required", "true");// here q_id is name of the input field.
I want to send my input box value in my ajax call.
I am trying but not work.
My Input box
<form>
<input type="text" onkeydown="filter()" id="searchTxt" placeholder="Filter" value="" >
</form>
My Javascript code
function filter()
{
filterText = $('#searchTxt').val();
$( ".pagination" ).html(totalOutput);
$.ajax({
type: "POST",
url: ""+baseUrl+"userList4",
data: { searchText: filterText},
success: function(msg) {
$(".paginateData").html(msg);
}
});
}
Here filterText = $('#searchTxt').val(); always get null
The code to get the value is correct. So, I would say there is another issue here outside of the code you have shared. It could be jquery can't find that field. Try outputting the length to make sure jquery has actually found that text box.
var textBox = $('#searchTxt');
console.log(textBox.length);
You could also just pass 'this' to the method and not have to use jquery at all, which I would suggest.
Another issue could be that the onekeydown is getting called before the text has even reached the textbox. So at the time the value would be null. But I would assume you tested with more than one keystroke?