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;
});
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" />
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']) : ""; ?>">
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 this form for a dedicated iphone landing page. but cant find anything that will deal with the validation. i only need to validate the number but the name could also be usefull. i cant seem to find anything that will alert the user the field has not been entered.
this is iphone only and is a web form not a app
<form method="post" action="submitquote.php" name="quoteform">
<label>Your Full Name</label>
<input style="outline:none;" id="name" type="text" name="name" size="20" value="" class="elements"/>
<label>Your Email Address</label>
<input style="outline:none;" id="email" type="email" name="email" size="20" value="" class="elements"/>
<label>Your Telephone Number</label>
<input style="outline:none;" id="telephone" type="text" pattern="[0-9]*" name="telephone" size="20" value="" class="elements">
<label>Company Postcode</label>
<input style="outline:none;" id="postcode" type="text" name="postcode" size="20" value="" class="input" />
<div class="saveon">Save on..</div>
<div class="checkboxs">Gas<input type="hidden" name="gasresult" value="no" /><input name="gasresult" type="checkbox" value="yes" checked="checked" /> Electricity<input type="hidden" name="electricresult" value="no" /><input name="electricresult" type="checkbox" value="yes" checked="checked" /></div>
<input type="hidden" value="<?php echo $myid ?>" name="track" />
<input type="hidden" value="<?php echo $_GET['utm_source']; ?>" name="utm_source" />
<input type="hidden" value="<?php echo $_GET['utm_medium']; ?>" name="utm_medium" />
<input type="hidden" value="<?php echo $_GET['utm_term']; ?>" name="utm_term" />
<input type="hidden" value="<?php echo $_GET['utm_content']; ?>" name="utm_content" />
<input type="hidden" value="<?php echo $_GET['utm_campaign']; ?>" name="utm_campaign" />
<input type="submit" value="" class="submit" onclick="pageTracker._trackPageview('/HomePage/ClassicQuoteRequest/Submit')" />
</form>
You can use JavaScript to get the value of an input object of a form.
function nameOK() {
var myForm = document.quoteform; // document.#nameOfForm#
var input = myForm.name;
var content = input.value;
return (content != "");
}
It is untested, but I have recently done something similar to store cookies.
Hope it works,
ief2