I have a Javascript that triggers when the TrainingRequired checkbox is checked to show two submit buttons. When unchecked, one submit button is shown. The issue is when I check the checkbox and attempt to submit the form without data in one required field, an error message returns via postback. The checkbox remains checked and the two buttons no longer shows. How do I keep the two buttons visible after postback with an error message?
HTML markup:
<tr>
<td>
<label for="trainingRequired">
Training Required?*</label>
</td>
<td>
#Html.CheckBox("trainingRequired", Page.TrainingRequired, new { id = "chkImmediate" })
</td>
</tr>
<tr id="allowSelfTrainingBlock">
<td>
<label for="allowSelfTraining">
Allow Self Training?</label>
</td>
<td>
#Html.CheckBox("allowSelfTraining", Page.AllowSelfTraining)
</td>
</tr>
RegularButton and RequiredButton blocks:
<div id="RegularButton">
<input name="btn" type="submit" id="notrequired" value="Save" />
Cancel
</div>
<div id="RequiredButton">Create New Training Document?<br />
<input name="yesbtn" type ="submit" id="required" value="Yes" />
<input name="nobtn" type="submit" id="required2" value="No & Save" />
Cancel
</div>
Javascript on the same page:
<script type="text/javascript">
function prepareButtons() {
document.getElementById("RequiredButton").style.display = "none";
document.getElementById("RegularButton").style.display = "block";
}
//**********PostBack*************
function postBack(val) {
$('#xtravar').val(val);
$('form').submit();
}
$("#chkImmediate").change(function() {
if(this.checked) {
document.getElementById('allowSelfTrainingBlock').style.visibility = 'visible';
document.getElementById("RequiredButton").style.display = "block";
document.getElementById("RegularButton").style.display = "none";
}
else {
document.getElementById('allowSelfTrainingBlock').style.visibility = 'hidden';
document.getElementById("RequiredButton").style.display = "none";
document.getElementById("RegularButton").style.display = "block";
}
});
window.onload = function () {
prepareButtons();
}
After postback with an error message, I can get the two buttons showing if I uncheck and check the TrainingRequired checkbox. But I really want the two buttons to show after the postback with an error message. Thanks.
Since page would be redrawn after a postback, window.onload would be invoked again. Therefore, you would need to set a condition to check if an error occured. Since your using MVC, you may create a ViewBag prop in the controller and set it if an error occured. Something like the following.
In controller,
public ActionResult Validate()
{
if(Error)
ViewBag.isError = true;
return View();
}
In Js,
window.onload = function () {
var error = '# ViewBag.isError';
if(error != 'true')
prepareButtons();
}
Related
I have two forms (consist with input,textarea,checkbox) in a page. I want check emptiness of these forms separately on click seperate button.
I use the following script. But it shows empty message if any of these form input is empty.
$('#submit').click(function(e) {
var empty = false;
$('input, textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
alert("empty");
e.preventDefault();
}
else {
document.getElementById("contact").submit();
}
})()
Never assign stuff to submit buttons
Do not submit a form from a submit button if you have chosen to use preventDefault if something wrong. It could submit the form twice
$(function() {
// on the submit event NOT the button click
$('form').on("submit", function(e) { // any form - use .formClass if necessary to specific forms
var empty = false;
$("input, textarea", this).each(function() { // this form's inputs incl submit
if ($.trim($(this).val()) == "") { // trim it too
console.log(this.name,"empty")
empty = true;
return false; // no need to continue
}
});
if (empty) {
alert(this.id + " is empty"); // or set a class on the div
e.preventDefault(); // cancel submission
}
});
});
div {
border: 1px solid black;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1">
<div>
<input type="text" value="" name="field1" /><br/>
<textarea name="field2"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
<hr/>
<form id="form2">
<div>
<input type="text" value="" name="field3" /><br/>
<textarea name="field4"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
You could also add required to the fields
You need to restrain the handler to the form containing the clicked button:
$('#submit').click(function(e) {
var form = $(this).parents('form:first');
var empty = false;
$('input, textarea', form).each(function() {
// the rest is the same
I'd also like to point out that you cannot have the same ID on multiple controls, so
$('#submit')
should always return exactly one button. You should do something like this, where you distinguish the buttons by class instead:
<input type="submit" id="submitA" class="submitButton">
<input type="submit" id="submitB" class="submitButton">
and select with
$('.submitButton')
you know you can also use jquery to reset the form like so
form.resetForm();
I have a button, when click, it do a jquery function and submit form too.
This is my HTML code:
<?php echo Form::open(array("class"=>"form-horizontal","method"=>"POST" ,"id"=>"frmMainOrders","enctype" => "multipart/form-data" )); ?>
<div class="search">
<tr class="tblAdvancedSearch">
<th scope="row">備考</th>
<td>
<input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value=""/>
</td>
</tr>
<input type="submit" id="btn_submit" value="検 索" name="adv_search">
</div>
<?php echo Form::close();?>
This is my script jquery:
$('.search').on('click', function() {
showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
});
function showAdvancedForm() {
if($(".tblAdvancedSearch").css('display') == 'none') {
$(".tblAdvancedSearch").css('display', 'table-row');
} else {
$(".tblAdvancedSearch").css('display', 'none');
}
}
I have tried:
<input type="submit" id="btn_submit" value="検 索" name="adv_search" onclick="$('form').submit()">
This way allow me submit form, but my controller can not get attribute name="adv_search", so my function doesn't work.
I have tried preventDefault() and $('#btn_submit').click(false).
But both of them prevent all submit and jquery function.
Is there a way to submit the form but prevent ONLY jquery function when I click submit button?
You can use e.target.name to find out the name of the element. So based on that you can conditionally fire the method showAdvancedForm() .
e.target - Get the element that triggered a specific event
$('.search').on('click', function(e) {
if (e.target.name == "multi_column") {
console.log('calling method : showAdvancedForm');
showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
}
});
function showAdvancedForm() {
if ($(".tblAdvancedSearch").css('display') == 'none') {
$(".tblAdvancedSearch").css('display', 'table-row');
} else {
$(".tblAdvancedSearch").css('display', 'none');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" class="form-horizontal">
<div class="search">
<tr class="tblAdvancedSearch">
<th scope="row">備考</th>
<td>
<input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value="" />
</td>
</tr>
<input type="submit" id="btn_submit" value="検 索" name="adv_search">
</div>
</form>
If you have a form and you want to send data via Ajax you should do something like this:
$('#formID').submit(function(e) {
e.preventDefault();
var submitButtonValue=$(this).children('input[type=submit]').val(); //This is 検 索
var data=$(this).serialize()+ "&adv_search="+submitButtonValue;
//probably your ajax call here...
})
Serialize is a function that you can get all your inputs' values in your form by it, and you also can easily send it via Ajax
You should use submit, because it also will check validations and more
this is code which i try to change
<%if(request.getParameter("hiderefineproblem")==null){%>
<input type="button" value="Refine Problem" onclick="return showHide();" style="background-color: #3399ff;color:#ffffff;" />
<%}%>
<div id="showHideDiv" style="display: none;">
<p>Would one of the following diagnoses apply? Choose the most
specific one:</p>
<FORM ACTION="snomedMapping.jsp#newres" METHOD="POST">
<%
pstm = Con.prepareStatement(selectsql);
pstm.setString(1, snomedid);
pstm.setString(2, snomedname);
resultSet = pstm.executeQuery();
boolean bSubmit=false;
int refid=0;
String[] pipe;
while (resultSet.next()) {
refid=resultSet.getInt("refid");
pipe= resultSet.getString("mapRule").split("\\|");
if (pipe.length > 1){bSubmit=true;
%>
<input type="radio" id="radioList" value="<%=refid%>" name="refId"/>
<tr><%=pipe[1]%></tr>
<br />
<%
}
}
%>
<%if(bSubmit){%>
<input type="hidden" name='hiderefineproblem' value='yes'/>
<INPUT TYPE="SUBMIT" value="Submit" style="background-color: #3399ff;color:#ffffff;">
<%}%>
</FORM>
</div>
<script>
function showHide() {
var ele = document.getElementById("showHideDiv");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
there is button its value is Refine Problem and i need not to show the button if there is no result for that button . the button contains some value from database .sometimes there is no value for that button . so that time i need not to show the button .
how to hide the on click button if the value is empty .
if I understand the question correctly, I believe you can give all the buttons a class and then iterate across all the buttons with javascript, checking the value each time, and if the value is nothing using javascript to .hide() that button
For eaxmple in case the checkbox is not checked and the user hits the submit we need to show the error message "please check the checkbox". in case if the checkbox is checked and the hyper link is not clicked by the user we need to show the error message "Please click the link".
My Code
<script>
var state = 0;
$("#AcceptMe").click(function()
{
state=1;
});
if(state == 0)
{
alert("please click");
}
</script>
</head>
<body>
<form>
<a id="Link1" href="#">click</a>
<input type="checkbox" id="AcceptMe">
<input type="submit" name="submit">
</form>
This is not a good solution, because when the user clicks twice, he/she unchecks the checkbox, but the "state" would still be 1.
Check if the checkbox is checked like this:
var isChecked = $('#AcceptMe').is(':checked')?true:false;
Now the "isChecked" variable will contain true or false so you should first give the submit button an ID and type="button" (otherwise it will try to submit):
<input type="button" value="submit" name="submit" id="submitForm"/>
Add a clickHandler for the link like this:
var linkClicked = false;
$('#Link1').click(function(){
linkClicked = true;
});
Then under that function your javascript add a clickhandler to the submitbutton:
$('#submitForm').click(function(){
var isChecked = $('#AcceptMe').attr('checked')?true:false;
if(isChecked){
alert('checked!');
if(linkClicked){
alert('Link clicked!');
}
else{
alert('Click link first!');
}
else{
alert('please check the checkbox!');
}
});
JSFiddle here: http://jsfiddle.net/8o4an9xf/
Please note that you should add target="_blank", because the link will otherwise override the document.location. Or you could open the content you want to show in a modal window (which is nicer).
I think you must use "return false"
My code is clear and simple.
If its not matter for you to have in-line code try below:
<body>
<form>
<a id="Link1" href="#" onclick="$('#Link1').addClass('visited');
alert('add \'visited\' class to \'#Link1\'');">
</a>
<input type="checkbox" id="AcceptMe" />
<input type="submit" name="submit" onclick="
if( $('#AcceptMe').is(':checked')){
alert('checkbox is :' + $('#AcceptMe').is(':checked'));
if(!$('#Link1').hasClass('visited')){
alert('please visit link1');
return false;
};
}else{
return false;
}
" />
</form>
</body>
I'm new to JavaScript so need a help please. Basically I've two radio buttons and one submit button. I want to use JS function when submit button is clicked to pick the value of radio button.
<td align="right" style="width: auto">
#Html.RadioButton("SelectedOption", LinkOption.Link, true) Link Account
</td>
<td align="left" style="width: auto">
#Html.RadioButton("SelectedOption", LinkOption.DeLink, false) De-Link Account
</td>
<td align="right" style="width:50%">
<input type="submit" id="linkAccountSubmit" onclick="activeDeLink()" />
</td>
And the JavaScript function is; where I want to use the if statement to pick the value of radio buttons
function activeDeLink() {
if (............) {
$('.hiddenLink').each(function () {
$(this).removeClass('hiddenLink');
});
}
else
{.......}
}
you can get the value in this way:
$('input[name="SelectedOption"]').val();
Remember that your form will be submitted if you not return a boolean value from the function
<input type="submit" id="linkAccountSubmit" onclick="return activeDeLink()" />
function activeDeLink() {
if ($('input[name="SelectedOption"]').val() == "SomeValueToCheck") {
$('.hiddenLink').each(function () {
$(this).removeClass('hiddenLink');
});
return true;
}
else
{
// the condition is false, I dont want submit.
return false;
}
}