Develop Reference

Javascript check if input field has value

Im trying to figure out how can Javascript check if input field has any value, then it removes class value "is-invalid".
I have this code so far:
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>
<script>
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
element.classList.remove("is-invalid");
}
</script>
As you can see theres a red border (class="is-invalid") around the input. As soon as user puts any value in the inputfield, Javascript will remove class value "is-invalid".
Or might there be an easier option with jQuery?

You have a mistake in your code. You have used
element.classList.remove("is-invalid");
which is wrong, you have to use it like
checkInput.classList.remove("is-invalid");
You can use like this in javascript.
function check(){
var checkInput = document.getElementById("inputName");
if (checkInput.value) {
checkInput.classList.remove("is-invalid");
} else {
checkInput.classList.add("is-invalid");
}
}
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName" onkeyup="check()">
</form>
In Jquery you can try like
$('#inputName').keyup(function(e){
if ($('#inputName').val()) {
$('#inputName').removeClass("is-invalid");
} else {
$('#inputName').addClass("is-invalid");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>

You need to add an event listener to the element to know when it changes.
var checkInput = document.getElementById("inputName");
checkInput.addEventListener('keyup', (e)=>{
if (e.target.value!==''){
e.target.classList.remove("is-invalid");
}
})

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks

here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>

Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}

See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>

If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});

use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

jquery append input field and post

$('#submit').click(function(){
$.post(
'/foo.php',{
name:myform.name.value,
interest:myform.interest.value,
interest2:myform.interest2.value...
}
});
<input type="button" value="Add more interest" />
I have a form use jquery post. There is a button can append more input type text.
My questions
1 when user click and append more input field, in side of $.post(... how can I add more script, so I can post it to next page?
2 in my php page
if(isset($_POST['interest1'], $_POST['interest2']...)){}
how can I know how many extra input fields user has added?
3 how can I limit maximum 3 input fields user can append?

Are you setting form fields manually in your post request?
Bad idea, you'd be better of using jQuery's serialize method:
$.post("/foo.php", $("#myForm" ).serialize() );
For your second question: use array naming on your form elements:
<input type="text" name="interest[]">
<input type="text" name="interest[]">
<input type="text" name="interest[]">
<input type="text" name="interest[]">
This way you get an array in your post array and can use it like so:
foreach ($_POST['interest'] as $interest) {
doStuff();
}
For your third question I'm assuming you wrote a JS method that
adds an input field to the form? If so you could implement
a limit this way:
window.formFieldCount = 1;
function addFormField() {
if (window.formFieldCount >= 3) {
alert('You can only add three interests!');
return false;
}
// Do your form magic here
window.formFieldCount++;
}

HTML:
<form name="some_name">
<div id="interests">
<input type="text" name="interests[]" />
</div>
<input id="more-interests" type="button" value="Add more interest" />
<input id="submit" type="button" value="Submit" />
</form>
Javascript:
$(document).ready(function(){
var maximumNumberOfInterests = 3;
$('#more-interests').click(function(e){
if ($("input[name='interests[]']").size() < maximumNumberOfInterests) {
$('#interests').append('<input type="text" name="interests[]" />');
} else {
alert('The maximum number of interests has been reached!');
}
});
$('#submit').click(function(){
$.post('/foo.php', $('form').serialize());
});
});
PHP:
if (count($_POST['interests'])) {
foreach ($_POST['interests'] as $interest) {
echo $interest;
}
}
Here is a DEMO of the HTML/Javascript part

q2. can you change form like this:
static inputs
<input name='static[something]'>
<input name='static[somebody]'>
<input name='static[etc]'>
and dynamically generated inputs
<input name='dynamic[]'>
<input name='dynamic[]'>
<input name='dynamic[]'>
php
if (isset($_POST['dynamic']))
{
foreach ($_POST['dynamic'] as $key => $value)
{
/* do some shit with dynamic inputs */
}
}

Please use prepend function before form submit
Like
$("#myForm").prepend("<input type=\"text\" name=\"interest"+counter+"\"").submit(function(){
console.log($("#myForm" ).serializeArray())
$.post(Event.target.action, $(Event.target).serializeArray(), function(data){
// your code here
})
return false;
})

show and hide div after submiting an action when checkbox is check and uncheck

I am trying to show or hide div after submitting an action. so let say I have textarea and I put "example" there then checked the checkbox. after submitting, the "receipt.php" page must display "example" , and if I unchecked the checkbox and submit, the receipt.php page must hide the "example". I tried searching similar to my problem but I really don't have idea how to solve it. I have this code so far but i dont have any codes in "receipt.php" since I really don't have idea. pls help me
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" id="checkbox" value ="1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>

You don't need the server response to recognize if the checkbox was checked unless you have some validation on server side. If using JQuery, you can do this:
$('#checkbox').change(function(){
$('#your_div').toggle();
});
If you want to rely on what your server says you need to return something to your ajax call.
for example {response: true/false}

In Html:-
<form method ="POST" action ="receipt.php">
<textarea name ="comment"></textarea><br>
<input type="checkbox" name="reciept-chk" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type ="submit" value ="Print">
</form>
In receipt.php:
<?php
..//recept.php
if(isset($_POST['reciept-chk'])){
// Write Code example here
}
?>
If you want to validate it client side before posting your value in receipt.php then
you can simply validate by piece of jquery.
$(document).ready(function(){
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("#exampleDiv").show();
} else {
$("#exampleDiv").hide();
}
});
});
Please avoide toggle() as it deprecated in 1.8

Here is the code you'll need in your unique PHP file :
<form method="POST">
<textarea name="comment">
<?php (isset($_POST['checkbox1']) && $_POST['checkbox1'] == '1') ? echo "Example"; : echo ""; ?>
</textarea>
<br>
<label for="checkbox1">Show this comment in receipt</label>
<input type="checkbox" id="checkbox1" name="checkbox1" value="1" />
<br>
<input type="submit" value="Print" />
</form>
Replace what you want in place of "Example".

If you are using javascript only, you might try something like this:
<script>
function show(){
if(form.toggledisplay.checked == false){
document.getElementById('example').style.display = "none";
}
else{
document.getElementById('div').style.display = "block";
}
}
</script>
<form method = "POST" action="receipt.php" onsubmit="show()">
<textarea name = "comment"></textarea><br>
<input type="checkbox" name="toggledisplay" id="checkbox" value = "1" >Show this comment in receipt<br>
<input type = "submit" value = "Print">
</form>
<div id="example" style="display:none;">This is the div you want to show</div>
If you are populating the contents of the div from the receipt.php file, you could make a post request to it, when the onsubmit() function is fired and fill the contents of the div like:
document.getElementById('div').innerHTML = "Result from the get/post request"
Hope this points you in the right direction.

Submit name value pair from javascript?

Can JS submit name/vale pairs through a document.testform.submit(); ?
or does it have to be submitted through the html tags, for example
<INPUT TYPE="text" NAME="inputbox1" VALUE="This is such a great form!" SIZE=50><P>

Typically you include an <input type="hidden"> in the form, and set the value you want in the event handler before it gets submitted.
<form method="post" action="thing" id="sandwich"><fieldset>
<input type="text" name="inputbox1" value="This is such a great form!" />
<input type="hidden" name="jsremark" />
</fieldset></form>
<script type="text/javascript">
document.getElementById('sandwich').onsubmit= function() {
this.elements.jsremark.value= 'Secretly it aint that great';
return true;
}
</script>

no, you'll have to mash it yourself into JSON using javascript

With jquery it is very simple:
$("#formid").bind("submit", function(){
var str = $("#formid").serialize();
$.post("url?"+str);
return false;
}

You could set the post data of an ajax request using only JS.

It's plain simple using jQuery:
$.post(url, {"name":"value"})