I have this function:
function AddRowToForm(row){
$("#orderedProductsTblBody tr").each(function(){
// find the first td in the row
arr.push($(this).find("td:first").text());
});
for (i=0;i<arr.length;i++)
// display the value in input field
document.getElementById("message").innerHTML = (arr[i] + "<br >");
});
}
The problem is that I have to retrieve the array in an input field into a form. The input field is the last one (id="message")
fieldset class="pure-group">
<label for="date">Data: </label>
<input id="date" name="date" type="text"/>
</fieldset>
<fieldset class="pure-group">
<label for="time">Ora: </label>
<input id="time" name="time" />
</fieldset>
<fieldset class="pure-group">
<label for="pax">Numero di Persone: </label>
<input id="pax" name="pax" />
</fieldset>
<fieldset class="pure-group">
<label for="message">Esperienze: </label>
<input id="message" name="message" rows="5"></input>
</fieldset>
The problem is that the function doesn't work. I tried with document.write (instead of innerHTML and it works but it cancel everything. Any help? Thank you in advance!:
SO you have a couple of issues. You set the text of an input with value. You are also not appending, you are just overriding the value. For a textarea, you need to use \n for new lines.
$("#orderedProductsTblBody tr").each(function(){
arr.push($(this).find("td:first").text());
});
for (var i=0;i<arr.length;i++)
// display the value in input field
document.getElementById("message").value += arr[i] + "\n");
});
Now how would I do it? Just use join.
document.getElementById("message").value = arr.join("\n");
Related
sorry for that, but I need your help on something :
I need to get my values in javascript, as it was filled in my form, and I have no clue how to do it, as whenever I tried to search, it was made for people with at least some understanding of javascript. I have none, but tried my best, the results of my efforts are here :
function validateForm() {
var x = form.('form').elements["sexe"];
if (x == null) {
alert("Un sexe doit être sélectionné");
return false;
}
}
I need to get it done by POST method, as get isn't allowed :
<form action="Monformulairedereferencement." method="post" id="sexe" name="form">
<div id="BlueBorder1">
sexe
<input type="radio" id="Homme" name="sexe" value="Homme" aria-checked="true">
<label for="Homme">Homme</label>
<input type="radio" id="Femme" name="sexe" value="Femme" aria-checked="true">
<label for="Femme">Femme</label>
<input type="radio" id="Autre" name="sexe" value="Autre" aria-checked="true">
<label for="Autre">Autre</label>
</div>
<div>
<label for="civilite">civilite</label>
<select name="civilite" id="civilite">
<option value="M.">M.</option>
<option value="Mme.">Mme.</option>
</select>
</div>
<div>
<label for="nom">nom</label>
<input type="text" id="nom" name="nom" minlength="2">
</div>
<div id="BlueBorder2">
<label for="email">email</label>
<input type="email" id="email">
</div>
<div>
<label for="telephone">telephone</label>
<input type="tel" id="telephone" name="telephone">
</div>
<div>
<label for="website">website</label>
<input type="url" name="website" id="website">
</div>
<div id="BlueBorder3">
<label for="datedenaissance">date de naissance</label>
<input type="date" id="datedenaissance" name="date de naissance">
</div>
<div>
hobbies
<input type="checkbox" id="Jeuxvideo" name="hobbies">
<label for="Jeuxvideo">Jeux video</label>
<input type="checkbox" id="Cinema" name="hobbies">
<label for="Cinema">Cinema</label>
<input type="checkbox" id="Lecture" name="hobbies">
<label for="Lecture">Lecture</label>
<input type="checkbox" id="Sport" name="hobbies">
<label for="Sport">Sport</label>
<input type="checkbox" id="Informatique" name="hobbies">
<label for="Informatique">Informatique</label>
</div>
<input id="token" name="token" type="hidden" value="my first website">
<div>
<label for="validation">validation</label>
<input type="submit" value="Envoyer le formulaire" id="validation">
If you have any clue of what isn't working or anything, then I'll gladly accept it. My only goal is to improve and I'm currently very bad.
Have a nice day and thanks for passing by :)
To get a value of a text input in JS, you need to get this input then get its value.
So for example: <input type="text" id="nom" name="nom" minlength="2">
to get this input value in JS, you have to follow 2 steps:
Assign the input element to variable -> let nom = document.getElementById('nom');
Get the value of this input element -> let nomValue = nom.value;
The previous approach can be applied to any text input (text, password, email, ...), textarea, & select menu
For checkboxes or radio buttons, you need to check if they are checked or not, for example: <input type="radio" id="Homme" name="sexe" value="Homme" > to check this, follow 2 steps:
Assign checkbox or radio button to a variable -> let Homme = document.getElementById('Homme');
Check if this checkbox or radio button is checked -> if (Homme.checked) {console.log('Checked')} else {console.log('Checked')}
For simple validation approach for your code, follow this snippet:
<!-- HTML Form -->
<form action="x.php" method="post" id="sexe" name="form">
<input type="text" id="nom" name="nom" minlength="2">
<input type="radio" id="Homme" name="sexe" value="Homme">
<input type="submit" value='Send' >
</form>
<!-- Validation Script -->
<script>
// Get Form Itself
let myForm = document.getElementById('sexe');
// Add Event To Form On Submit, Trigger The Validation Funcntion
myForm.addEventListener('submit', validateForm)
// Validate Form Function
function validateForm(e) {
// Get All Inputs In Your Form
let nom = document.getElementById('nom'); // Text Input
let Homme = document.getElementById('Homme'); // Radio Input
// Check Text Input Value If Not Empty
if(nom.value === '') {
// Prevent Form Submition
e.preventDefault();
// Alert Error Message
alert('Name Can Not Be Empty');
}
// Check If Radio Button Not Checked
else if (!Homme.checked) {
// Prevent Form Submition
e.preventDefault();
// Alert Error Message
alert('Radio Button Is Required');
}
// If The Previous Two Validation Steps Is Done And No Errors, The Form Will Be Sent
}
</script>
In my view, the easiest way to grab the value from the form is to use addEventListners with Submit event. It looks likes an element.addEventListner('submit',function);
var forms = document.getElementsByTagName('form'); //we have selected whole form
function formSubmitted(){
const emails = document.getElementsById('email');//select the email section
let emailValue = emails.value // it will give you the value of email after submitting
}
forms.addEventListner('submit',formSubmitted);//eventlistern which run after submiting the data in form
Html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
</div>
Hello, Can anyone help me with this problem. How to limit the input based on the value of another input using javascript .
For Example the Value of Balance Input is 200 so that the possible input in PaidBalance is within 0-200 only.
Sorry, I'm just a student. Thanks :):)
Something like this?
$("#paidbalance").keyup(()=>{
const balance = parseFloat($("#balance").val())
const paidBalance = parseFloat($("#paidbalance").val())
if( paidBalance > balance)
$("#paidbalance").val(balance)
else if(paidBalance < 0)
$("#paidbalance").val(0)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Paid Balance
</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
Balance
</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
This is with pure javascript without jquery. Also, note that the accepted answer doesn't work if user paste some value with mouse right-click: paste option.
function f1()
{
var max = Number(document.getElementById("balance").value);
var paid = document.getElementById("paidbalance");
var v = Number(paid.value);
//if(isNaN(v)) {...} //input is not a number
if(v>max) {
paid.focus(); //to keep focus on input
paid.value=max; //you may comment out this line to don't override value
}
}
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" oninput="f1()" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" />
</div>
You might wanna change the type to number in this case and add max property in input. If the value of balance Input is different every time. You might considering assign it to a variable and pass it to the max property
Paid Balance</strong>:
<input type="number" name="paidbalance" id="paidbalance" max="200" class="form-control" />
Change the input to type="number" and add jQuery like this:
var balance = $('#balance')
var paidBalance = $('#paidbalance')
paidBalance[0].setAttribute('max', balance.val())
Example:
https://jsfiddle.net/Daniel_Knights/t4hb0z7p/8/
Good day everyone, I'm having a problem on validating my inputs using focusout event. What i wan't is, every time the input was focusout it will validate that input only without affecting the other inputs. The problem is i have a lot of inputs and i wan't it with the same id. That's the problem because when one of my inputs triggered it validate all. I had a lot of research to this and some where relevant to my question but i still i don't get it and i'm new to programming. I need help please!
heres the link: https://jsfiddle.net/m7wa35tc/
var Main = {
init: function(){
this.handleBinds();
},
handleBinds: function(){
$('.required').on("keyup", function(){
if($.trim($(this).val()).length < 1){
$(this).css("border-color", "red");
}else{
$(this).css("border-color", "");
}
});
}
};
$(document).ready(function(){
Main.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Name
<input type="text" id="required">
</label>
<br>
<label>Corporate or Legal Name
<input type="text" id="required">
</label>
<br>
<label>Location Address
<input type="text" id="required">
</label>
<br>
<label>City, State
<input type="text" id="required">
</label>
<br>
<label>Zip/Postal Code
<input type="text" id="required">
</label>
<br>
<label>Country
<input type="text" id="required">
</label>
<br>
<label>Email Addresse
<input type="text" id="required">
</label>
You need to set unique id to each element you want to make reference, in this case use class="required" instead
I'm having trouble storing form field values as jQuery variables. My control text is storing and recalling like a charm.. After much testing i'm still not sure where i'm missing on this. Maybe a stupid human trick that i'm failing to see?
Here is the fiddle: https://jsfiddle.net/brokenmold/f78vrs16/5/
<form class="ajaxform form-horizontal" method="POST" action="">
<label for="billing_org" class="sr-only">Billing Org</label><br>
<input type="text" name="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org"><br><br>
<label>
<input type="checkbox" name="shipping_same" id="shipwreck"> Ship Same As Billing
</label><br><br>
<label for="shipping_org" class="sr-only">Shipping Org</label><br>
<input type="text" name="shipping_org" id="shipping_org" class="form-control" value="Not Checked" placeholder="Shipping Org"><br><br>
<label for="control_test" class="sr-only">Control Test</label><br>
<input type="text" name="control_test" id="control_test" class="form-control" value="Not Checked" placeholder="Contol Test">
</form>
$("#shipwreck").on('click', function() {
var billing_org = $('#billing_org').val();
var control_test = "Control Test";
if ($('#shipwreck').prop('checked')) {
$("#shipping_org").val(billing_org);
$("#control_test").val(control_test);
} else {
$("#shipping_org").val("Not Checked");
$("#control_test").val("Not Checked");
}
});
https://jsfiddle.net/brokenmold/f78vrs16/5/
Your HTML is flawed. There is no ID on the billing_org field, so your code to store that value won't work. Change your HTML for the input field to this and you should be fine:
<input type="text" name="billing_org" id="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org">
The only change in the above from your original code is the addition of id="billing_org".
It's always the simple ones that slip through!
I am novice in Jquery. I want change label text when input box is changed. I have input box with name email.
<input type="text" name="email" id="email" />
When input box is changed I want to set label text to: Send copy to my mail: mail#example.com
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
Send copy to my mail
</label>
I have this Jquery code:
$(function () {
$("#email").keyup(function () {
var email = $("#email").val();
$("label[for='sendCopy']").val('Send copy to my mail: ' + email);
});
});
but when keyup function is triggered label is changed right, but inner input is deleted.
<label for="sendCopy">
Send copy to my mail mail#example.com
</label>
I hope you understand my problem.
You could wrap the text of the label in a span to make it easier to select:
$("#email").keyup(function() {
$('label[for="sendCopy"] span').text('Send copy to my mail: ' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy" />
<span>Send copy to my mail</span>
</label>
Alternatively, you can keep the HTML as it is and amend the textNode directly.
$("#email").keyup(function() {
var textNodes = $('label[for="sendCopy"]').contents().filter(function() {
return this.nodeType == 3;
});
textNodes[textNodes.length - 1].nodeValue = 'Send copy to my mail: ' + $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="email" />
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy" />
Send copy to my mail
</label>
Just change
<label for="sendCopy">
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
Send copy to my mail
</label>
To
<input id="sendCopy" type="checkbox" checked="" name="copy"></input>
<label for="sendCopy">
Send copy to my mail
</label>
You are changing the contents of the label to the text, thus the input inside it is removed, the input is part of the value.
You have to put the input outside of the label, before it.