How to validation form with jQuery? - javascript

I need to create jQuery validation form if text field is empty then came the warning.
This is my code:
<form action="" method="POST">
<input type="checkbox" name="dropshiper_ceck" id="id_dropshiper_ceck">
<label><b><?php echo $text_dropship; ?></b></label>
<div class="" id="id_dropshiper_form" name="dropshiper_form">
<hr/>
<p>
<?php echo $text_dropship_name; ?>
</p>
<input type="text" name="nama_dropshiper" style="width: 97%" placeholder="<?php echo $text_add_name_dropshiper; ?>" id="id_nama_dropshiper" value="">
<br/>
<br/>
<p>
<?php echo $text_dropship_telp; ?>
</p>
<input type="text" name="nomor_telp" style="width: 97%" placeholder="<?php echo $text_add_number_phone_dropshiper; ?>" id="id_nomor_telepon_dropshiper" value="">
</div>
</form>

$('#id_dropshiper_ceck').change(function(){
// Check the textbox when the checkbox is checked
if ($('#id_dropshiper_ceck').prop('checked') == true){
if ($('#id_nama_dropshiper').val() == ""){
// alert message
alert('Warning Message');
}
if ($('#id_nomor_telepon_dropshiper').val() == ""){
// alert message
alert('Warning Message');
}
}
})
I guess you wanna check the textbox when the checkbox is clicked.

Related

How to return second register form on submition?

I have a page with two registration forms individual and business type and individual type form is set as default the other form is hidden, it works fine. but when I switch it to second form and click on submit button it submits second form but returns to first form after submition even on errors it return to first form.
I want it to stay on second form on errors and after submition.
Here is my php :
if (isset($_POST["btnRegister"])) {
echo "Done";
}elseif (isset($_POST["btnbusiness"])) {
echo "Done";
}
HTML and js codes in my page:
function swapConfig(x) {
var radioName = document.getElementsByName(x.name);
for(i = 0 ; i < radioName.length; i++){
document.getElementById(radioName[i].id.concat("Settings")).style.display="none";
}
document.getElementById(x.id.concat("Settings")).style.display="initial";
}
<div class="col-10 clmiddle">
<label for="production"><b>Individual</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
<label for="development"><b> Business</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
</div>
First Form :
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second Form :
<div id="developmentSettings" style="display:none" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
EDIT: I changed JS to php, Here is the solution.
PHP codes (which get url):
$path = $_SERVER['REQUEST_URI'];
$Aurl = explode(",",$path);
for ($i=0; $i<count($Aurl);$i++){
$Burl = str_replace("?", "/", trim($Aurl[$i]));
}
$url = htmlspecialchars(basename($Burl));
$FormPostUrl = basename($path);
Html part :
Checkbox :
<div class="col-10 clmiddle" style="margin-top: 20px;">
<label for="production"><b>Individual</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php"); ?>" name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("register.php")){ echo 'checked="checked"';}?>>
<label for="development"><b>Business</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php?business");?>"
name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("business")){ echo 'checked="checked"';}?>>
</div>
First Form :
<?php if($url === htmlspecialchars("register.php")){?>
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second form:
<?php } elseif($url === htmlspecialchars("business")){ ?>
<div id="developmentSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
<?php } ?>
You can use PHP to control whether display:none is added to your divs or not. Use an if statement (or a ternary operator might be neater syntax in the context) to make the decision about what to echo. Since the default is to display the production settings form, we only need to check whether the other form has been submitted or not, in order to know whether to change that.
e.g. something like this (untested):
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" <?php echo (isset($_POST["btnRegister"]) ? "" : 'checked="checked"'); ?> />
and
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" <?php echo (isset($_POST["btnRegister"]) ? 'checked="checked"' : ""); ?> />
and
<div id="productionSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "style='display:none'" : ""); ?>>
and
<div id="developmentSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "" : "style='display:none'"); ?>>
P.S. Unless you've massively simplified these forms for the purpose of your example, they appear to be basically identical. It's questionable whether you actually need two separate forms at all. The only difference appears to be the choice between "individual" and "business" - that could be handled by a single form with a radio button to choose the type, which would then simplify how you handle the postback as well, and reduce the amount of duplicated code and HTML. Of course if you're actually capturing more distinct fields for these forms than you've shown, then these remarks don't really apply.

How to fill more than one input form using onlick

I'm trying to create a live search with AJAX.
Then when I click the result I want the result to fill 5 input fields.
Here is what I have tried:
Here is my cari.php file:
while ($cari_karyawans = $cari_karyawan->fetch()) { ?>
<div class="result" onclick="fill('nik','<?php echo $cari_karyawans['nik_k_ptayp']; ?>')">
<div class="result" onclick="fill('nama','<?php echo $cari_karyawans['nama_k_ptayp']; ?>')">
<div class="result" onclick="fill('lokasi','<?php echo $cari_karyawans['jabatan_k_ptayp']; ?>')">
<div class="result" onclick="fill('divisi','<?php echo $cari_karyawans['divisi_k_ptayp']; ?>')">
<div class="result" onclick="fill('jabatan','<?php echo $cari_karyawans['lokasi_k_ptayp']; ?>')">
<a><small class="text-muted"><i><?php echo $cari_karyawans['nik_k_ptayp']; ?></i></small> / <small class="text-muted"><i><?php echo $cari_karyawans['nama_k_ptayp']; ?></i></small></a>
</div></div></div></div></div>
<?php } ?>
Here is how I try to fill the result:
function fill(nik, nama, lokasi, divisi, jabatan) {
$('#nik').val(nik);
$('#nama').val(nama);
$('#lokasi').val(lokasi);
$('#divisi').val(divisi);
$('#jabatan').val(jabatan);
$('#display').hide();
}
Here is my input file:
<input type="text" class="form-control" id="nik">
<input type="text" class="form-control" id="nama">
<input type="text" class="form-control" id="lokasi">
<input type="text" class="form-control" id="divisi">
<input type="text" class="form-control" id="jabatan">
Your JS function fill should be :
function fill(id, value) {
$('#'+id).val(value);
}
Because you already sending the id as the first argument and the value as the second.

Insert value from javascript to database

I am making a type of slider form for restaurant management system in which user will select items in each form and the selected values will be displayed at last "confirm form" and i want to insert values of selected items obtained at confirm form to be inserted into database.
<script>
function changeColor(obj){
obj.style.color = "red";
var selected_val = obj.innerHTML;
document.getElementById('target_div').innerHTML=document.getElementById('target_div').innerHTML+" "+selected_val;
}
</script>
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Roti</legend>
<?php
$qu = mysql_query("select * from submenu WHERE menu_id=33") or die(mysql_error());
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Sabji</legend>
<?php
$qu2 = mysql_query("select * from submenu WHERE menu_id=34");
while($f2 = mysql_fetch_array($qu2)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f2['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f2['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Salad</legend>
<?php
$qu3 = mysql_query("select * from submenu WHERE menu_id=35");
while($f3 = mysql_fetch_array($qu3)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f3['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f3['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Sweets</legend>
<?php
$qu4 = mysql_query("select * from submenu WHERE menu_id=36");
while($f4 = mysql_fetch_array($qu4)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f4['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f4['id']; ?>"/>
</p>
<?php } ?>
</fieldset>
<fieldset class="step">
<legend>Confirm</legend>
<p>
<label id="target_div" for="name"></label>
</p>
<p class="submit">
<button id="registerButton" type="submit" name="confirm">Confirm</button>
</p>
</fieldset>
</form>
I want to insert the value obtained at confirm form into database using PHP.
This is the essential part:
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name" name="name" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
You repeat it for other categories (salas, sweets, etc), so let's look at that first.
And a few things are wrong with it.
First, your label says for="name". Name should be a UNIQUE identifier in the document. An identifier is an id="whatever". So if you want to target a specific element with your label, be sure to make the id="" match the for="".
In your case this is most easily done by adding a unique key from the underlying database-table.
But I cannot help because I cannot see your columns in the database. You use:
select * from submenu WHERE menu_id=33
Please stop using the lazy * and NAME the columns you need.
I hope you have a column that is the primary key in tblsubmenu. Let's say it is id. (I think a better name would have been submenuid.)
Then you can use that to do the labeling and id's right, like this:
<?php
$qu = mysql_query("select submenuid, submenu, from submenu WHERE menu_id=33") or die(mysql_error());
while($f = mysql_fetch_array($qu)){
?>
<p>
<label for="name<?php echo $f['id']; ?>" onclick="changeColor(this)"><?php echo $f['submenu']; ?></label>
<input id="name<?php echo $f['id']; ?>" name="submenuid[]" type="hidden" AUTOCOMPLETE=OFF value="<?php echo $f['id']; ?>"/>
</p>
<?php } ?>
That way you have matching for="" and id="", for example: in the label: for="name181" and an id="name181".
Also note I changed your input form-element, now it's name is "submenuid[]"
If you now post the form, you will receive an ARRAY in $_POST["submenuid"].
Print it out with:
echo "<pre>".print_r($_POST,true)."</pre>";
And see if it matches what you wanted to send.
If so, you can now start with inserting, for example:
foreach ($_POST["submenuid"] as $submenuid){
$id = (int)$submenuid; // force it to be an integer
$SQL = "INSERT INTO tblorders (submenuid, customerid) VALUES ($id, 111)";
// execute here against database, see links below
}
w3schools-link for starters
PHP website mysqli.query.php

jquery doesn't focus the selected item

I have the following code that:
check the relevant checkbox if the user input a value in a text input
verify if user input is duplicated, alert and focus the text input where user inserted the wrong value
This is my code:
$('.seq').blur(function(){
if($(this).val()!=''){
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", true);
if ($('.seq').not(this).val() == $(this).val()) {
alert('Duplicated entry. Change it please.');
console.log($(this).attr('name'));
$(this).focus();
}
}else if ($(this).val()=='') {
$(this).closest(".percheckbox").find("input:checkbox:first").prop("checked", false);
}
});
The only point that is not working is $(this).focus(); even if console.log shows that 'this' is the right element.
EDIT: this is the html:
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<?php $i = 0; foreach($msgs as $msg) { ?>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio[<?php echo $i; ?>]" value="<?php echo $msg['id']; ?>">
<?php echo $msg['nome']; ?>
<br>
<label>Ordine: </label><input class="seq" size="2" maxlength="2" type="text" name="ordine[<?php echo $i; ?>]">
</div>
<?php $i += 1; } ?>
<br style="clear: both;">
</div>
Sorry for the wrong code formatting but I still have some problems with stackoverlow text editing.
Your code does work actually, check this fiddle: http://jsfiddle.net/6pbx2yof/
Check if none of your other code interfers with it. I'd remove everything else and check if it works, then piece by piece re-add your other code.
Stackoverflow doesn't let me answer without code so here is the html code I used (JS Code is unchanged)
<div class="sez-form">
<fieldset>
<legend>Messaggi inclusi</legend>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio0" value="0"/>
0
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine0"/>
</div>
<div class="percheckbox">
<input class="checkseq" type="checkbox" name="messaggio1" value="1"/>
1
<br>
<label>Ordine: </label>
<input class="seq" size="2" maxlength="2" type="text" name="ordine1"/>
</div>
</fieldset>
<br style="clear: both;">
</div>

Auto submit login form and start session

I am trying to auto submit login form by using javascript but it cannot start session and redirect to same page but when i am try to submit same form without javascript it working.
I need to submit form automatically. Any suggestion?
<?php include('_header.php'); ?>
<form id="my_form" method="post" action="index.php" name="loginform">
<label for="user_name"><?php echo WORDING_USERNAME; ?></label>
<input id="user_name" type="text" value="something" name="user_name" required />
<label for="user_password"><?php echo WORDING_PASSWORD; ?></label>
<input id="user_password" type="hidden" value="something1" name="user_password" />
<input type="checkbox" id="user_rememberme" name="user_rememberme" value="1" />
<label for="user_rememberme"><?php echo WORDING_REMEMBER_ME; ?></label>
<input type="submit" name="login" value="<?php echo WORDING_LOGIN; ?>" />
</form>
<script type="text/javascript">
function submitForm() {
document.getElementById('my_form').submit();
}
window.onload = submitForm;
</script>
<?php echo WORDING_REGISTER_NEW_ACCOUNT; ?>
<?php echo WORDING_FORGOT_MY_PASSWORD; ?>
<?php include('_footer.php'); ?>
If you want to autosubmit your form upon page visit you simply put this code after your form:
<script>
document.getElementById('my_form').submit();
</script>
the problem is that you are submiting form over and over again, try this, check if form has already been submited and if not submit a form otherwise skip submition
<script type="text/javascript">
function submitForm() {
document.getElementById('my_form').submit();
}
<?php if(!isset($_REQUEST['login']) ) : ?> window.onload = submitForm; <?php endif ?>
</script>

Categories