Submit button values not being passed with Ajax - javascript

I have the following ajax code which submits name/email/message parameters to "messageaction.cfm" template and displays those same 3 parameters on original submission page (works fine):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function submitForm() {
$.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
$('#ContactForm').find('.form_result').html(response);
}});
return false;
}
</script>
<form id="ContactForm" onsubmit="return submitForm();">
Name: <input type="text" name="name" value=""><br>
Email: <input type="text" name="email" value=""><br>
Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
<br>
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
<div class="form_result"></div>
</form>
However, I have 2 submit buttons (corresponding values of "One" and "Two") and would like to be able to detect which one was pressed. In a normal submit form (without ajax), the variable "Choice" is diplayed correctly with the corresponding "One" or "Two" depending on which button I clicked. But in the ajax form, the "Choice" variable only displays the same "0" (default value) regardless of which button I press.
I have tried 2 other ajax form variations but cannot seem to pass the value of the input submit button value. There must be something really basic I'm doing wrong but have tried just about everything I can think of. Any suggestions would be highly appreciated!

Since id is unique and name attribute should be unique in the same form as well, you should change:
<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">
to:
<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">
and try again with your AJAX code. Make sure you target it properly this time :)

At the time of the submit event, jQuery.serialize() does not know which button was clicked, so it is likely skipping those buttons when generating the form data.
You'll have to process the click events for each button as well and manually pass the button value.
An alternative would be to set a hidden form field value when the user clicks a button since a button click event will get processed before the form submit.

Related

How to use getElementById on a link to pick up textfield value

I want use document.getElementById('YourElementId') to pick up the Textfield value and then send it to another page called request.php as URL parameter.
Example, if i type (3) on the Textfiled and click submit, the Link will pick up the form variable as url parameter just like the folowing (.../requst.php?=id=3) Onsubmit.
Bellow is my textfield and the submit link/button but it doesnt work. Someone please help me.
<input name="consigno" type="text" id="YourElementId" value="3">
ENTER
Actually you can do this by using html form. This will do same thing.
<form method="GET" action="remote.php">
<input name="nav" id="YourElementId" type="text" value="3">
<input type="submit" value="ENTER">
</form>

How to get not focusable input form control by jQuery

<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-theme">
<input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
</label>
<label class="btn btn-success">
<input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
</label>
<br>
<input type="submit" name="" value="Submit">
</form>
i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code.
right now it giving "An invalid form control with name='file' is not focusable."
I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.
Is there any way to get that element (with help of jQuery) on which browser trying to focus ?
This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable
JQuery has a focus method that should do what you want.
Create a variable somewhere that will keep track of whether the user has clicked on an input.
var inputFocusOccured = false;
Then use the focus method to change the variable whenever a user clicks or touches an input.
$("input").focus(function(){
inputFocusOccured = true;
});
Then when the user clicks submit have it check if the value is true or false
$("#SubmitBtn").click(function() {
if(inputFocusOccured === false){
alert( "Handler for .click() called." );
}
});

how to call different servlet on clicking different button of html form

i have a html form i want to call two different servlet on clicking two different button how to change the form action run time
<form>
<input type="submit" value="Question Paper" style="height:25px; width:120px; background-color: royalblue;color: white;" />
<input type="submit" value="Instruction" style="height:25px; width:120px; background-color: royalblue;color: white;" />");
</form>
on clicking the button i want to call servlet1 and servlet2 on each button
please help me to solve this problem, thanks in advance
There are several ways to achieve this.
Probably the easiest would be to use JavaScript to change the form's action.
<input type="submit" value="SecondServlet" onclick="form.action='SecondServlet';">
But this of course won't work when the enduser has JS disabled (mobile browsers, screenreaders, etc).
Another way is to put the second button in a different form, which may or may not be what you need, depending on the concrete functional requirement, which is not clear from the question at all.
<form action="FirstServlet" method="Post">
Last Name: <input type="text" name="lastName" size="20">
<br><br>
<input type="submit" value="FirstServlet">
</form>
<form action="SecondServlet" method="Post">
<input type="submit"value="SecondServlet">
</form>
Note that a form would on submit only send the input data contained in the very same form, not in the other form.
Again another way is to just create another single entry point servlet which delegates further to the right servlets (or preferably, the right business actions) depending on the button pressed (which is by itself available as a request parameter by its name):
<form action="MainServlet" method="Post">
Last Name: <input type="text" name="lastName" size="20">
<br><br>
<input type="submit" name="action" value="FirstServlet">
<input type="submit" name="action" value="SecondServlet">
</form>
with the following in MainServlet
String action = request.getParameter("action");
if ("FirstServlet".equals(action)) {
// Invoke FirstServlet's job here.
} else if ("SecondServlet".equals(action)) {
// Invoke SecondServlet's job here.
}

separate two html forms

I create a two forms here http://jsfiddle.net/B9r22/8/ and when you submit them, they convert to JSON, and the problem is when you submit the first form and then the second form, there are both data from form in JSON, how can I reset forms or seperate them?
<form name="first" id="1" action="" method="post">
Which city is in Great Britain?<br/>
London:<input type="radio" name="first" data-questionid="1" value="11"/><br/>
New York:<input type="radio" name="first" data-questionid="1" value="12"/><br/>
<p><input type="submit" /></p>
</form>
<form name="second" id="2" action="" method="post">
Which city is in USA?<br/>
Washington:<input type="radio" name="second" data-questionid="2" value="13"/><br/>
Tokio:<input type="radio" name="second" data-questionid="2" value="14"/>
<p><input type="submit" /></p>
</form>
Use the form as scope when you get the radio buttons:
$('input[type="radio"]:checked', this)
Demo: http://jsfiddle.net/B9r22/11/
You can use a form reset, this will set inputs to their default values, but ignores some fields like type=hidden
$('#1')[0].reset();
As far as I can see, the problem lies in line 6. Your script collects data from all input fields in the whole DOM (document) with a type of radio. Instead, give the selector the context of the currently submitting form to only match those particular fields (using $(this).find where $(this) refers to the submitted form):
Change line 6 to $(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/12/
You need to limit the
$('input[type="radio"]:checked')
to the submitted form:
$('form').submit(function() {
var form = $(this);
//....
$('input[type="radio"]:checked', form).each(function(){
//...
http://jsfiddle.net/B9r22/9/
you should use $(this)
$(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/10/

Make input text fields changeable and selectable (toggled with checkbox)

Please see my current html snippet is as below. I am trying to make html input fields changeable and selectable. So I can change the value of colors in input text field which is toggled with the corresponding checkbox. When the submit button is clicked, only the information of the selected color is submitted.
My current html displays the content correctly, but it will submit two colors information. Despite of only one checkbox is selected.
<form id="myForm">
<input type="checkbox" name="color1" value="blue_check" />
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="color2" value="red_check" />
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
or click on: http://jsfiddle.net/4xDFK/56/
Thank you in advance.
With jQuery:
$(document).ready(function() {
$('#myForm :checkbox').each(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
});
$('#myForm :checkbox').change(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
As you don't mention the use of JavaScript or a JS-framework, here is a suggestion to solve it with the pure html form and server-side evaluation:
Give the checkboxes a telling name, like "check_blue" + "check_red"
On the server side, only process the color if the corresponding checkbox has been selected
If you only want to so submit or allow filling of the inputs according to the checkbox state, you have to use JavaScript (and should probably have mentioned that in your question or at least as a tag).
you can remove elements on submit , if related checkbox is not checked .
how to prevent form from sending some fields we don't want to send
All input values are submitted as you click hit the submit button. So what you need to do is to handle this on the server side. Give names to the checkboxes and check their values, google for "handling checkboxes in XXXX" where XXXX is your server side language.
<h1> Colors Information </h1>
<form id="myForm">
<input type="checkbox" name="choice1" value="choice1"/>
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="choice2" value="choice2"/>
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
You can then check which checkboxes are checked, and accordingly see if you should put the corresponding text input fields into consideration.

Categories

Resources