Change <form> values before submitting - javascript

I need to post form to Salesforce to create a case. Before submitting a form depending on which button is clicked I need to change form values.
I created a from which has two buttons, when first button is clicked I am setting time to current time, if second button is clicked I am picking time which is entered by client. Also from code behind I need to get account id and assign it to form value.
<form runat="server" id="sf_case_form" name="sf_case_form" action="https://test?encoding=UTF-8" method="post">
<input hidden="hidden" id="sf_account_id" maxlength="20" runat="server" name="sf_account_id" size="20" type="text" />
<input type="hidden" id="external" name="external" value="1" />
<input hidden="hidden" type="submit" name="submit"/>
<div class="wrapper wrapper-content p-xs">
<div class="row">
<div class="col-lg-3">
<div class="contact-box center-version">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Request Callback</h5>
</div>
<div class="ibox-content" >
<div class="form-group">
<label class="font-normal">Your phone number</label>
<input id="selected_phone_number" name="selected_phone_number" type="text" class="form-control" data-mask="(999) 999-9999" runat="server" placeholder="(999) 999-9999"/>
</div>
<asp:button style="margin-bottom: 20px" id="btn_call_now" OnClick="call_now_Click" type="button" runat="server" Text="Call me now" CssClass="btn btn-w-m btn-danger"/>
<div class="form-group" id="data_1">
<label class="font-normal">Choose your desired date and time to schedule a call</label>
<div class="input-group date">
<input id="selected_date" name="selected_date" type="text" runat="server" class="form-control" value="03/04/2014"/>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="input-group clockpicker" data-autoclose="true">
<input id="selected_time" name="selected_time" type="text" runat="server" class="form-control" value="09:30"/>
<span class="input-group-addon">
<span class="fa fa-clock-o"></span>
</span>
</div>
<div style="margin-top: 20px">
<asp:button id="btn_schedule_call" type="button" runat="server" OnClick="schedule_call_Click" Text="Schedule a call" CssClass="btn btn-w-m btn-primary"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Code behind
protected void call_now_Click(object sender, EventArgs e)
{
//Set date to current date
selected_date.Value = DateTime.Now.ToString("d");
selected_time.Value = DateTime.Now.ToString("t");
post_form();
}
call_now_Click is not getting called and how can I submit a form after values are changed from code behind?

When using
<button type="button" onclick="yourFunctionName()">Click Me!</button>
add ClientIDMode="Static" to your server control to use simpler ID
<input ClientIDMode="Static" id="selected_date" name="selected_date" type="text" runat="server" class="form-control" value="03/04/2014"/>
add
in the script
<script>
function yourFunctionName() {
document.getElementById('selected_date').value = new Date();
....
....
document.form.submit();
}
</script>

Related

How to prevent jquery datepicker from clearing date on submit in jsp

I want to prevent my date from clearing when I hit the search button.
I have tried setting form onSubmit to return false still same issue is happening.
<html:form styleClass="form-horizontal" action="refund"
method="post" onsubmit="return false">
<html:hidden property="actionType" />
<html:hidden property="fromDate" />
<html:hidden property="toDate" />
<div class="form-group">
<label class="control-label"> From Date: </label> <br>
</div>
<div class="input-group date form_date" data-date=""
data-date-format="yyyy-mm-dd">
<!--mm/dd/yyyy-->
<input class="form-control border-radius-input"
onkeypress="return Date1(event);" maxlength="10"
id="fdate" type="text" placeholder="yyyy-mm-dd"> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" />
<div class="form-group">
<label class="control-label"> To Date: </label> <br>
</div>
<div class="col-lg-12">
<div class="input-group date form_date" data-date=""
data-date-format="yyyy-mm-dd">
<!--mm/dd/yyyy-->
<input class="form-control border-radius-input"
onkeypress="return Date1(event);" maxlength="10"
id="tdate" type="text" placeholder="yyyy-mm-dd"> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" />
</div>
<div class="btn-div" style="text-align: center;">
<button class="btn btn-primary btn-o mr-2" onclick="search()">
Search</button>
<input class="clr-btn" type="reset" value="Clear" onclick="clearFields()">
</div>
</html:form>
and my search function is as below
function search() {
document.forms[2].fromDate.value = $('#fdate').val();
document.forms[2].toDate.value = $('#tdate').val();
document.forms[2].actionType.value = "search";
document.forms[2].submit();
}
My declaration for the datepicker is given below
$('.form_date').datetimepicker({
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
forceParse : 1
});
Please ignore my div closing syntax as while posting this question I messed up with div closing but html is working fine no issue with it.

Change submit onclick based on a checkbox

I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});

how to remove onclick from <form> and <button>

Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!

Serialize data in AJax

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>

How to make clone element stay after Submit button clicked?

I have a row that will added automatically when I click 'Add Row' button. The row created by using clone() method. When I click 'Submit' button. The new row gone and didnt stay in that page. How to make it stay with the input in the textbox after the page is load?
Below is my code for that row:
<div id="rows">
<div class="p2">
<input type="checkbox" class="checkbox" runat="server"/>
<input id="txt1" type="text" runat="server" maxlength="16" value="0.00" />
</div>
<div class="p3"> </div>
<div class="p4">
<input id="txt2" type="text" runat="server" maxlength="16" value="0.00"/>
</div>
<div class="p5"> </div>
<div class="p6">
<input id="txt3" type="text" runat="server" maxlength="16" value="0.00"/>
<span style="color:red;">*</span>
</div>
</div>
Below is my javascript code:
var cloneCount = 1;
//Add new row
$("#addrow").click(function () {
$('#rows')
.clone(true).find('input:text').val("").end()
.attr('id', 'rows' + cloneCount++, 'class', 'block')
.insertAfter('[id^=rows]:last');
return false;
});
below is my code for the button:
<div id="bttns" style="text-align:center;">
<button id="addrow" >Add Row</button>
<button onclick="validate()" >Submit</button>
</div>
I'm using VS2012 and this project were ASPX web form. Do I need to do some code-behind? What are the problem inside my code? Really needs your help and I'm new to C# and asp.net.

Categories

Resources