jQuery button click not submitting button value - javascript

I'm having some trouble getting the following code to work. I have a form that has several buttons on it. The first button has a class of ButtonAdditionalDelete. When it is clicked, it should then inspect the object for a data tag and then set the value of the tag to a hidden variable. Finally, it should then click the button with the id of saveAnswerButton.
However, when the form is submitted back to the server, the action variable from the button is not present. Any ideas?
<form action="/Area/Controller/Action/id?otherField=value" method="post">
#Html.HiddenFor(model => Model.SelectedSequenceNumber)
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#saveButton").click();
});
</script>

Shouldn't
$("#saveButton").click();
supposed to be
$("#saveAnswerButton").click();

that's a security measure. the name and value of a button will only be sent if it's a human click.
you'll have to keep a hidden input called action, then change it's value just before simulating the form submit:
<form method="post">
<input id="hiddenAction" name="action" type="hidden" value="">
<button class="ButtonAdditionalDelete" data-sequence-number="1">Delete</button>
<button name="action" value="AnswerEdit" id="saveAnswerButton">Save</button>
<button name="action" value="AnswerEditAndAdd">Save and Add New</button>
<button name="action" value="AnswerEditAndReturn">Save and Return</button>
</form>
<script type="text/javascript">
$(".ButtonAdditionalDelete").on("click", function () {
var sequenceNumber = $(this).data("sequenceNumber");
$("#SelectedSequenceNumber").val(sequenceNumber);
$("#hiddenAction").val($("#saveAnswerButton").val());
$("#saveAnswerButton").click();
});
</script>

Well, you are using sequenceNumber but your attribute is called sequence-number.

Related

How to validate HTML elements when submitting through JQuery?

I have an HTML form as shown below with some form fields and a submit and a delete button:
There is also a floating component which appears whenever there are changes in the form as shown in the same diagram with text: You have unsaved changes. This is a common component which appears for all the forms in my website.
When I submit the form using the form's Submit button, it validates all the fields as per the validations.
(for example: <input type="number" min="0"> will check that the number should be positive)
But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.
I tried using the following code, but the reportValidity() function doesn't do anything.
if (!form.checkValidity()) {
form.reportValidity();
}
form.checkValidity() and form.reportValidity() both are returning false when I do a console.log.
What am I missing here, and how can I fix this?
P.S. I tried this on chrome v98.
Edit: Adding HTML code:
<form method="post" action="/products/manage/{{.Product.ID}}/submit/">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
Save button calls this function:
function submitForm(form, url) {
const form = $(form)[0]
if (!form.checkValidity()) { //<- Added the code here
form.reportValidity();
}
var serialized = serializeForm(form);
// Do some more things then use HTTP to request the API
}
You can easily use the jQuery event handlers do the work for you.
A simplified example below:
Give your form some identifier (example: id="form1")
Catch the click event on button click
Trigger the submit event to submit that form
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
In below example you can submit the form either by clicking the submit button or the save button.
$('document').ready(function(){
$('#form1').on('submit',function(){
alert("SUBMITTED");
});
$('.unsavedChangesBtn').on('click',function(){
$('#form1').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form1" action="javascript:void(0);">
<div class="form-group col-md-5">
<label>Product Quantity</label>
<input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
</div>
<button type="submit" class="btn btn-success" value="Submit">Submit</button>
<button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>
<button class="unsavedChangesBtn"> SAVE </button>

Required attribute not working using javascript submit

I make some form different action within different button
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add');?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print');?>')">Print</button>
Javascript
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
}
Then, my required attribute not working. Did I do something wrong? Let me know if there is other solution.
Thanks,
I can't give you a good explanation but you need the submit buttons inside the form.
So if you would have a button like:
<input type="submit" value="Submit">,
it will trigger the required attribute.
#Remn If you would still stay on your structure with submit inside a function you could trigger yourself the validation like:
if ($("form")[0].checkValidity())
{
$("form").submit()
}
and then do something with inputs that are invalid by passing through each required element ( input is set in code ):
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
In the below case the invalid inputs will be focused one by one.
The whole code is:
$( function () {
$("body").on("click", "#trigger", function() {
if ($("form")[0].checkValidity())
{
$("form").submit()
}
$('form :input[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
});
});
Where #trigger is an id I set on the button to submit, you can make your own functions to achieve your goal I just used on().
I hope it helps!
Please try bellow code. i hope solve your problem.
<html>
<head>
<title>Submit</title>
<script type="text/javascript" language="javascript">
function submitForm(action)
{
document.getElementById('form').action = action;
document.getElementById('form').submit(
);
//alert(document.getElementById('form').action);
}
</script>
</head>
<body>
<form id="form" method="get" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required="required">
<button type="submit" class="btn btn-primary" onclick="return submitForm('<?php echo base_url('order/add');?>');" id="submit">Submit</button>
<button type="submit" class="btn btn-warning" onclick="return submitForm('<?php echo base_url('order/print');?>');" id="print">Print</button>
</form>
</body>
</html>
I have test your code by adding Javascript part in Script tag it is working fine. And i tested it on Chrome Windows 10.
<form id="form" method="post" class="form-horizontal" enctype="multipart/form-data">
<input name="name" class="form-control" type="text" required>
</form>
<button type="button" class="btn btn-primary" onClick="submitForm('<?php echo base_url('order/add'); ?>')">Submit</button>
<button type="button" class="btn btn-warning" onClick="submitForm('<?php echo base_url('order/print'); ?>')">Print</button>
<script>
function submitForm(action) {
document.getElementById('form').action = action;
document.getElementById('form').submit();
}
</script>
Using javascript's form.submit() function will cause input validation to be bypassed (according to the HTML specification in point 4 of the form submission algorithm). The only way to trigger HTML input validation is to use a click event on a submit button inside the form, either by the user actually clicking, or in javascript with something like form.querySelector('input[type="submit"]').click().

Href to another div id on submit in HTML

I have a form which contains a submit button. When I click this submit button I want to go to another div with id home. This is what I am doing now (which is not working):
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
For example if I had:
<div id="home"><ul><li>Hello World</li></ul></div>
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
This won't work. How can I do this?
You need to have the action of the form be '#home'. Then add a named anchor above the home div.
<html>
<body>
<a name="home"></a>
<div style="height:1500px;">
</div>
<form action="#home">
<input type="submit" value="Home">
</form>
</body>
</html>
href is not a valid attribute for an input element. Try this:
<input type="submit" class="submit" onclick="location.href = '#home'" name="action" value="Redirect"/>
If this is inside of a form, it will submit the form unless you have something preventing that from happening.
just u mention the redirect page in one function.... then that function name calling via onclcik="function_name";
for eg:
function_name
{
some code .......
location.href = 'home.html';
}
<input type="button" onclick="function_name">
your code..........

form disabled on disable button and change text

I am trying to disable a button on click, as well as change the text of the button. here is my code:
<input type="submit" value="Register" name="submit" id="submit" onClick="javascript:replaceButtonText('submit', 'Please wait...'); document.form1.submit.disabled=true;">
What is happening, is the button gets disabled, and the text changes, but the form does not do anything (submit). what am I doing wrong?
This works:
<html>
<body>
<form name="form1" method="post" action="myaction">
<input type="text" value="text1"/>
<input type="submit" value="Register" name="submit" id="submit"
onclick="javascript: replaceButtonText('submit1', 'Please wait...'); document.form1.submit.disabled=true; return true; ">
</form>
</body>
</html>
Form controls with a name are made available as named properties of the form they are in using their name. So:
document.form1.submit
refers to the button, not the submit method.
Writing:
< ... onclick="javascript:..." ...>
means that "javascript" is treated as a useless label, just don't do it. If you want the button to become disabled and change its label when the form is submitted, then use something like:
<form>
<input name=foo value=bar>
<input type="submit" onclick="
this.value='Please wait...';
this.disabled = true;
var theForm = this.form;
window.setTimeout(function(){theForm.submit();},1);
">
</form>
and let the form submit normally.
Of course the function in the onclick attribute should be a function call rather than a slab of code, but you get the idea.

can I click one button and use the action of another?

I have two buttons, and I want to apply one action to another. For example.
<form>
<input type="submit" />
</form>
<input type="submit" />
I want to make the second button submit the form, despite being outside of the form.
You should make them of type button, and give your form an id.
Markup:
<form id="myForm">
<---STUFF---->
<input type='button' id='otherButton'>
</form>
<input type='button' id='someButton'>
jQuery:
$('#someButton').click(function() { $('#myForm').submit(); });
$(':input:last').click(function()
{
$('form').submit();
});
// enable form submit on the second <input>
$('input[type=submit]').click(function(){
$('form').submit();
});
// disable the inner <input>
$('form input[type=submit]').click(function(){
return false;
});
Something like this should do your trick.
If you want the second button to do everything the first can do (not just submit), you can try something like this:
html
<form>
<input id="insideButton" type="submit" />
</form>
<input id="outsideButton" type="submit" />
jsJQUERY
$("#outsideButton").click(function() {
$("#insideButton").trigger("click");
});
you can using jQuery $("#test").click() if you have jQuery instead of the document... stuff below or the way below will work without jQuery
<form name="testForm1">
<input type="submit" id="test" />
</form>
<!-- use this when not in a form: -->
<button onclick="button1_click();" id="button1"></button>
In your head tag
<script type="text/javascript">
function button1_click(){
document.forms.testForm1.submit();
}
</script>
Changed for the users that put performance under clean code

Categories