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.
Related
I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.
My suggestion would be to use the break function. That will exit the current loop.
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>
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
So basically, i'm trying to make a button "Call me back" so when you click it, it disappears and shows other two hiddens fields.
http://investinlisbon.ml/
What im trying to change is that little form on top of that page where it has 2 fields and a call me back button.
try jquery show / hide functions like
$("#div_to_show").show();
$("#div_to_hide").hide();
This is how you should approach your problem:
HTML
<div id="div1"> </div>
<div id="div2" style="display:none"> </div>
<div id="div3" style="display:none"> </div>
JS
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "inline-block";
document.getElementById("div3").style.display = "inline-block";
Another one, one liner:
HTML
<div id="fields" style="display:none">
<input type="text" name="name" placeholder="Name"/>
<input type="text" name="tel" placeholder="Telephonoe"/>
</div>
<button type="button" id="contact-btn" onClick="toggleFields()">
Contact me
</button>
JS
function toggleFields(){
$('#fields, #contact-btn').toggle();
}
Example JSFiddle
in your View
<div style="display: none;" class="hideDiv">
<input type="hidden" name="_wpcf7" value="1101">
<input type="hidden" name="_wpcf7_version" value="4.4">
<input type="hidden" name="_wpcf7_locale" value="pt_PT">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1101-o1">
<input type="hidden" name="_wpnonce" value="7b5f59556f">
</div>
and jquery
$(document).on('click','.send-cmb',function(e){
e.preventDefault();
$('.hideDiv').css('display:block');
});
Try this
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Name">
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Telephone">
<button type="button" id="callback" >
Call Back
</button>
js code
jQuery( document ).ready(function() {
jQuery(".txt").hide();
jQuery("#callback").click(function(){
jQuery(".txt").show();
jQuery("#callback").hide();
});
});
You can view demo here
Here is the form in dropdown with button that should close this dropdown
<div id="kupit" >
<div class="uk-width-1-1 uk-button-dropdown drop"
data-uk-dropdown="{pos: 'left-center', mode:'click'}">
<button href="#" class="uk-button uk-button-primary tm-add-to-cart uk-margin-top uk-width-1-1">Купить в один клик</button>
<div class="uk-dropdown uk-dropdown-small">
<p>ПОЖАЛУЙСТА, ОСТАВЬТЕ <br> СВОЙ НОМЕР ТЕЛЕФОНА.</p>
<p>НАШИ СОТРУДНИКИ СВЯЖУТСЯ<br> С ВАМИ В БЛИЖАЙШЕЕ ВРЕМЯ.</p>
<form class="uk-form" action="/" method="post">
<div class="uk-form-row">
<input class="uk-width-1-1" name="username" size="18" placeholder="Имя"
type="text">
</div>
<div class="uk-form-row">
<input class="uk-width-1-1" name="phone" size="18" placeholder="Телефон"
type="text">
</div>
<div class="uk-form-row">
<button class="uk-button uk-button-primary uk-width-1-1" value="Войти" name="Submit" type="submit" onclick="popup(this); return false;">ЗАКАЗАТЬ ТОВАР</button>
</div>
</form>
</div>
</div>
</div>
and here is the code for closing dropdown
function popup(here) {
var test = jQuery(here).closest('.drop');
UIkit.dropdown(test).hide();
}
but when I click on the button dropdown hides and then immediately appears again.
This is because of your mouse is still over the dropdown. The system show the window again beause mouse still there. So if you need to close this dropdown by this button you need to add uk-dropdown-close class to this button.
Also you can use this code to add some functionality when dropdown closed
jQuery('[data-uk-dropdown]').on('beforehide.uk.dropdown', function () {
// custom code here
})