I have multiple buttons with different functionality, but each button behaves as submit button. I want to give different behavior for each of the button created.
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc --!>
<button name="buttonName" id="submitButton1" value="create">create</button>
<button name="buttonName" id="submitButton2" value="Update">Update</button>
</form>
If you change the buttons to input type=submit, only the pressed button will be sent.
For example:
<form action="/createUpdate">
<!--here i have form elements like textbox , checkboxes etc -->
<input type="submit" name="buttonName" id="submitButton1" value="create" />
<input type="submit" name="buttonName" id="submitButton2" value="Update" />
</form>
Related
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.
I have a few buttons and a submit button. (Making simple) My idea is to receive the value of the clicked button using a php and display it only when submit. Here I face a problem that button click itself redirects to the page and displays the value (means it is not waiting for the submit button to press). I followed a javascript provided here. But didn’t work. Any method to achieve this?
<form action="calculate.php" method="POST">
<button type="" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
php part is as simple as,
$button = $_POST['btn'];
echo $button;
Define the plain button's type as "button"
<form action="calculate.php" method="POST">
<button type="button" name="btn" style="background-color:#7F77AE" value="Alf">x1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="ABI">y1</button>
<button type="button" name="btn" style="background-color:#7F77AE" value="APE">z1</button>
<input type="submit" value="Submit">
EDIT: If you absolutely need to use buttons here you can do something like this:
<script>
function select(val){
document.getElementById("btnValueStore").value = val;
}
</script>
<form action="calculate.php" method="POST">
<button type="button" style="background-color:#7F77AE" onClick="select('Alf')">x1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('ABI')">y1</button>
<button type="button" style="background-color:#7F77AE" onClick="select('APE')">z1</button>
<input type="hidden" value="" name="btn" id="btnValueStore">
<input type="submit" value="Submit">
</form>
First you define a hidden input to hold the value of the last pressed button.
The select function changes the value of the hidden input field to whatever value you pass it.
For each of your buttons set the "onClick" property to call the select function with the corresponding button's value.
Note: This particular implementation allows only 1 button to have been "selected" (the last one you clicked) - for the ability to "select" more than one button you will need multiple hidden input fields.
I'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.
The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.
<div id="forms" class="container">
<form>
Enter your verb here in plain (dictionary) form:
<input type="text" class="input-sm" id="input"></input>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Hiragana" checked />Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="input-method" value="Romaji" />Radio 2
</label>
</div>
<input type="button" class="btn btn-default" id="submit" value="Submit">
</input
</form>
</div>
I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!
you can either add following script at the end of body
<script>
$("form").submit(function (e) {
e.preventDefault();
alert("call some function here");
});
</script>
or you can just put your form tag like this
<form onsubmit="return false">
either way you will then have to write an onClick="SOMEFUNCTION()" to the input
also there is an error with an extra /button tag...remove that and instead use
<input type="button" class="btn btn-default" id="submit" value="Conjugate" />
note the ending slash
simply change your html:
<div id="forms" class="container">
<form action="javascript:void(-1)">
Enter your verb here in plain (dictionary) form:
....
jsfiddle here - works like charm
you have syntax error in your html codes:
<input type="button" class="btn btn-default" id="submit" value="Submit">
</button>
change it to this:
<button type="button" class="btn btn-default" id="submit" value="Submit">
</button>
Also, you need using Javascript/jquery to submit your form to prevent refreshing your entire page
place :
e.preventDefault();
inside the keypress function
I have inherited a project and there is a form with 3 buttons:
<input type="submit" id="ctl00_contentPlaceHolder_back" value="Make Changes" name="ctl00$contentPlaceHolder$back" onClick="history.back();">
<input type="submit" id="ctl00_contentPlaceHolder_preview" value="View Outside" name="ctl00$contentPlaceHolder$preview">
<input type="submit" id="ctl00_contentPlaceHolder_submit" value="Send Card" name="ctl00$contentPlaceHolder$submit">
How do I make it so, that only 1 button actually submits the form to another page for processing?
Change all the other ones to type="button"
Change the input type="button" instead of type="submit". These kind of look like ASP controls, so find and replace these form buttons with a plain button, unbound.
By not letting them be submit buttons. Use type="button" instead of type="submit".
I am trying to submit the data for this form, which has 3 different buttons:
<form action="/game.php?village=8404&screen=market&mode=own_offer&action=modify_offers&h=85fd1491" method="post">
<input class="btn btn-cancel" type="submit" value="Delete" name="delete">
<input type="text" size="2" name="mod_count" value="1" onkeydown="return no_enter(event)">
<input class="btn" type="submit" value="Increase" name="increase">
<input class="btn" type="submit" value="Reduce" name="decrease">
</form>
I would like to either submit the data in the same manner of "increase" or click that submit button. Ideally, I wouldn't have to replicate the URL which appears after the form action= as this varies from page to page.
When the form has a definite id, I've been using:
$('#thisFormId input[type=submit]').click();
But can't work out.
So how I can do that in this instance?
If I understand the questions:
$("input[name=increase]").click();
will trigger the click event of the Increase button and submit the form, which is what you want?