need your help on this.
I have 2 click event, one on table which is for add mode and one button which is on another table for update mode. These two mode has one input property, it changes value when I clicked for add and update. My problem is from update mode then to add click event, when I (button) submit the add value, the mode is still on update. It changes the existing value not adding another value to database.
How would I end the update mode to give way the add mode?
<form method="post" id="api_crud_form">
<h4 class="modal-title" id="h4">Add / Update Item</h4>
<hr>
<div class="row">
<div class="col-md-1">
<button type="submit" name="button_action" id="button_action-insert" class="btn btn-danger btn-sm form-control" value="Insert">Save</button>
<button type="submit" name="button_action" id="button_action-update" class="btn btn-danger btn-sm form-control" value="Update">Update</button>
<input type="hidden" name="product_id" id="product_id" />
<input type="hidden" name="order_id" id="order_id" />
<input type="text" name="tran_id" id="tran_id" value="<?php echo $tran_id; ?>" />
<input type="hidden" name="tran_amount" id="tran_amount" />
<input type="hidden" name="action" id="action" value="insert" />
</div>
<div class="col-md-2">
<input type="text" name="tran_quantity" id="tran_quantity" placeholder="Enter Quantity here" autocomplete="off" class="input form-control" />
</div>
<div class="col-md-7">
<input type="text" name="product_description" id="product_description" class="input form-control" readonly/>
</div>
<div class="col-md-2">
<input type="text" name="product_price" style="text-align: right;" id="product_price" class="input form-control" readonly/>
</div>
</div>
<hr>
</form>
Here is JS code
$('#api_crud_form').on('submit', function(event){
event.preventDefault();
if($('#tran_quantity').val() == '') {
alert("Enter Quantity");
} else if ($('#tran_quantity').val() == '0') {
alert("Enter a valid number!");
} else if ($('#product_description').val() == '') {
alert("You have not selected an item yet.");
} else if ($('#product_price').val() == '') {
alert("You have not selected an item yet.");
} else {
var form_data = $(this).serialize();
$.ajax({
url:"action.php",
method:"POST",
data:form_data,
success:function(data) {
fetch_data();
$('#api_crud_form')[0].reset();
$('#apicrudModal').modal('hide');
if(data == 'insert') {
alert("Item inserted successfully!");
}
if(data == 'update') {
alert("Item updated successfully");
}
}
});
}
});
Related
My HTML code is
<body>
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
<script>
function search() {
var Tab = document.getElementById("Tab").value;
alert(Tab);
var Eamillogin = document.getElementById("UEmailLogin").value;
if (Eamillogin == "") {
alert("please enter email");
Eamillogin.focus();
}
}
</script>
</body>
When I click on submit button, JavaScript alert shows "please enter email". It works fine. But Eamillogin.focus(); not working. After showing alert, the form automatically direct to test1.php page.Pointer not focus on Email. How to correct it?
Eamillogin variable contains the value of the #UEmailLogin element.
To set the focus on the element, use element.focus();
Here's updated code
var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") { // Added .value here
alert("please enter email");
Eamillogin.focus(); // Focus element
}
function search() {
var Tab = document.getElementById("Tab").value;
var Eamillogin = document.getElementById("UEmailLogin");
if (Eamillogin.value === "") {
alert("please enter email");
Eamillogin.focus();
}
}
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
my form is not posting values even though i have put method="post" and i think there is no error in my form.i have hide some input types by javascript. i am not understanding where the problem is can you rectify that ..my code is
<?php include "header.php" ?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="col-md-9" style="padding-top:10px;">
<h3 align="center">Blood Bank Registration </h3>
<form role="form" action="bbinsert.php" method="post" style="color:black">
<div class="form-group">
<input type="text" class="form-control" name="bbname" id="college" placeholder="Blood bank name" required>
</div>
<div class="form-group">
<select class="form-control" id="district" name="district" required>
<option >Select District</option>
<option value="prakasam">Prakasam</option>
<option value="guntur">Guntur</option>
<option value="Nellore">Nellore</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="mandal" name="mandal" required>
<option >Select Mandal</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="village" name="village" required>
<option >Select Village</option>
</select>
</div>
<div class="form-group" >
<input type="text" class="form-control" name="phno" placeholder="contact number" >
</div>
<p align="right">create employee<button onclick="return show();"><span class="glyphicon glyphicon-plus" ></span></button></p>
<div id="empform" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname1" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid1" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password1" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno1" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide();"><span class="glyphicon glyphicon-minus" ></span></button><button onclick="return show1();"><span class="glyphicon glyphicon-plus" ></span></button></p>
</div>
<div id="empform2" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname3" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid3" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password3" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno3" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide2();"><span class="glyphicon glyphicon-minus" ></span></button></p><br>
</div>
<input type="submit" class="btn btn-success" value="create" >
</form>
<script>
function show() {
if(document.getElementById('empform').style.display=='none') {
document.getElementById('empform').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('empform').style.display=='block') {
document.getElementById('empform').style.display='none';
}
return false;
}
function show1() {
if(document.getElementById('empform1').style.display=='none') {
document.getElementById('empform1').style.display='block';
}
return false;
}
function hide1() {
if(document.getElementById('empform1').style.display=='block') {
document.getElementById('empform1').style.display='none';
}
return false;
}
function show2() {
if(document.getElementById('empform2').style.display=='none') {
document.getElementById('empform2').style.display='block';
}
return false;
}
function hide2() {
if(document.getElementById('empform2').style.display=='block') {
document.getElementById('empform2').style.display='none';
}
return false;
}
</script>
bbinsert.php
<?php
include "connection.php";
if (isset($_POST['submit']))
{
$bbname=$_POST['bbname'];
$district=$_POST['district'];
$mandal=$_POST['mandal'];
$village=$_POST['village'];
$phno=$_POST['phno'];
$insertbb=mysqli_query($conn,"INSERT INTO bloodbanks(bbname,bbdistrict,bbmandal,bbcity,phno)VALUES('$bbname','$district',$mandal','$village','$phno')");
if(!$insertbb)
echo "error in blood bank insertion".mysqli_error($conn);
else
echo "successfully inserted blood banks";
$emp1 = array('empname1', 'empid1', 'password1','phno1');
$emp2 = array('empname2', 'empid2', 'password2','phno2');
$emp3 = array('empname3', 'empid3', 'password3','phno3');
$error = false; //No errors yet
foreach($emp1 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error = true; //Yup there are errors
}
}
if(!$error) {
$empn1=$_POST['empname1'];
$empid1=$_POST['empid1'];
$password1=$_POST['password1'];
$phno1=$_POST['phno1'];
$insert1=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn1','$emmpid1','$password1 ','$phno1','$bbname')");
if(!$insert1)
echo "error in emp1".mysqli_error($conn);
else
echo "success emp1";
}
$error1 = false; //No errors yet
foreach($emp2 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error1 = true; //Yup there are errors
}
}
if(!$error1) {
$empn2=$_POST['empname2'];
$empid2=$_POST['empid2'];
$password2=$_POST['password2'];
$phno2=$_POST['phno2'];
$insert2=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn2','$emmpid2','$password2','$phno2','$bbname')");
if(!$insert2)
echo "error in emp2".mysqli_error($conn);
else
echo "success emp2";
}
$error3 = false; //No errors yet
foreach($emp3 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error3 = true; //Yup there are errors
}
}
if(!$error3) {
$empn3=$_POST['empname3'];
$empid3=$_POST['empid3'];
$password3=$_POST['password1'];
$phno3=$_POST['phno3'];
$insert3=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn3','$emmpid3','$password3','$phno3','$bbname')");
if(!$insert3)
echo "error in emp3".mysqli_error($conn);
else
echo "success emp3";
}
}
else
{
echo "submit method did not post the form";
}
?>
`
Your submit button doesn't have a name attribute. So no post element called "submit" exists. Put a name on your submit button if you want it to post.
Here is my HTML and jquery Ajax Code, i want when first row successfully proceed, One new row created by jquery. However first row properly work and proceed, but when second row created by ajax. it does not work, when i submit, it redirect on same page. Please check my code and let me know why my second row not work properly. how i can handle this situation ?
HTML CODE:
<div id="songsList">
<div class="songRow">
<div class="SongStatus"></div>
<form action="" method="POST" class="songsForm">
<div class="col-sm-3">
<input type="text" name="song_title" class="form-control" placeholder="Song Title">
</div>
<div class="col-sm-2">
<input type="text" name="singer_name" class="form-control" placeholder="Singer Name">
</div>
<div class="col-sm-2">
<input type="text" name="album_name" class="form-control" placeholder="Album Name">
</div>
<div class="col-sm-1">
<input type="text" name="album_year" class="form-control" placeholder="Year">
</div>
<div class="col-sm-3">
<input type="text" name="song_url" class="form-control" placeholder="Song Url http://">
</div>
<input type="hidden" name="songsSubmit" value="yes">
<div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div>
</form>
</div>
<hr />
</div>
Jquery/Ajax Code:
$(function() {
$('.songsForm').submit(function (event) {
event.preventDefault();
event.returnValue = false;
$.ajax({
type: 'POST',
url: 'post.php',
data: $(this).serialize(),
beforeSend: function() {
$(".copySongUrl :button").remove();
$(".copySongUrl").append('<img src="images/ajax-loader.gif" class="ajaxImage">');
},
success: function(res) {
if (res == 'success') {
$(".ajaxImage").remove();
$('input[name=song_title]').attr("disabled", true);
$('input[name=singer_name]').attr("disabled", true);
$('input[name=album_name]').attr("disabled", true);
$('input[name=album_year]').attr("disabled", true);
$('input[name=song_url]').attr("disabled", true);
$('.copySongUrl').append("<button type='button' id='plain-copy' class='btn btn-info'><i class='glyphicon glyphicon-paperclip'></i> Copy Url</button><script>document.getElementById('plain-copy').addEventListener('click', function() { clipboard.copy('<?php if(isset($_SESSION['uploadedUrl'])) echo $_SESSION['uploadedUrl']; ?>').then(function(){ document.getElementById('plain-copy-result').textContent = 'success'; }, function(err){ document.getElementById('plain-copy-result').textContent = err; });});<\/script>");
// Here Adding New Row, Similar Like Top HTML
$('#songsList').append('<div class="songRow"> <div class="SongStatus"></div> <form action="" method="POST" class="songsForm"><div class="col-sm-3"><input type="text" name="song_title" class="form-control" placeholder="Song Title"></div><div class="col-sm-2"><input type="text" name="singer_name" class="form-control" placeholder="Singer Name"></div><div class="col-sm-2"><input type="text" name="album_name" class="form-control" placeholder="Album Name"></div><div class="col-sm-1"><input type="text" name="album_year" class="form-control" placeholder="Year"></div><div class="col-sm-3"><input type="text" name="song_url" class="form-control" placeholder="Song Url http://"></div><input type="hidden" name="songsSubmit" value="yes"><div class="copySongUrl"><button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button></div> </form></div><hr />');
} else {
$(".ajaxImage").remove();
$(".copySongUrl").append('<button type="submit" class="songUploadButton" class="btn btn-primary"><i class="glyphicon glyphicon-upload"></i> Upload</button>');
$(".SongStatus").append("<div class='alert alert-info'><li class='glyphicon glyphicon-warning-sign'></li> <b>"+ res +"</b></div>");
}
},
error: function () {
$('.SongStatus').html('Failed').slideDown();
}
});
});
});
You should change this:
$('.songsForm').submit(function (event) {
to this:
$('.songsList .songRow').submit('.songsForm',function (event) {
This is called delegated event.
Since your original code is pin pointing an element (could be a set of elements), it attaches the event to the element/s once only, and when further clones are created they dont have the event attached.
Delegated events are basically applied to the parent (element container) and then whenever an identified element is rendered within the parent, the element is immediately attached.
You can read here: Event Delegation
Basically, I want to prepend a div only if the div I'm prepending isn't already showing.
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
At the moment, I'm trying to make it so the jquery will only do the if empty if statement if the error isn't currently visible however it's not working...
<div class="pageCont">
<div class="title">
<h1>LetsChat</h1>
<h4>The new way of interaction.</h4>
</div>
<div class="login box">
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br>
<input type="password" class="loginInput password" placeholder="Password" /><br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
</div>
<div class="signup box">
<form method="POST" action="#" class="signupForm">
<input type="text" class="signupInput" placeholder="First Name" /><br>
<input type="text" class="signupInput" placeholder="Last Name" /><br>
<input type="text" class="signupInput" placeholder="Aquinas Email" /><br>
<input type="password" class="signupInput" placeholder="Password" /><br>
<input type="submit" class="purple btn signup" value="Sign Up Today!">
</form>
</div>
</div>
The below should work if I'm understanding your question correctly?
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error").length;
if (!username || !password)
{
if(errorvisible == 0)
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
I have used this type of code many times:
if(!$('#myFancyDiv').is(':visible')) {
//prepend or do whatever you want here
}
BTW just for clarity, this code checks if 'myFancyDiv' is not visible.
You can check whether the .error.alert elements exists, if so don't do anything else create a new one
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
if (!$('.error.alert').length) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$(this).remove();
});
}, 6000);
}
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" />
<br>
<input type="password" class="loginInput password" placeholder="Password" />
<br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
I have a bootstrap popup form with a few input fields. I've added a submit button to the form, that triggers client-side JS validation. However, when the button is clicked, the current value of the input fields is not captured by jQuery's val() method: I just get an empty string.
Here is the markup:
<div class="popover fade right in" style="top: -154.5px; left: 249px; display: block;">
<div class="arrow">
</div>
<h3 class="popover-title">New Job Site contact</h3>
<div class="popover-content">
<form class="popover-form form-horizontal" id="newjobsite_contact_form" accept-charset="utf-8" method="post" action="http://dev.temperature/home/#">
<div class="form-group">
<div class=" required ">
<input type="text" class="form-control" id="popover-first_name" required="1" placeholder="First name" value="" name="first_name">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
</div>
<div class=" required ">
<input type="text" class="form-control" required="1" placeholder="Phone" value="" name="phone">
</div>
<div class="">
<input type="text" class="form-control" placeholder="Mobile" value="" name="mobile">
</div>
<div class="">
<input type="email" class="form-control" placeholder="Email" value="" name="email">
</div>
<div class="">
<input type="url" class="form-control" placeholder="Website" value="" name="website">
</div>
</div>
<div class="popover_buttons">
<button class="btn btn-success" onclick="submit_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_submit">Submit</button>
<button class="btn btn-warning" onclick="close_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_cancel">Cancel</button>
</div>
</form>
</div>
</div>
Here is the JS:
function submit_newjobsite_contact() {
errors_found = validate_popover_form($('#newjobsite_contact_form'));
if (errors_found.length == 0) {
// Form values submitted to PHP code through AJAX request here
} else {
error_msg = "Please check the following errors:\n";
$(errors_found).each(function(key, item) {
error_msg += "- "+item.message+"\n";
});
alert(error_msg);
}
}
function validate_popover_form(form_element) {
found_errors = [];
$('span.error').remove();
form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
console.log($(item).val()); // More validation here, just putting debugging code instead
});
return found_errors;
}
What am I doing wrong? All other attributes for these input fields are being correctly retrieved by jQuery, just not the value after I've typed text into them.
The answer to this problem couldn't be found here because I didn't post the whole source JS, which is too large. What really happened is that I accidentally cloned the popover form, which led to a duplication of the input fields.
form_element.find('select,input').each(function(key, item) {
if ($(item).attr('required') && $(item).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
}
I Modified it to:
form_element.find('select,input').each(function(key, item) {
if ($(this).data('required') == '1' && $(this).val().length == 0) {
found_error = true;
found_errors.push({elementname: $(this).attr('name'), message: "A value for "+$(this).attr('placeholder')+" is required"});
}
Try using data attributes so instead of using required="1" use data-required="1"
<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
so your input should be like this:
<input type="text" class="form-control" data-required="1" placeholder="Surname" value="" name="surname">