Develop Reference

How to call validation function before confirm window?

I have a page where user prints data and then click button submit.
<form id="myForm" action="/validate-configuration" _method="post" method="post" enctype="multipart/form-data"
onsubmit="return validateForm(this);">
<table>
...
<tr>
<td></td>
<input
type="submit"
value="Obfuscate"
onclick="return doConfirm('<%=messageSource.getMessage("message.DatabasePage", null, LocaleContextHolder.getLocale())%>',
function yes() {
$('#myForm').submit();
},
function no() {});"
/>
</td>
<td> </td>
</tr>
</table>
</form>
<div id="confirmBox" class="modal">
<div class="modal-content">
<div class="message"></div>
<button type="button" class="yes">Yes</button>
<button type="button" class="no">No</button>
</div>
</div>
When a user clicks on submit first appear to confirm window. But I want to rich next behaviour. When something is not inputted first works validation function and after all input fields were completed appear to confirm button after click on submit button.
function validateForm(form) {
return validateConfigurationSelect(form) && validateDBCredentials(form) && validateSalt(form);
}
function doConfirm(msg, yesFn, noFn) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
Answer:
make function doConfirm like this:
function doConfirm(msg, yesFn, noFn, validationFunc) {
if (validationFunc) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.show();
}
}
and in hmtl markup replace type of button form "submit" to "button" and add function:
input type="button" value="Obfuscate" onclick="
doConfirm('<%=messageSource.getMessage("message.dialog.DatabasePage", null, LocaleContextHolder.getLocale())%>',
function yes() {
$('#myForm').submit();
},
function no() {
},
validateForm()
);"/>
Also note that validateForm() should return boolean value.

Well, first of all, you should not validate on the client (with Javascript) but on the server (with Java). Validating in javascript is bad because it is easy to by pass it.
BUT, to answer your question. Change your code into:
<input type="button"
value="Obfuscate"
onclick="if (validateForm()) { return doConfirm('<%=messageSource.getMessage("message.DatabasePage", null, LocaleContextHolder.getLocale())%>',
function yes() {
$('#myForm').submit();
},
function no() {}); } else { showErrors() } "
/>
You don't need to pass the "form" argument in validateForm() because you can retrieve the values with document.getElementBy("") etc.
So to summarize:
user presses Save button (which is not submit type but just button type button)
validateForm() is called
if true then call doConfirm(), if OK button then $('#myForm').submit();
if false then display some errors

Submit function jquery not working

I have two trigger click function in my form one is a link and the other one is a submit button.
The link trigger ('.quiz-progress') is working well to submit form with id $("#quiz-question-answering-form") of form, but the button ('#edit-navigation-back') is not. It cannot submit $("#quiz-question-answering-form").submit();
It makes me confuse because when I change the submit function in the button to alert method is working.
so what i need is when user click radio box the button automatically submit it..?
Here's the full code
//fist trigger link link ( working well)
$(".query-once-1-processed").click(function(){
if ( $(this).hasClass("selected") ) {
//do something it does have the protected class!
$("#edit-navigation-skip").hide();
$('#edit-navigation-submit').show();
$(".quiz-progress").click(function(e) {
e.preventDefault(); // if desired...
$("#quiz-question-answering-form").submit();
});
} else{
$('#edit-navigation-submit').hide();
}
});
//second trigger (button) cannot submit the form (not working)
$(".multichoice-row").click(function(){
if ( $(this).hasClass("selected") ) {
$("#edit-navigation-back").click(function() {
//e.preventDefault(); // if desired...
$("#quiz-question-answering-form").submit();
//alert ("ok");
});
}
});
here is the html markup
<form class="answering-form" action="/learning/node/27/take/2" method="post" id="quiz-question-answering-form" accept-charset="UTF-8">
<table>
<tbody>
<tr class="multichoice-row query-once-processed-1"><td width="35"><div class="form-item form-type-radio form-item-question-1-answer-user-answer">
<input type="radio" id="edit-question-1-answer-user-answer-142" name="question1" value="142" class="form-radio" />
</div>
</td><td><p>Hulk</p>
</td> </tr>
</tbody>
</table>
<input type="submit" id="edit-navigation-back" name="op" value="< Soal Sebelumnya" class="form-submit" />
</form>

Multiple "link" submit buttons in one form

I would like to create a form with multiple submit link buttons. I know it can be done by using and specifying the name of <button> or <input type="button"> something like this:
In HTML:
<form action="" method="get">
Other form elements here...
<button type="submit" name="activated">Activated</button>
<button type="submit" name="pending">Pending</button>
<button type="submit" name="suspended">Suspended</button>
</form>
In PHP:
<?php
if(isset($_GET["activated"])) {
Activated codes here...
}
elseif(isset($_GET["pending"])) {
Pending codes here...
}
elseif(isset($_GET["suspended"])) {
Suspended codes here...
}
?>
I want the submit buttons to be done by using link, not <button> or <input type="submit"> something like this:
Activated
Pending
Suspended
I heard that it can be done by using JavaScript or JQuery but I don't know how, anyone knows?
Update: What I want to happen is when I clicked the "Activated" link for example, I want only to process the logic under isset($_GET["activated"]).
The reason behind:
The reason why I want to have a submit link buttons instead of normal submit button tags is that, I want to use this bootstrap dropdown button style to change the status of user(s) on table:
and it is based on links, so that's why.
PS: Sorry for bad English, not my native language.

You could use data attributes on your anchors, then load that attribute into a hidden field to check in your PHP code.
<form action="" method="post">
Activated
Pending
Suspended
<input type="hidden" id="actionName" name="actionName" value="" />
</form>
$('.anchor-btn').click(function(e) {
e.preventDefault();
$('#actionName').val($(this).data('name'));
$('form').submit();
});
<?php
if($_POST['actionName'] == "activated") {
Activated code goes here
}
...etc.
?>

Yes you can submit the form using jquery just add a class to your buttons and add a click handler
$(document).ready(function() {
$( ".buttons_class" ).click(function() {
$( "#target_form" ).submit();
});
});
so your buttons will look like this
<button type="button" name="activated" class="buttons_class">Activated</button>
<button type="button" name="pending" class="buttons_class">Pending</button>
<button type="button" name="suspended" class="buttons_class">Suspended</button>
if using anchors
Activated
Pending
Suspended
And in javascript
$(document).ready(function() {
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
$("#target_form").attr("action", "yourphpfile.php?"+$(this).text()+"=true"); //This will send the text inside the anchor as a GET param.
$( "#target_form" ).submit();
});
});
However if I were you I would consider using POST instead of GET for this. and do something like this
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
var paramName = $(this).text(); //get text inside anchor
$( "#target_form" ).submit(function(eventObj) {
$('<input />').attr('type', 'hidden')
.attr('name', paramName);
.attr('value', "something")
.appendTo('#form');
return true;
}); //Add hidden field
});

Change your isset to $_POST instead of $_GET, it will then use the name attributes.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['test1'])) {
###
} else if ($_POST['test2']) {
###
}
}
<form method="post">
<input name="test1" type="submit" value="TEST 1" />
<input name="test2" type="submit" value="TEST 2" />
</form>

Perform a clean submit by removing hidden divs

I am trying to perform a 'clean' submit, i.e. a submit that is invoked after removing all hidden divs from the form field.
Since this is a feature I am going to use more often, I shifted my code into the extend-part:
$.fn.extend({
bindCleanSubmit: function() {
$(this).submit( function(event) {
event.preventDefault();
$(this).find("div:hidden").remove();
console.log("trying to commit...");
return true;
});
}
});
Now, all divs are removed, the console event is triggered but at the end the submit has not performed.
Do you now the problem here?

I'm not sure what you are trying to do with preventDefault(), but if you remove it from bindCleanSubmit(), hidden divs will be removed from the form and it will be submitted normally. So given the following html:
<form id="myform" method="POST" action="/">
<input type="text" name="displayedInput" value="1"/>
<div style="display: none">
<input type="text" name="hiddenInput" value="1"/>
</div>
<button type="submit">Submit</button>
</form>
...and the updated plugin:
$.fn.extend({
bindCleanSubmit: function() {
$(this).submit( function(event) {
$(this).find("div:hidden").remove();
console.log("trying to commit...");
return true;
});
}
});
$('#myform').bindCleanSubmit();
...only the displayedInput value will be submitted to the server when myform is submitted.

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.

It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>

How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>

Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting

Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>