Multiple "link" submit buttons in one form - javascript

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>

Related

Using .Net Core MVC, How to pass value of Submit "button" to controller, while having a confirmation dialog?

My problem seems like it must be somewhat typical but has been overly difficult to solve. Basically, I have a single form with two submit buttons. One for "Save" and one for "Submit". I also want the user to get a confirmation dialog to before proceeding to submit. Below is an example of what I've done.
View:
<form asp-action="Save">
<input type="submit" name="submitType" value="Save" class="btn btn-primary" />
<input type="submit" name="submitType" value="Submit" class="btn btn-primary" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "form" ).submit(function (e) {
e.preventDefault();
var submitClicked = $("input[type=submit][clicked=true]").val();
if ($(this).valid()) {
if (submitClicked == "Save") {
$("form").unbind('submit').submit();
}
if (submitClicked == "Submit") {
if (confirm("Are you sure you are ready to Submit your document for Approval?")) {
$("form").unbind('submit').submit();
}
}
}
});
$("form input[type=submit]").click(function () {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
Controller:
[HttpPost]
public async Task<IActionResult> Save(Document document, string submitType)
{
if (submitType == "Submit")
{
document.ApprovalLevel = 1;
}
}
Now the confirmation works without flaw, but for some reason when using preventDefault() with unbind().submit() it removes the input value for the submit button so I get a null value for submitType in the controller and consequently the submit fails. When I remove the jquery bit that posits the confirmation question, the input value for the submit button passes without fail. How can I achieve a solution where the confirmation question works while still knowing which button was used to submit to the controller.
Edit (Solution based on Chris Pratt's simple explanation):
View:
<form asp-action="Save">
//ADDED Hidden Input Parameter
<input type="hidden" id="submitForApproval" name="submitForApproval" value="false" />
<input type="submit" name="submitType" value="Save" class="btn btn-primary" />
<input type="submit" name="submitType" value="Submit" class="btn btn-primary" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "form" ).submit(function (e) {
e.preventDefault();
var submitClicked = $("input[type=submit][clicked=true]").val();
if ($(this).valid()) {
if (submitClicked == "Save") {
//ADDED jquery update to hidden input parameter
$('#submitForApproval').val(false);
$("form").unbind('submit').submit();
}
if (submitClicked == "Submit") {
if (confirm("Are you sure you are ready to Submit your document for Approval?")) {
//ADDED jquery update to hidden input parameter
$('#submitForApproval').val(true);
$("form").unbind('submit').submit();
}
}
}
});
$("form input[type=submit]").click(function () {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
</script>
The value of a submit button only makes it into the request if it's what actually submits the form. Here, you're stopping that original submit, and then manually submitting later, where the button is no longer responsible and thus doesn't send its value.
Your best bet, since you're using JS here anyways, is to set a hidden field with the value on click.

After submit, input text disappears and reload the page(AJAX)

Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();

.submit doesn't work on appended element

I created custom form for fast reply (.append), now I want to use ajax for submit reply without reloading, I tried .on('submit', function(e)... which doesn't work (tried event delegation also). Now I tried .on('click', function(e)... and this works - don't know why.
$("#newpost").on('click', '.send', function(event) {
event.preventDefault();
});
This doesn't work:
$("#newpost").on('submit', '.send', function(event) {
event.preventDefault();
});
Appended form:
<form id="newpost" method="post" action="/forum/addpost/"+ id +"/"+ rek +" name="newpost">
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
</div>
</div>
</form>
So why .on('submit'..) doesn't work even if I use event delegation?
Thank you
This is not working because you have conflicting name to textarea(name="post") with the form properties.
As from jquery documentation:
jquery submit
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
If you append the whole form dynamically then you'll have to attach the submit listener to something that already exists when the page loads. Something like this:
$('body').on('submit', '#newpost', function(event) {
event.preventDefault();
});
EDIT:
I might have misread the question. The part you said doesn't work cant work because you don't submit a ".click" button, but the form that your ".click" button is in.
The right form is
$( "#newpost" ).submit(function( event ) {
event.preventDefault();
});
Later edit:
I understood now what you want.Try a new approach.Presuming that id is 23 and rek is value "add" you have the following:
HTML
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5" id="post"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="button" id="23" data-rek="add">
</div>
</div>
JS ( can be used in external file also):
//get the answer based on id-s and classes
$("body").on("click", ".send", function() {
//get what is at attribute id of the clicked link
var ID=$(this).attr("id");
//get the text from the form with id "fasttext"
var thetext = $("#post").val();
//take the value of rek ( don't know what means :) )
var therek = $(this).attr("data-rek");
//create the string that will be posted
var theString = 'post=' + thetext;
//post the form using ajax and without reloading the page
$.ajax(
{
type: "POST",
url: "/forum/addpost/"+ id +"/"+ therek,
data: theString,
cache: false,
success: function(html)
{
//do what you want to do as success - html is the returning response
//you can also make this div disappear or display a success message
}
});
});
});
May be problem is here
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
try to remove class="submit" from div tag
<div align="right">
<input class="send" value="." title="Send" type="submit">

Reading text from button and put into input and run

I am struggling with buttons and JavaScript.
I have a button which name is for example button1 and I would like to put the name of it button1 to input and click enter. I mean that I would like to send query for searching/sorting.
Here is with what I am done so far. It is working but only put text into input box without any action.
http://jsfiddle.net/9t7L4dmw/
$( "button" ).click(function() {
var text = $( this ).text();
$( "input" ).val( text );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<input type="text" placeholder="Search">
So when you click the button you want:
the input to be filled with the button's name
submit a form?
In that case wrap (at least) the input inside a form tag. In your JS submit the form after filling the input.
http://jsfiddle.net/9t7L4dmw/3/
$("form").on('click', 'button', function () {
$("#search").val($(this).text());
}).on('submit', function (event) {
event.preventDefault;
var data = $(this).serialize();
alert(data);
// $.post(...);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method=post>
<button type=submit>button1</button>
<button type=submit>button2</button>
<button type=submit>button3</button>
<button type=submit>button4</button>
<input type=search id=search name=search placeholder="Search">
</form>
About version without ajax
It doesn't work here in the snippet:
Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
but it's ok in jsfiddle: http://jsfiddle.net/9t7L4dmw/4/

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

Categories

Resources