Function calls messing with each other - javascript

I have following code in my popup jsp:
<input type="submit" value="Mod" onclick="remind()" ></input>
<input type="hidden" value="Mod" name="db_remind" id ="remindbutton"></input>
<%--
<input type="submit" value="Delete" onclick="confirmDelete()" > </input>
<input type="hidden" value="Delete" name="db_delete" id="deletebutton" > </input>
Hidden button calls for a Spring controller method. Script is needed to close the popupwindow right after the method is committed.
Each script is like:
function save() {
$('#savebutton').click();
window.close();
}
My problem is that my solution works only, if only one of the jsp function calls is present, in each case. You might say that my solution to achieve what i want is a bit silly, but im a newbie with this and i wonder why all the function calls cannot work together?

Please edit the question to make your issue more clearer. From what I can see you are trying to call different java script functions on click of different buttons.
Do not use input type = "submit" for the buttons. Use input type = "button"
<input type="button" value="remindId" onclick="remind()" ></input>
<input type="button" value="saveId" onclick="save()"></input>
And in javascipt tag:
<script>
function remind()
{ /* Do form submit here */}
function save()
{ /* Do form submit here */}
</script>

Related

Submitting a form to one of two different URL's

I have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.
Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.
In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>
hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.

ASP.NET MVC Form: Can submit with ENTER key but not Submit button

I'm trying to implement a simple search form in ASP.NET MVC. Right now my cshtml looks like this
#using (Html.BeginForm("SearchDemo", "Home", FormMethod.Post))
{
<div>
Last Name:<br>
<input type="text" id="nameToFind" name="nameToFind">
<input type="button" id="submitId" name="submit" value="submit" />
</div>
}
And my controller looks like this
[HttpPost]
public ActionResult SearchDemo(string nameToFind)
{
return RedirectToAction("Register", "Account"); //Only redirecting for now to test
}
Pressing the submit button does not call the controller but pressing ENTER does. I'm guessing that means my click event is getting eaten by JavaScript or something so I tried to pause script execution in Chrome but realized browserlink.js is stuck in an infinite loop. Is that the problem? Either way, how can I stop the infinite loop?
Browser doesn't know to use this button as submit.
Change
type="button"
To
type="submit"
Instead of setting the type as "button"
<input type="button" id="submitId" name="submit" value="submit" />
Change the type to submit
<input type="button" id="submitId" name="submit" value="submit" formmethod="post" value="Submit using POST"/>
You need a formmethod of post in your input.
So that the button knows to post back.
You also need a value attribute. This will be a reference to the Function name within the controller.
w3 reference

jsp two buttons in a form and javascript form validation

I am working on a web project using structs2. I have a form with submit button and another button. I am using javascript functions for form validation. My problem is that when I click the other button the form validation function works.
my jsp:
<h2>New Form</h2>
<s:form action="aa.action" name="myform" method="post" onsubmit="return(validateForm())">
<s:textfield name="formnumber" size="20" />
.
.
<button value="add" name="add">Add</button>
.
.
<s:submit method="create" key="xxx" value="xxx" />
When i click anyone of the the button the validation function will excecute.I dont want excecute the validation function on add button click.
Default button always submit the form so add type="button" it will stop
<button type="button" value="add" name="add">Add</button>
OR Use
<input type="button" name="add" value="Add" />
Get rid of the onclick. You don't need it here. The type="add" already submits the form. Your concrete problem is likely caused because the onclick of the <form> has returned false.
<input type="button" name="method" value="Add" class="button"
onclick="location.href='Employeelist.jsp'" />
You should mention type="button".
Otherwise it will submit the current URL again.
<button type="button" value="Add" name="add"/>
details about "type" in html
http://www.w3schools.com/tags/att_button_type.asp
Java Script Form validation can be
w3schools
Tutorials point
javaScript Coder
if you familier with java script libraries you can use validate.js
type : What type of widget you want.
vlaue : The text what you want in that.
name : The id of that purticulat widget.

jquery validate .resetForm() not clearing form, validation messages firing on manual reset

Ive got several buttons, passing different params to the same function. That function will eventually do lots of client side processing but first it needs to validate. Validation is working fine, but upon success, I need to reset the form. In my fiddle below, you can see that the .resetForm() call does nothing, and if I manually clear the field, it throws validation errors like I was trying to submit.
see my fiddle: http://jsfiddle.net/uT6pw/10/
html:
<form id="frm" method="post" onsubmit="return false;">
<input type="text" id="FName" class="required">
<span class="field-validation-valid" data-valmsg-for="FName" data-valmsg-replace="true"></span>
<button id="btn1" onclick="addContact('1')">1</button>
<button id="btn2" onclick="addContact('2')">2</button>
<button id="btn3" onclick="addContact('3')">3</button>
</form>
javascript:
function addContact(num){
var v = $("#frm").validate()
if (v.form())
{
v.resetForm();
//$("#frm").validate().resetForm()
$("#FName").val('');
}
}
Thanks!
I have not heard about resetForm, try this:
form.reset();
Update: You have button tags that post form, this is the reason form gets validated when you click them. Instead change <button> to <input type="button"/>
See fiddle

how to submit the values in the form in javascript when there are 2 submit values?

I have one form where there are 2 inputs those are submit type of inputs like this.
<form>
<input type="text" name="payee" value="">
<input type="text" name="amount" value="">
<input type="text" name="date" value="">
<input type="submit" name="deposit" value="Distribute">
<input type="submit" name="distribute" value="Deposit">
</form>
In jQuery like this:
$("form submit").click(function() {
// i wrote code.
}
If I click on the deposit button some action should occur. If I click on the distribute button some other action should occur.
First of all you need to change your submit inputs to buttons (or at least one of them) as 2 submit buttons in 1 form is invalid. Then give each button its' own Id.
<input type="button" name="deposit" value="Distribute" id="distribute">
<input type="button" name="distribute" value="Deposit" id="deposit">
Then, in jQuery you can then use the Id of each button to run specific code when it is clicked, like this:
$("#distribute").click(function() {
// code to run when distribute is clicked
}
$("#deposit").click(function() {
// code to run when deposit is clicked
}
insert another input type :
<input type="hidden" name="hf" id="hf" value="">
and
$("form :submit").click(function() {
if ($(this).attr('id')=='distribute') $("#hf").val('sent by distribute');
else $("#hf").val('sent by deposit');
}
and in the server you can see who send by reading the hiddenField value ( hf)
You can add a custom attribute on your buttons in document.ready function and on click of the button you can identify which button has posted an request to form.
Example to add custom attribute
<input type="submit" id="deposit" value="Distribute">
<input type="submit" id="distribute" value="Deposit">
$(function () {
$("#deposit").attr('isDeposit','1');
$("#distribute").attr('isDeposit','0');
});
and on submit click
$("form submit").click(function()
{
var identifyButton = $(this).attr('isDeposit');
}
some thing like this.
Try to use the jQuery submit() function, like this:
$('#deposit').submit(function(){
//Code to run
});
It's better because you can cancel the client event, if some field is wrong.
http://api.jquery.com/submit/
You don't need a plugin to do it, however there's a lot of them:
http://www.designyourway.net/blog/resources/55-jquery-form-plugins-to-download-and-use/

Categories