How to check if an entered value is 10 javascript? - javascript

I want to check if an entered value is 10 or not(and if the value is 10, I want the result to be sent to "send.php"). What am I doing wrong?
<?php $cod1=rand(0, 10);
$cod2=10-$cod1; ?>
<form action='send.php' method='post' onsubmit='f1(this)'>
Please enter the value of <br> <?php echo $cod1 ?> + <?php echo $cod2 ?> in the following box
<input type="text" name="xrezultat" id="xrezultat" class="box" size="32"/>
<input name="Submit1" type="submit" class="butt" value="Trimiteti">
<input name="Submit2" type="reset" class="butt" value="Stergeti ">
</form>
<Script>
function f1(input)
{
if(document.getElementById("xrezultat").value!=10)
aux==false;
if (aux == true)
{
return true;
}
else
{
alert ( "Please enter the correct value" );
return false;
}
}
</script>

aux==false; checks to see if aux is equal to false, it does not assign to it.
It should read aux=false;.

Try using parseInt.
var numberValue = parseInt(document.getElementById("xrezultat").value, 10);

Related

How to make an input field readonly

I want to make the input field readonly. The below code is working for me. But, if the page is refreshed the input fields will become readonly and I cant enter anything in the input field. I want that to become readonly only after the data is present in the input field.
const disableInputs = function() {
sessionStorage.disableInputs = 'true';
document.getElementById('firstname').disabled = true;
document.getElementById('lastname').disabled = true;
document.getElementById('email').disabled = true;
document.getElementById('mew').disabled = true;
};
if (sessionStorage.disableInputs === 'true') disableInputs();
document.getElementById('myButton').onclick = disableInputs;
Any help is much appreciated.Thank you
In HTML:
<input type="text" id="someid" name="somename" readonly="readonly" value="">
In PHP:
<input type="text" id="someid" name="somename" <?php if($value) {
echo 'readonly="readonly"'; } ?> value="<?php echo $value ?>">
In Javascript:
<script>
function disableInputField() {
if (document.getElementById("someid").value) {
document.getElementById("someid").readOnly = true;
}
else {
document.getElementById("someid").readOnly = false;
}
}
</script>
All together:
<input type="text" id="someid" name="somename" <?php if($value) {
echo 'readonly="readonly"'; } ?> value="<?php echo $value ?>" onblur="Javascript:disableInputField();">
Use this: document.getElementById("your-id").readOnly = true;
Source:
https://www.w3schools.com/jsref/prop_text_readonly.asp
Snippet from w3schools:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_readonly2
function myFunction() {
document.getElementById("myText").readOnly = true;
}
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText">
<p>Click the button to set the text field to read-only.</p>
<p><strong>Tip:</strong> To see the effect, try to type something in the text field before and after clicking the button.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
you can just add readonly like required in html for eg.

How can fill the form and return back to modify the records in php

I want to fill the form and able to return back to modify the records. But when I return back I want the form to have the previous values. when I put " />
I got error.
please help
Thank you!
My code
<?php
if (isset($_POST['submit'])) {
$from = 'hello#gmail.com';
$subject = $_POST['subject'];
$text = $_POST['elvismail'];
$output_form = false;
if(empty($subject) && empty($text)) {
echo 'You forgot the email subject and body text.<br />';
$output_form = true;
}
if (empty($subject) && (!empty($text))) {
echo 'You forgot the email subject.<br />';
$output_form = true;
}
if ((!empty($subject)) && empty($text)) {
echo 'You forgot the email body text.<br />';
$output_form = true;
}
if ((!empty($subject)) && (!empty($text))) {
if(isset($_POST['cancel'])) {
echo "cancel";
}
else if(isset($_POST['send'])) {
echo "submit";
}
?>
<form method="post" action="index.php">
<table>
<tr>
<td>Subject of email</td>
<td> <?php echo $subject; ?> </td>
</tr>
<tr>
<td>Body of email</td>
<td><?php echo $text ?> </td>
</tr>
</table>
<input type="submit" name="cancel" value="cancel" />
<input type="submit" name="send" value="Submit" />
</form>
<?php
}
}
else {
$output_form=true;
}
if ($output_form) {
?>
<form method="post" action="index.php">
<label for="subject">Subject of email:</label><br />
<input id="subject" name="subject" type="text" size="30" /><br />
<label for="elvismail">Body of email:</label><br />
<textarea id="elvismail" name="elvismail" rows="8" cols="40"></textarea><br />
<input type="submit" name="submit" value="Submit" />
</form>
<?php
}
?>
In this scenario its much better to use client side resources rather than storing it again on php. Because it is just a temporary value and using Local Storage would benefit you alot.
Javascript or JQuery would be the best approach to accomplish this.
Step 1 : Store the value on LocalStorage after on blur of every input on the form.
Step 2 : When user gets back to page. Simply assign the last data you saved on the localStorage
Because if you refresh the page you will lose the data variables in your php and will require to fetch it again on the database thus resulting on the same data values.
I suggest you read about the LocalStorage and read about controlling inputs with JQuery.
x = $("#form").serialize();
localStorage.setItem("temp_form_data" , x);
// To retrieve it simply convert it to JSON and assign it to each inputs.
var temp = JSON.parse(localStorage.getItem("temp_form_data"));
$("your-input-target").value(temp.id);
$("other-input-target").value(temp.description);
//and so on
This is just what would the implementation look like for setting and getting input data.

javascript required input change input border

im trying to change the border if the user has leave the input empty after posting
well, i have tried:
<script>
function required (id) {
document.getElementById(id).style.border = "#FF0000 5px inset";
}
</script>
<form method="post">
<input type='text' id='req' name='t'>
</form>
<?
if ($_POST)
if (isset($_POST['t']))
echo "u've done";
else
echo "<script>required('req');</script>";
?>
Change your PHP code to the following:
<?php // <- no short tag
if ($_POST) { // <-- add brackets
if (isset($_POST['t']))
echo "u've done";
else
echo "<script>required('req');</script>";
} // <-- add brackets
?>
My solution with javascript :
HTML :
<form method="post" id="form1">
<input type='text' id='req' name='t'>
</form>
<button type="submit" form="form1" value="Submit" onclick="myFunction()">Submit</button>
JAVASCRIPT :
function myFunction() {
if (document.getElementById("req").value == '') {
event.preventDefault();
required("req");
} else {
alert("pas vide");
}
}
function required(id) {
document.getElementById(id).style.border = "#FF0000 5px inset";
}
CodePen
I think that i got a better approach:
<form method="post">
<input type='text' id='req' name='t' <?php if(!$_POST['t']): ?>class='required-input'<?php endif;?>>
</form>
Then in you put the "#FF0000 5px inset" in your css, creating the class "required-input" or whatever.
No intrusive scripts in your code!

php foreach JavaScript validator

<? foreach($words as $word): ?>
<li>
<form id="" method="post" action="">
<span id="first">
<?php print $check = $word['Word']['id'] ?>
</span>
<span>EN:</span>
<input type="text" name="second" id="second" />
<input type="button" class="button" value="Check" onclick="validate()" />
</form>
<script>
function validate() {
var second = document.getElementById('second').value;
var first = <? php echo $check ?> ;
if (second == first) {
alert('Ok!');
} else {
alert(first);
}
}
</script>
</li>
<? endforeach; ?>
Problem with a variable 'first', always equal last id into table and never equal variable 'second'. When I try alert(first); always last id.
There will be first as many times the loop runs. And every time the loop runs the value of first will be overwritten by the next loop. So it is always be the last value in first.
Use some data attribute and use jquery -
<input type="text" name="second" class="second" data-check="<?php echo $check ?>"/>
<input type="button" class="button" value="Check" class="validate_button"/>
And with jquery -
$('.validate_button').on('click', function() {
var second = $(this).siblings('.second').val();
var first = $(this).siblings('.second').data('check');
if (second == first){
alert('Ok!');
} else {
alert(first);
}
// Or return something
});

Disable a button when textbox has data in it

I see so many people ask to disable a button when a textbox is empty . how about disable a button when a textbox has data ?
this is my button code
<input type="submit" name="submit" value="Reserve" />
this is my textbox code
Name : <br><br><input type="text" name="name" value="<?php echo $name;?>" <?php if($name != "") echo "readonly"?> /> <br><br>
Name : <br><br><input type="text" name="name2" value="<?php echo $name2;?>" <?php if($name2 != "") echo "readonly"?> /> <br><br>
<input type="submit" name="submit" value="Reserve" <?php echo ($name != "")?"disabled":""; ?>/>
Using jQuery
$(":input").bind('keyup mouseup',function(){
disable_button();
});
function disable_button()
{
flag = false;
$(":input").each(function(){
if($(this).val()==""){
flag=true;
}
});
if(flag){
$("input[type=submit]").prop("disabled",false);
}
else
{
$("input[type=submit]").prop("disabled",true);
}
}
Demo

Categories