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!
Related
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.
I have multiple form like this:
<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
<form>
<input name="<?php echo $i; ?>venue" type="text">
<input name="roster" type="text">
<input type="submit" name="btn_venue">
</form>
<?php } ?>
<form>
<input name="hospitality" type="text">
<input name="template" type="text">
<input type="submit" name="btn_hospitality">
</form>
...
...
<form>
<input name="element" type="text">
<input name="alignment" type="text">
<input type="submit" name="btn_xyz">
</form>
I want validate(field should not be blank) in all form so, how can I use validation ?
I tried jQuery validation:
<script>
$('document').ready(function () {
$('form').each(function (key, form) {
$(form).validate({
rules: {
hospitality: {
required: true
},
//...
//...
alignment: {
required: true
}
});
});
});
</script>
I have manage static name field validation but I don't idea about dynamic venue name validation.Can anyone help me ?
if only one form the easily maintain but dynamically multiple form submit validate how to validate.
at a time only one form submit but particular form field validate how it is possible?
Try this. It goes through each form and for each of them through each input (of type text) and builds a required rule for each of them. Then feeds the dynamically built rules to the validate function.
$('document').ready(function () {
$('form').each(function (key, form) {
// build the rules object dynamically
var rules = {};
// loop through each input in the form
$(form).find('input[type="text"]').each(function(idx, obj) {
// make a rule for this input
rules[obj.name] = {"required": true};
});
$(form).validate({
"rules": rules
});
});
});
Okey this is not for sure the cleanest way to do this but its the first that cross my mind.
First, edit your html, so form has id="form$i", input has id="input$i", and submit has id="$i". Also add class to submit class="validate"
<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
<form id="form<?php echo $i; ?>">//so id="form2" for example
<input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2"
<input name="roster" type="text">
<input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2"
</form>
<?php } ?>
JQuery which should work, I'll explain each line in code
<script>
$(function () {
$(".validate").click(function () { //this is call for each click button with class validate
var id = $(this).attr('id');//getting id of the clicked element which is $i
var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1)
var input = 'input' + id;//creating input which value will be input$i
$('#' + formid).on('submit', function (e) {//on form submit validate function
if ($(#input).value == '') {
return false;
} else {
return true;
}
});
});
});
</script>
hope you understand logic, it might be I made mistake somewhere so take a close look..
I have a radio button and a submit button. On click of this submit button, I need to display a div.
My code is as follows:
<form action="" method="GET" name="myform">
<input type="radio" name="ID" value="total" id="radioInputValue"/>
<input type="submit" name="details1" value="Details"
onclick="return showDiv();"/>
<div id="element_to_pop_up" style="display: none;">
<?php
echo "DETAILS";
if (isset($_GET['details1'])) {
if (isset($_GET['ID'])) {
$n = $_GET['ID'];
echo "VALUE IS = $n";
}
} else {
echo "</br> DETAILS FAILED";
}?>
</div>
</form>
My JavaScript:
function showDiv() {
document.getElementById('element_to_pop_up').style.display = 'block';
return false;
}
Style:
#element_to_pop_up
{
background-color:#fff;
border-radius:15px;
color:#000;
padding:20px;
min-width:400px;
min-height: 180px;
}
I am getting the div on click of the details button. But its not entering the if condition .
Instead its giving the output as:
DETAILS
DETAILS FAILED
I want this as my output:
DETAILS
VALUE IS = total
How can i get this radio button value on clicking submit button, Plz help
just copy paste it: it works fine..
<form action="" method="POST" name="myform">
ONE<input type="radio" name="ID" value="total" id="radioInputValue" />
<input type="submit" name="details1" value="Details" onclick="return showDiv();" />
</form>
<div id="element_to_pop_up">
<?php
echo"DETAILS";
if(isset($_POST['details1']))
{
if(isset($_POST['ID']))
{$n=$_POST['ID'];
echo "VALUE IS = ".$n;
}
else
{
echo"</br> DETAILS FAILED";
}
}
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
function showDiv() {
document.getElementById('element_to_pop_up').style.display = 'block';
// return false;
}
</script>
Change your submit button like this:
<input type="submit" name="details1" value="Details" onclick="showDiv()" />
When you click your button, it displays the div.
Your PHP code should work, but make sure the file is .php and not .html or .htm.
How to set readonly all input except input that user try to fill data ?
When user loads page index.php and tries to fill data into EG: <input id="edValue2" ...>, I want to set readonly all input except <input id="edValue2" ...>
But my code not work, how can i do ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<input id="edValue<?PHP echo $i; ?>" type="text" onKeyUp="send_it_register_to_hidden_input<?PHP echo $i; ?>()" onKeyPress="send_it_register_to_hidden_input<?PHP echo $i; ?>()"><br>
<?PHP
}
?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<script>
function send_it_register_to_hidden_input<?PHP echo $i; ?>()
{
lblValue.value = $("#edValue<?PHP echo $i; ?>").val();
lblValue_number.value = <?PHP echo $i; ?>;
Check_register_it();
}
</script>
<?PHP
}
?>
<script>
function Check_register_it()
{
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
}
</script>
</html>
I strongly suggest don't create functions like that. It just makes your codes complicated. Use classes in this case so that you don't need to setup functions for each id that you want to manipulate:
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP for ($i=1;$i<=5;$i++) { ?>
<input class="input_boxes" type="text" data-i="<?php echo $i; ?>"><br/>
<?PHP } ?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.input_boxes').on('keyup', function(e){
var value = $(this).val();
var i_val = $(this).attr('data-i');
$('#lblValue').val(i_val);
$('#lblValue_number').val(value);
$('input').prop('readonly', true);
$(this).prop('readonly', false);
});
</script>
Assuming all inputs are children of the same element (i.e. siblings), you can use jQuery to do this easily:
$('input').on('focus', function(){
$('input').removeAttr('readonly');
$(this).siblings().attr('readonly', 'readonly');
});
JSBin:
http://jsbin.com/qukohosafuje/1/edit
Try this :-
$("input").on('keyup', function () {
$('input').not(this).attr('readonly', 'readonly');
});
DEMO
You have to put all JQuery statement within:
$(function(){
//put your JQuery code here
});
Try and let me know if now works.
You can simply use the html attribute of readonly for the inputs you don't want users to fill.
e.g
<input type="text" id="lblValue" value="" readonly>
if you would required the readonly inputs to be accessible after the necessary input has been filled, you can use jquery to trigger the event.
e.g
$('input').keyUp(function(){
if($('#edValue2').val()!=""){
$('input:not("#edValue2")').removeAttr('readonly');
})
Friends,
I'm a newbie to PHP.
I've had a problem to deal with that I couldn't understand, so I posted it in this thread.
I've dynamically created 2 textboxes and a button.
Question ID text field
Question text field
Change Button
for the change button I need to write a 'onclick' javascript to pass Question ID
and Question value to a PHP function (set_id) written inside the Same file. In fact that’s why i
Called Form action $_SERVER[“PHP_SELF”].
Here’s my code.
<html>
<head>
<script>
function getvalue(value)
{
var qid_value = 'qid_'+value.substring(4);
alert('QID = '+ document.getElementById(qid_value).value + ' QUESTION = ' + document.getElementById(value.substring(4)).value);
/*
I created this javascript alert to test the id s of textboxes and their values
*/
}
</script>
</head>
<body>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<!-- These fields are dynamically created -->
<input type="text" id="'.$var_id.'" name="'.$var_id.'" value="'.$row['qid'].'" readonly size="2 px"/>
<input type="text" id="'.$var_question.'" name="'.$var_question.'" value="'.$row['question'].'" style="size:auto"/>
<input type="button" id="'.$var_question.'" name="'.$var_question.'" value="Change" onclick="getvalue(this.name)"/>
<!-- These fields are dynamically created -->
</form>
</body>
</html>
<?php
$msg= "";
function display($qid,$question)
{
require('uni_db_conn.php'); // this is my db connection
$qid = $_POST[$qid];
$question= $_POST[$question];
$query = "UPDATE question SET question='.$question.' WHERE qid='.$qid.'";
$result = mysql_query($query);
if(!$result)
{
$msg= 'Cant Insert Values to the Table !'.mysql_error();
}
else
{
$msg = 'Successfully Added to the Table !';
}
echo '<label>'.$msg.'</label>';
}
function set_id($qid,$question)
{
if(isset($_POST[$question]))
{
display($qid,$question);
}
}
?>
Thank You ! Sorry If there was any mistake.
Try this code
<?php
if(isset($_POST['submit'])){
$QID = $_POST["qid"];
$QUE = $_POST["question"];
echo $QID;
echo $QUE;
}
?>
<html>
<head>
<script language="javascript">
function getvalue()
{
var valid= true;
var id = document.getElementById("ID").value;
var ques = document.getElementById("ques").value;
return valid;
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onSubmit=" return getvalue()" >
<input type="text" id="ID" name="qid"/>
<input type="text" id="ques" name="question"/>
<input type="submit" name="submit" value="Change"/>
</form>
</body>
</html>