Develop Reference

How to pass different hidden input fields based on the clicked submit button

I have two hidden input fields with the same name but with different id. I want to pass it via an action based on different submit button. When I click on the 'normal' process button it should pass the #normalfee hidden field value, and when clicking on 'urgent' it should pass #urgentfee value.
<form name="home" action="#" method="post">
<input type="hidden" name="fee" id="normalfee" value="49">
<input type="hidden" name="fee" id="urgentfee" value="99">
<input type="submit" name="Normal Process">
<input type="submit" name="urgent process">
</form>

I would use a radio button to select the state of the process and then infer the amount on the receiving end. That way users can't modify the value and you only have one button to submit the form while still having multiple options to choose from.
<form name="home" action="#" method="post">
Fee type:<br>
<input type="radio" name="fee" value="normalfee">Normal<br>
<input type="radio" name="fee" value="ugrentfee">Urgent<br>
<input type="submit" name="Process">
</form>

According to Form Controls
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form.
You can check the attribute value on button click to remove the name attribute which will ultimately prevents the value from submitting:
$('input[type=submit]').click(function(){
$('#normalfee, #urgentfee').attr('name', 'fee');
if($(this).attr('name') == 'Normal Process'){
$('#urgentfee').removeAttr('name');
$('#urgentfee').attr('disabled', 'disabled');
}
else{
$('#normalfee').removeAttr('name');
$('#normalfee').attr('disabled', 'disabled');
}
var passVal = $('form').serialize();
alert(passVal);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="home" action="#" method="post">
<input type="hidden" name="fee" id="normalfee" value="49">
<input type="hidden" name="fee" id="urgentfee" value="99">
<input type="submit" name="Normal Process">
<input type="submit" name="urgent process">
</form>

Jquery not getting form data from forms with that same class name

I'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.

my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>

Form won't submit when showing certain fields

I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system.
However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!

There's a few problems with your code that can each individually cause issues like this.
The fact that you have duplicate names and ids are your primary issues. I.e. you have 3 forms named frmrbwebattorney and all your submit buttons are id'ed btnptarbweb. When you call document.frmrbwebattorney, it is likely getting the wrong form.
Simple solution: replace your <input type="button" ...> with <input type="submit" ...> and remove the onclick from them. Thus your buttons will look like:
<input type="button"
value="Log In"
style="font-size:11px; width:64px"
id="something-unique"
name="btnptarbweb" />
Also note: you can't have multiple style attributes. I combined them into one.

Instead of the onclick attribute with the javascript code change the button type to submit. That will work.

Submitting 2D array form input using AJAX in Javascript

I have a form as follows:
<form name="chat" id="chat" action="" onsubmit="sendMessage()">
<a name="chat"> </a>
<input type="text" name="chat" id="chat" size="38" maxlength="50" vertical-align="middle">
<input type="hidden" name="action" id="action" value="checkresponse">
<input type="hidden" name="response_Array[sessionid]" id="response_Array[sessionid]" value="keu88lh88ini89dgnccob54f27"><br>
<input type="text" name="response_Array[top]" id="response_Array[top]" value="a">
<input type="text" name="response_Array[second]" id="response_Array[second]" value="b"><br>
<input type="text" name="response_Array[third]" id="response_Array[third]" value="c"><br>
<input type="text" name="response_Array[fourth]" id="response_Array[fourth]" value="d"><br>
<input type="text" name="response_Array[input][0]" id="response_Array[input][0]" value="input 0"><br>
<input type="text" name="response_Array[that][0]" id="response_Array[that][0]" value="that 0"><br>
<input type="submit" name="submit" id ="submit" value="SEND" style="width: 45px">
</form>
When the user clicks Submit, I need to send all the input fields to the server.
But, the page should not get refreshed. So, I have created sendMessage(),in which I have used XMLHttpRequest object to send the form submit request.
To read input fields, I have used in sendMessage():
var infoStr = "chat="+document.forms[0]['chat'].value;
infoStr += "&action="+document.forms[0]['action'].value;
I want to know how should I read the 2D array :response_Array and parse it into a JSON string so that it can be passed to the php server code.

It is so simple
var infoStr=""
for(var i=0;i<document.forms[0].elements.length;i++)
{
infoStr+=document.forms[0].elements[i].name+"="+document.forms[0].elements[i].value+"&";
}
alert(infoStr); // You will have the full name value pairs.
Hope this solves your problem.

Change value of input and submit form in JavaScript

I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}

You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.

document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">

Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};

No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.

You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}

My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.

I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />

You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>