I've got a Bootstrap 3 form on my website. The form sends messages fine, however when the user submits the form the fields aren't clearing afterwards - how do I fix this?
This is the 'contact.php' code below.
Link to the 'contact_me.js' https://jsfiddle.net/wookie/6uag6goe/
<form class="form-horizontal" role="form" method="post" action="contact.php">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
<div class="form-group">
<label for="service" class="control-label">Service</label>
<select class="form-control" id="service" name="service">
<option>Please select a service:</option>
<option>service1</option>
<option>service2</option>
<option>service3</option>
<option>service4</option>
<option>service5</option>
<option>service6</option>
</select>
</div>
<div class="form-group">
<label for="message" class="control-label">Message</label>
<textarea class="form-control" rows="4" name="message">
<?php echo htmlspecialchars($_POST[ 'message']);?>
</textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
<div class="form-group">
<label for="human" class="control-label">2 + 3 = ?</label>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send Message" class="btn btn-lg btn-default btn-block">
</div>
<div class="form-group">
<?php echo $result; ?>
</div>
Change this
$('#contactForm').trigger("reset");
to
$('#contactForm')[0].reset();
Let your form has an id contactForm then:
$('#contactForm').on('submit', function() {
$(this).each(function() {
this.reset();
});
});
You are echoing out the posted data. You only want to do that when there is an error in the posted data.
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
However you are doing your server side error detection you need to only do the echo above if there is an error. Say you store a $isError variable then you would change this to:-
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo $isError ?htmlspecialchars($_POST['email']) : ""; ?>">
Related
<div class="form-group">
<label for="inputEmail">Part Number:</label>
<input class="form-control" id="inputEmail" type="text" name="partnum" value="<?php echo $partnum; ?>" style="width: 400px;" required>
</div>
<div class="form-group">
<label for="inputEmail">Serial Number:</label>
<input class="form-control" id="inputEmail" type="text" name="serialnum" value="<?php echo $serialnum; ?>" style="width: 400px;" required>
</div>
function myFunction() {
document.getElementById("tobedisabled").disabled = true;
}
<input type="text" onchange = "myFunction()" />
<input type="text" id="tobedisabled" />
Staff user can only edit some selected input fields, remaining input fields will be read-only, but Admin can edit all the fields. I am a beginner in PHP and i am trying to do it for the last few days but in-vain.
<div class="row">
<div class="col-lg-6" style="margin-bottom: 20px;">
<?php
if(isset($_POST['submit'])) {
if(($_POST['action']=='edit') || ($_POST['action2']=='edit')) { ?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="form-horizontal" role="form" enctype="multipart/form-data">
<?php
$edit_id=$_POST['selector'];
$N = count($edit_id);
for($i=0; $i<$N; $i++) {
$result = mysql_query("SELECT * FROM ".TSURPHU." WHERE id='$edit_id[$i]'");
while($row = mysql_fetch_array($result)) { ?>
<input type="hidden" name="id[]" id="id" value="<?php echo $row['id'] ?>">
<div class="form-group">
<div style="float:left">
<label><span class="tibetan">ཨང་à¼</span> Receipt No:</label>
<input type="text" class="form-control" style="width: 60% !important; color:#999999;" name="receipt_no[]" value="<?php echo $row['receipt_no']; ?>" readonly>
</div>
<div>
<label><span class="tibetan">* ཟླ་ཚེསà¼</span> Date: (yyyy-mm-dd)</label>
<input class="form-control" style="width: 20% !important;" type="text" readonly="readonly" name="subDate[]" value="<?php echo $row['subDate']; ?>" >
</div>
</div>
<div class="form-group">
<label><span class="tibetan">* དད་དམ་མཆོག་à½à½´à¼‹à½¡à½„ས་པà¼</span> Received with thanks from:</label>
<input class="form-control" style="width: 40% !important" type="text" name="name[]" id="name" value="<?php echo $row['name'] ?>">
</div>
<div class="form-group">
<label><span class="tibetan">* à½à¼‹à½–ྱང་à¼</span> Address:</label>
<input class="form-control" style="width: 40% !important" type="text" name="address[]" id="address" value="<?php echo $row['address'] ?>">
</div>
Here is the form:
I want only (Receive from thanks) and (Address) can edit by staff user, but (Receipt) and (date) will be read-only, these fields can edited by admin only.
From your comment,
Admin level = 5 where as staff level = 2..
Assuming the fact that you have differentiated the admin and staff using $_SESSION i.e if an admin logs in, $_SESSION['user_level'] would be 5 and if a staff logs in, $_SESSION['user_level'] would be 2, your code inside while loop would be like this:
// your code
while($row = mysql_fetch_array($result)) { ?>
<input type="hidden" name="id[]" id="id" value="<?php echo $row['id'] ?>">
<div class="form-group">
<div style="float:left">
<label> Receipt No:</label>
<input type="text" class="form-control" style="width: 60% !important; color:#999999;" name="receipt_no[]" value="<?php echo $row['receipt_no']; ?>"<?php if($_SESSION['user_level'] == 2){ echo ' readonly="readonly"'; } ?>>
</div>
<div>
<label> Date: (yyyy-mm-dd)</label>
<input class="form-control" style="width: 20% !important;" type="text" name="subDate[]" value="<?php echo $row['subDate']; ?>"<?php if($_SESSION['user_level'] == 2){ echo ' readonly="readonly"'; } ?>>
</div>
</div>
<div class="form-group">
<label> Received with thanks from:</label>
<input class="form-control" style="width: 40% !important" type="text" name="name[]" id="name" value="<?php echo $row['name'] ?>">
</div>
<div class="form-group">
<label> Address:</label>
<input class="form-control" style="width: 40% !important" type="text" name="address[]" id="address" value="<?php echo $row['address'] ?>">
</div>
I am having trouble in updating record using Ajax.
HTML & JS
<div class="row">
<form role="form" action="" type="post" id="abcdform">
<div class="col-md-3">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder="mm/dd/yyy" tabindex="1" value="<?php echo $dr->date; ?>">
</div>
<div class="form-group">
<label for="chats_init_customer">Chat Initiated by Customer</label>
<input type="number" class="form-control" id="chats_init_customer" name="chats_init_customer" placeholder="eg:5" tabindex="2" value="<?php echo $dr->chats_init_customer; ?>">
</div>
<div class="form-group">
<label for="emails_in">Emails Incomming</label>
<input type="number" class="form-control" id="emails_in" name="emails_in" placeholder="eg:5" tabindex="3" value="<?php echo $dr->emails_in; ?>">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="emails_out">Emails Outgoing</label>
<input type="number" class="form-control" id="emails_out" name="emails_out" placeholder="eg:5" tabindex="4">
</div>
<div class="form-group">
<label for="tickets_open">Tickets at Opening</label>
<input type="number" class="form-control" id="tickets_open" name="tickets_open" placeholder="eg:5" tabindex="5">
</div>
<div class="form-group">
<label for="tickets_closed">Tickets Closed</label>
<input type="number" class="form-control" id="tickets_closed" name="tickets_closed" placeholder="eg:5" tabindex="6">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="tickets_remain">Tickets Remaining Open</label>
<input type="number" class="form-control" id="tickets_remain" name="tickets_remain" placeholder="eg:5" tabindex="7">
</div>
<div class="form-group">
<label for="calls_taken">Calls Taken</label>
<input type="number" class="form-control" id="calls_taken" name="calls_taken" placeholder="eg:5" tabindex="8">
</div>
<div class="form-group">
<label for="calls_abandon">Calls Abandon</label>
<input type="number" class="form-control" id="calls_abandon" name="calls_abandon" placeholder="eg:5" tabindex="9">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="calls_avg_length">Calls Average Length</label>
<input type="number" class="form-control" id="calls_avg_length" name="calls_avg_length" placeholder="eg:5" tabindex="10">
</div>
<div class="form-group">
<label for="chats_total">Total Chats</label>
<input type="number" class="form-control" id="chats_total" name="chats_total" placeholder="eg:5" tabindex="11">
</div>
<div class="form-group">
<label for="sales">Sales</label>
<input type="number" class="form-control" id="sales" name="sales" placeholder="eg:5" tabindex="12">
</div>
<div class="feedback hidden-md hidden-lg"></div>
<input type="hidden" name="action" value="edit_daily_report">
<input type="submit" value="Update" id="abcdsubmit" class="btn btn-primary pull-right" tabindex="13">
<div id="process" class="loader pull-right"><img src="<?php echo abcd_root_url('css/images/loader.gif');?>" alt="loader" /></div>
</div>
</form>
</div>
<script type="text/javascript">
jQuery('#abcdform').submit(ajaxSubmit);
function ajaxSubmit() {
var abcdform = jQuery(this).serialize();
jQuery('#abcdsubmit').attr('disabled', true);
jQuery('#process').show();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url(); ?>/wp-admin/admin-ajax.php",
data: abcdform,
success: function(data) {
jQuery(".feedback").html('<span class="glyphicon glyphicon-saved"></span> ' + data).addClass('alert alert-success');
jQuery('#process').hide();
jQuery('#abcdsubmit').attr('disabled', false);
}
});
return false;
}
</script>
Function
function edit_daily_report()
{
global $wpdb;
$date = $_POST['date'];
$conditionValue = array('id' => 19);
if ($wpdb->update('hf_abcd_daily_report', array('date' => $date), array('id' => 19)) === FALSE){
echo "Error";
} else {
echo "Record successfully added to the database. Record id is <strong>$wpdb->insert_id</strong>";
}
die();
}
When I hit Update button, it does nothing after form submit. Please ignore all fields in the form and only consider date field.
you should have ajax actions to work it with wordpress
add_action( 'wp_ajax_my_action', 'edit_daily_report' );
add_action( 'wp_ajax_nopriv_my_action', 'edit_daily_report' );
Is it possible to launch a new modal when I click the submit button from a previous modal? I've been trying to do this all day and I'm stuck. I'm using CodeIgniter. I've tried to add another function in my onclick but it's not working.
Here's the button that triggers my modal:
<span class="btn btn-primary">Create</span>
And this is my modal:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Property Management</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" name="propertymgt-form" id="propertymgt-form" action="<?php echo $this->config->item('8L_URL')."/propertymgt/post/".$form_action; ?>" method="POST">
<br />
<div class="control-group">
<label class="control-label" for="title">Title:</label>
<div class="controls" style="margin-bottom:15px;">
<input type="text" id="title" placeholder="Title" name="title" class="span5" value="<?php echo $title; ?>">
</div>
<label class="control-label" for="fullname">Fullname:</label>
<div class="controls" style="margin-bottom:15px;">
<input type="text" id="lastname" placeholder="Lastname" name="lastname" class="span3" value="<?php echo $lastname; ?>">
<input type="text" id="firstname" placeholder="Firstname" name="firstname" class="span3" value="<?php echo $firstname; ?>">
<input type="text" id="middlename" placeholder="Middlename" name="middlename" class="span3" value="<?php echo $middlename; ?>">
</div>
<label class="control-label" for="address">Address:</label>
<div class="controls" style="margin-bottom:15px;">
<input type="text" name="address" class="span3" id="address" placeholder="No., Street, Building" value="<?php echo $address; ?>">
<input type="text" name="city" class="span3" id="city" placeholder="City" value="<?php echo $city; ?>">
<input type="text"name="province" class="span3" id="province" placeholder="Province" value="<?php echo $province; ?>">
</div>
</div>
<input type="hidden"name="uuid" class="span3" id="uuid" value="<?php echo $id; ?>">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="registration-submit" onClick="submitForm('propertymgt-form');loadModuleForm('<?php echo $this->config->item('8L_URL')."/propertymgt/form/add"; ?>');">Submit</button>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
The loadmoduleform() should load my new modal. Am I missing something? I need somebody's help. Thanks!
u want something like this?
demo
u just need to hide 1st modal n launch another modal on ur button click function
$('#newModal1').modal('hide');
$('#newModal2').modal('show');
I just called the script for my function loadmoduleForm(). All I have to do now is to call for a function where loadmoduleForm() is inside. Thanks anyway. :)
I have two forms on a single page and I want to submit the forms individually using the corresponding links from a query mobile navbar. The forms submit fine but the content portion of the page goes blank (I believe the jquery mobile ajax is trying to transition to a page that is not specified). Is there a way to stop it trying to transition and just submit the form data?
HTML:
<div class="ui-grid-a">
<div class="ui-block-a">
<form name="adminform" id="adminform">
<legend>Administrator</legend>
<input type="text" name="user_id" id="user_id" value="<?php echo $user_data['user_id'];?>" />
<label for="first_name">First name*:</label>
<input type="text" name="first_name" id="first_name" value="<?php echo $user_data['first_name'];?>" placeholder="First name" />
<label for="last_name">Last Name*:</label>
<input type="text" name="last_name" id="last_name" value="<?php echo $user_data['last_name'];?>" placeholder="Last Name" />
<label for="email">E-Mail*:</label>
<input type="email" name="email" id="email" value="<?php echo $user_data['email'];?>" placeholder="E-Mail" />
</form>
</div><!--end block a-->
<div class="ui-block-b">
<form name="companyform" id="companyform" action="" method="post">
<legend>Billing Address</legend>
<!--<label for="companyid">Company Id:</label>-->
<input type="hidden" name="companyid" id="companyid" value="<?php echo $company_data['company_id'];?>" />
<label for="company_name">Company Name*:</label>
<input type="text" name="company_name" id="company_name" value="<?php echo $company_data['company_name'];?>" />
<label for="company_website">Website:</label>
<input type="text" name="company_website" id="company_website" value="<?php echo $company_data['company_website'];?>" />
<label for="company_address">Address*:</label>
<input type="text" name="company_address" id="company_address" value="<?php echo $company_data['company_address'];?>" />
<label for="company_suite">Suite:</label>
<input type="text" name="company_suite" id="company_suite" value="<?php echo $company_data['company_suite'];?>" />
<label for="company_city">City*:</label>
<input type="text" name="company_city" id="company_city" value="<?php echo $company_data['company_city'];?>" />
<label for="company_state">State*:</label>
<input type="text" name="company_state" id="company_state" value="<?php echo $company_data['company_state'];?>" />
<label for="company_postal_code">Postal Code*:</label>
<input type="text" name="company_postal_code" id="company_postal_code" value="<?php echo $company_data['company_postal_code'];?>" />
<label for="company_telephone">Telephone*:</label>
<input type="text" name="company_telephone" id="company_telephone" value="<?php echo $company_data['company_telephone'];?>" />
<label for="company_fax">Fax:</label>
<input type="text" name="company_fax" id="company_fax" value="<?php echo $company_data['company_fax'];?>" />
</form>
<div id="companyupdatestatus"></div>
</div><!--end block b-->
</div><!--end grid a-->
<div data-role="navbar">
<ul>
<li><a id="updateadmin" data-icon="check" data-ajax="false">Update Admin</a></li>
<li><a id="updatecompany" data-icon="check" data-ajax="false">Update Company Info</a></li>
<li>Change Password</li>
</ul>
</div>
</div>
Javascript:
$('#updatecompany').click(function() {
var company = $('#companyform').serializeArray();
/*$('#companyupdatestatus').html(company);*/
$.ajax({
type: "POST",
url: 'companyupdate.php',
data: company,
success: function(company) {
$('#companyupdatestatus').html(company);
}
});
});
Thanks in advanced, would really appreciate the help!!! Adam
Try return false like this:
$('#updatecompany').click(function() {
var company = $('#companyform').serializeArray();
/*$('#companyupdatestatus').html(company);*/
$.ajax({
type: "POST",
url: 'companyupdate.php',
data: company,
success: function(company) {
$('#companyupdatestatus').html(company);
}
});
return false;
});