We Keep Coding

whatever the number , i enter in form field, i want that to be stored in a variable.

(web designing) whatever the number , i enter in form field, i want that to be stored in a variable. When the user changes the value in the form field , value stored in the variable needs to be updated. How to do that ?

Try this:
<input type = "text" id = "id1">
<script>
$("#id1").change(function(){
var a = $("#id1").val();
alert(a);
});
</script>

there is a jsbin that demonstrates required functionality
jsbin
or
<form>
<input id="input" type="number">
</form>
<button id="button">Log Value</button>
<script>
var input = document.getElementById('input');
var button = document.getElementById('button');
var val;
input.addEventListener('change', function (event) {
val = +event.target.value;
});
button.addEventListener('click', function () {
console.log('Value:', val);
});
</script>

<form>
<input type="text" id="inputid" value="test"/>
<button type="submit">submit</button>
</form>
<script>
$( document ).ready(function() {
var input =$('#inputid');
var saveVar;
// input.change(function(){
// console.log(input.val());
// });
input.on('keyup', function(ev){
saveVar=input.val();
console.log(saveVar);
});
});
</script>

How to call function inside Javascript

<script type="text/javascript>
function submitMe() {
var checked_ids = [];
$('#your-tree-id').jstree('get_checked',null,true).each(function(){
checked_ids.push(this.id);
});
//setting to hidden field
document.getElementById('jsfields').value = checked_ids.join(',');
}
</script>
<input type="hidden" name="jsfields" id="jsfields" value="">
I'm searching the way to get checked Ids of Jstree in form submit. So this is what I get. However, how I can call this function in my program?

Use a click/submit event
$(form).submit(submitMe);
or
$('[type="submit"]').click(submitMe);
Don't forget to prevent the default event and then trigger it after the code:
function submitMe(e) {
e.preventDefault();
var checked_ids = [];
$('#your-tree-id').jstree('get_checked',null,true).each(function(){
checked_ids.push(this.id);
});
//setting to hidden field
document.getElementById('jsfields').value = checked_ids.join(',');
window.location = $(this).closest('form').submit();
}

How can I extract the values entered in the input boxes generated dynamically and pass it to controller using jquery?

I have a form wherein a user can enter input boxes and remove them at a click. I want to extract the values entered in these input boxes and pass them to controller using jQuery. How do I do that?Right now I am using ids to extract the values but I do not think that is a better method because suppose I add 4 options and then I remove all of them and then again add inputs, I will not be able to track these ids and extract the values.
Here is my HTML code:
<button type="button" class="addoption" id="addoption_btn">Add more option</button>
<div id="Options">
<input type="text" name="mytext[]" id="option_1" placeholder="Option 1"/>
</div>
Here is my JavaScript:
var MaxOptions = 4; //maximum input boxes allowed
var Optionsform = $("#Options"); //Input boxes wrapper ID
var AddButton = $("#addoption_btn"); //Add button ID
var x = Optionsform.length; //initial text box count
var OptionCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxOptions) //max input box allowed
{
OptionCount++; //text box added increment
//add input box
$(Optionsform).append('<div><input type="text" name="mytext[]" id="option_'+ OptionCount +'" placeholder="Option '+ OptionCount +'"/>×</div>');
x++; //text box increment
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
});
Here is the jQuery I am using to pass the data to my controller:
$("#addquestion_btn").click(function(){
var val= CKEDITOR.instances['question_topic'].getData();
storequestion(val);
});
function storequestion(ques)
{
$.post("/instructor/store/question",{
question: ques,
option1: $("#option_1").val(),
option2: $("#option_2").val()
},function(data){
if(data[0]==="success")
{
window.location.href = '/instructor/create/topics';
}
else
{
alert("fails");
window.location.href = '/instructor';
//redirect to further page to enter courses
}}
,'json');
}

Please use below mentioned code to read through all displayed options.
function storequestion(ques) {
obj = {};
obj[question] = ques;
$("#Options:input[name*='mytext']").each(function (index) {
obj['option' + index] = $(this).val();
});
$.post("/instructor/store/question", obj
, function (data) {
if (data[0] === "success") {
window.location.href = '/instructor/create/topics';
}
else {
alert("fails");
window.location.href = '/instructor';
//redirect to further page to enter courses
}
}
, 'json');
}

Execute code when textboxes have data

I have a project which I have to calculate the coordenates between two points. The first coordenates are calculated once the user enters in three text boxes the street, province and city.
How can I execute the code I have in PHP once the user fills out all three boxes and not before?
<form name="form" action="" method="post">
<input type="text" name="provincia" id="provincia">
<input type="text" name="municipio" id="municipio">
<input type="text" name="calle" id="calle">
<input type="submit" value="¡Buscar!"/>
</form>
This is the form the user has to fill in. Once the user writes in all three (without mattering the order) I have php code which Im not sure if it can execute once these boxes have values.
What should I have to use to accomplish this? Ajax? Jquery? Javascript?
Not really sure,
thanks.

are you looking for this?
$(document).ready(function () {
var flag = false;
$("input[type=text]").change(function () {
flag = true;
$("input[type=text]").each(function () {
if ($(this).val().trim() == "") {
flag = false;
}
});
if (flag) {
alert("all have values");
$("input[type=submit]").trigger("click");
}
alert(values);
});
});
edit
<form name="form" action="" method="post">
<input type="text" class="tobeChecked" name="provincia" id="provincia">
<input type="text" class="tobeChecked" name="municipio" id="municipio">
<input type="text" class="tobeChecked" name="calle" id="calle">
<input type="submit" value="¡Buscar!"/>
</form>
$(document).ready(function () {
var flag = false;
$(".tobeChecked").change(function () {
var values = "";
flag = true;
$(".tobeChecked").each(function () {
values += $(this).val().trim() + "+";
if ($(this).val().trim() == "") {
flag = false;
}
});
if (flag) {
alert("all have values");
$("input[type=submit]").trigger("click");
}
});
});

Create a function to validate the required field for those three text boxes and once all are filled with values execute your script:
$('#provincia,#municipio,#calle').blur(function(){
if($('#provincia').val() !="" && $('#municipio').val() !="" && $('#calle').val() !=""){
// Do your process here
}
});

You can use jquery validate plugin to validate these 3 input fields on the client side itself, In that way, the user cannot submit the form until he completely fills the input fields.

Give your Button an ID like:
<input type="submit" id="button" value="¡Buscar!"/>
Then you can do this in JQuery:
$("#button").click(function(){
//Get the value of the fields
var textfield1 = document.getElementById("provincia").value;
var textfield2 = document.getElementById("municipio").value;
var textfield3 = document.getElementById("calle").value;
//Check if Values are filled
if ( !textfield1.match(/\S/) || !textfield2.match(/\S/) || !textfield3.match(/\S/))
{
//execute your script
}
I hope it helps.

use jquery .change() function
$( "#provincia" ).change(function() {
//you can do something here
alert( "Handler for .change() called." );
});

Get values from submitted form

I have a very simple form:
<form id="toBeTranslatedForm" action="actionpage.php" method="POST" >
<textarea name="userInput" id="toBeTranslatedTextArea"></textarea>
<select id="translationOptions">//dynamically filled</select>
<input type="submit" value="Translate" />
</form>
Using Jquery I am detecting whether the form has been submitted:
function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
//do stuff
});
}
How do I get the text typed in the text area and the option selected in the select box from the form above? Ideally I would like to put them into an array.

Javascript only, using FormData:
form.addEventListener("submit", function(e) {
e.preventDefault();
const data = new FormData(form);
for (const [name,value] of data) {
console.log(name, ":", value)
}
})
<form id="form">
<select name="sselectt">
<option value="default" defaultSelected="true">-- Select --</option>
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<label for="inpt">remember</label>
<input id="inpt" name="rrememberr" type="checkbox" />
<button type="submit">submit</button>
</form>

You can get the data form the submit event
function outputTranslated() {
$('#toBeTranslatedForm').submit(function(evt) {
const form = evt.target;
// get the field that you want
const userInputField = form.elements['userInput'];
alert(userInputField.value);
});
}

var theArray = $('#toBeTranslatedForm').serializeArray();
See the .serializeArray docs.
On a pedantic note, that's not "from a submitted form", since you're asking for them before anything is actually submitted.

Here is how you can get value:
function outputTranslated() {
$('#toBeTranslatedForm').submit(function() {
var textareaval = $('#userInput').val();
alert(textareaval);
});
}
You can do the same for selection box by adding this line after the textareaval variable definition in the code above:
var selectval = $('#translationOptions').val();
Then, you can either use serialise, or you can put it into an array manually:
var a = [textareaval,selectval];

I think you'r looking for something like this.
$('#toBeTranslatedForm').submit(function() {
alert($(this).serialize());
return false;
});
Hope it helps

after submission, you can use just get the value by doing the following:
function outputTranslated()
{
$('#toBeTranslatedForm').submit(function() {
var textarea = $('#toBeTranslatedTextArea').val();
var allVals = [];
$('#translationOptions :checked').each(function() {
allVals.push($(this).val());
});
});}