I have two forms in a html site and each form has an inputbox and a submit button
<div id="ausgabe">
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestA</button>
</form>
<form class="forms">
<input type="text" placeholder="bla">
<button type="submit" class="btn btn-primary btn-small">TestB</button>
</form>
</div>
$(".forms").submit(function(event)
{
event.preventDefault(); // Prevent the form from submitting via the browser
var test = $(this);
var wert = test.parent().find(":input:first").val();
alert("Button pressed"+wert);
});
Then i type "TestA" in the first inputbox and press the submit-button for this form and get an "Button pressed TestA" alert.
Then i type "TestB" in the second inputbox which belongs to the second form and i expect this result "Button pressed TestB" but i get "Button pressed TestA" again
How can i get the value of the inputbox which belongs to the its form?
My idea was to get the parent of the button which is pressed and find an inputbox there.
I'am generate this forms dynamicly from a java servlet backend and i not want to create ids for each form.
Best Regards
rubiktubik
When targeting the form, you don't want to find the first input in the parent element, but in the form itself:
$(".forms").on('submit', function(event) {
event.preventDefault();
var test = $(this);
var wert = test.find(":input:first").val();
alert("Button pressed"+wert);
});
Related
I am wondering how to get 2 actions in PHP from a single Button.
Attached here is an screenshot of the page:
I have the following code:
For the Submit button
<form method='POST'>
<div class="form-group">
<input type="text" name="s_amount" style='width:20%;' required>
<input type="submit" class="btn btn-primary" name="submit" value="Submit" />
</div>
</form>
<?php
$s_amount = $_POST['s_amount'];
echo $s_amount;
?>
AND for the Submit Code button
<button id="submitcode"type="button" class="btn btn-default">Submit Code</button>
<pre><code id="output">.../...</code></pre>
When the Submit code is pressed, this executes the following script
<script>
$(document).ready(function(){
$("#submitcode").on("click", function(){
ocpu.seturl("https://public.opencpu.org/ocpu/library/base/R")
//arguments
var mysnippet = new ocpu.Snippet("V_CT="+$('[name="CT"]:radio:checked').val()+"\r V_TP="+$('[name="LENGTH"]:radio:checked').val()+$('#input2').val());
//perform the request
var req = ocpu.call("identity", {
"x" : mysnippet
}, function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
});
});
})
});
</script>
What I would like to have is a single button, which not only gets the value next to the first submit button (here 12, see attached pciture) but also executes the script.
Many thanks !
try giving id to form tag and on click on submitcode button call the form using its id.
for ex.
<form method='POST'>
function(session){
session.getObject(function(data) {
//data is the object returned by the R function
$("#output").text(data);
// using form id call the form
$("#formdata").submit(); // it will simply submit the form.
});
});
<form method="post" id="formdata"> <!--assign id to form tag-->
</form>
Could finally do it very easily using js.
<input type="text" id="VTP" value="0">
and get the value in the javascript form
document.getElementById("VTP").value
# nikhil borikar: Thanks but it did not work
I have a button submit inside a form and just a normal button outside of it. I want to validate a form:
function myButtonHandler(evt) {
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
}
This doesn't show the standard error tips inside of input elements when they're invalid when I click on a button -- ones shown by a browser when I click the submit button. How can I get these validation message to pop up when I click on my normal button when the form is invalid?
<form id="my_form">
<input type="text" placeholder="Name" required="true"/>
<input type="submit" id="submit" value="go" />
</form>
No jquery.
You'll need to add the code you've shown to a function that is set up as the click event callback for the normal button:
var myForm = document.querySelector("form"); // reference to form
var btn = document.querySelector("[type='button']"); // reference to normal button
// Set up click event handling function for normal button
btn.addEventListener("click", function(){
if (myForm.checkValidity()) {
alert("yes");
} else {
alert("no");
}
});
<form>
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="button">Check Validity</button>
If you just want to show the normal browser's validation errors, you can make the second button also a submit button. It's OK for the button to be outside of the form as long as you tie it back to the form with the form attribute.
<form id="theForm">
<input type="text" required>
<button type="submit">submit</button>
</form>
<button type="submit" form="theForm">Check Validity</button>
when I am removing form tag then it is working but after adding form tag from HTML it is not working. following is the code on which I am trying and what is the reason it is not working
function abc() {
var i, ele, node, parent;
var num = document.getElementById("name").value;
//num=parseInt(num);
var parent = document.getElementById("listName");
var node = document.createTextNode(num);
var ele = document.createElement("option");
ele.append(node);
parent.appendChild(ele);
//alert(num);
//num++;
document.getElementById("name").value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="submit" onclick="abc()" />
</form>
Valuing the attribute type of the input element with the submit value means submit the form.
The button documentation states indeed :
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
You don't have any form, so the current page is considered as the actual form.
As you click on the button, the function associated to onclick() is first invoked.
It adds the option in the dataList but you will never see it because the form is submitted and so you come back to the initial state of the html page.
You don't want submit a form but having a button to bind a click event to a function.
So don't use the submit type but the button type for your input :
<input type="button" value="add option" onclick="abc()" />
that matches to your requirement :
button: The button has no default behavior. It can have client-side
scripts associated with the element's events, which are triggered when
the events occur.
As a side note, your function is more complex as required and introduces too many variables that may create side effects.
This is enough :
function abc() {
var nameElement = document.getElementById("name");
var newOptionElement = document.createElement("option");
newOptionElement.textContent = nameElement.value;
var listNameElement = document.getElementById("listName");
listNameElement.appendChild(newOptionElement);
nameElement.value = "";
}
<form>
<input type="input" id="name" list="listName" />
<datalist id="listName"></datalist>
<input type="button" onclick="abc()" />
</form>
Because you used button as submit type.
If you need client side manipulation then it should not be maintain the page state (means not submit).
In your case if you will use
<input type="button" onclick="abc()" />
in place
<input type="submit" onclick="abc()" />
so it will be solve your problem.
change the html to type=button
<input type="button" onclick="abc()"/>
this works for me :
html ->
<input type="text" class='form-control' list="city" >
<datalist id="city">
</datalist>
js and jq ->
$("#city").empty(); // first empty datalist
var options=[];
options[0] = new Option('landan');
options[1] = new Option('york');
options[2] = new Option('liverPool');
$("#city").append(options);
I am stuck with a small issue.
<input class="btn btn-home" type="submit" name="discard" id="discard" onclick="return confirm('Are you sure you want to discard changes?')" alt="Discard" value="Discard Changes"/>
$('document').ready(function(){
var subm = "";
$('input[type="submit"]').click(function(e) {
subm = e.target.id;
if(subm == 'discard')
window.location = "http://www.weblink.com/manager.php";
})
});
When user click on button a confirmation box will appear with ok cancel. When user click on ok it will redirect to other page and if user click on cancel then it will stay on this page.
Problem is it is redirecting if user click on cancel. I don't want to redirect the page if cancel button clicked.
Two problems here:
You're trying to combine inline and external JS, which is always a bit messy
You're not suppressing the native behaviour of submit buttons, which is to submit a form (which I assume you have in your HTML, even though it's not shown). In fact, you don't even need the button to be of type submit.
HTML:
<button class="btn btn-home" name="discard" id="discard">Discard Changes</button>
JS:
$('#discard').on('click', function(evt) {
evt.preventDefault(); //don't submit the form, which a button naturally does
if (confirm('Are you sure you want to discard changes?'))
location.href = 'http://www.weblink.com/manager.php'; //redirect only on confirm
});
Put confirm dialog inside onsubmit listener instead. No need to use click listener.
<form onsubmit="return confirm('whatever your confirmation message')">
<input class="btn btn-home" type="submit" name="discard" value="Discard Changes"/>
</form>
You need to remove the inline script,
and the modification to the code should be something like the below -
$('document').ready(function()
{
var subm = "";
$('input[type="submit"]').click(function(e) {
var isConfirmed = confirm('Are you sure you want to discard changes?');
if(isConfirmed){
subm = e.target.id;
if(subm == 'discard'){
window.location = "http://www.weblink.com/manager.php";
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-home" type="submit" name="discard" id="discard" alt="Discard" value="Discard Changes"/>
I'm trying to disable all submit type elements of a form once it's submitted, to avoid double clicking. But I only want the buttons within the submitted form to be disabled.
For example when clicking the Submit button, only the Submit button and the Another submit to disable (same form) should be disabled. The other submit elements should remain as they were.
The code below disables all submit elements.
$(document).on('submit', function (event) {
event.preventDefault();
var submit_button = $(':submit');
submit_button.prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
<input type="text">
<button type="submit">Part of another Form (leave enabled)</button>
</form>
<form>
<input type="text">
<button type="submit">Submit</button>
<button type="submit">Another submit to disable (same form)</button>
</form>
Well, event.target will refer to the submited form, so you can find all submit buttons inside that form using the :submit selector:
$(document).on('submit', function (event) {
event.preventDefault();
$(':submit',event.target).prop('disabled', true);
});
Check the below snippet example
$(document).on('submit', function(event) {
event.preventDefault();
$(':submit', event.target).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit">Not part of submitted form (leave enabled)</button>
<form>
<input type="text">
<button type="submit">Part of another Form (leave enabled)</button>
</form>
<form>
<input type="text">
<button type="submit">Submit</button>
<button type="submit">Another submit to disable (same form)</button>
</form>
Detect on form submit then search for the button[type=submit] in that form and disable them.
$('form').on('submit', function (event) {
event.preventDefault();
var submit_button = $(this).find('button[type="submit"]');
submit_button.prop('disabled', true);
});