Develop Reference

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>

How to call trigger.('click')

<div class="kn-submit">
<input type="hidden" name="parent_object" value="">
<input type="hidden" name="parent_field" value="field_510">
<input type="hidden" name="parent_id" value="">
<input name="view_key" type="hidden" value="view_848">
<input name="view_name" type="hidden" value="Edit OperationNu">
<input type="submit" value="Submit">
<div class="kn-spinner" style="display: none"></div>
$('.kn-submit').trigger('mousedown');// those 2 doesnt give results :(
$('.kn-submit').trigger('click');
My issue is that I want to make this button autoclick when specific function is called
Calling trigger on the class doesn't have any effects

You are trying to trigger on div element. You need to trigger click on submit button in this div.
Change it to:
$('.kn-submit input[type="submit"]').trigger('click');
And you dont need this:
$('.kn-submit input[type="submit"]').trigger('mousedown');
But also if you want just submit the form, use your form id and call this:
$('#form_id').submit();

To auto submit the form:
<form id="myform" action="target.php" method="post">
<input type="hidden" name="parent_object" value="">
<input type="hidden" name="parent_field" value="field_510">
<input type="hidden" name="parent_id" value="">
<input name="view_key" type="hidden" value="view_848">
<input name="view_name" type="hidden" value="Edit OperationNu">
<input type="submit" value="Submit">
</form>
<script>
$('#myform').submit();
</script>

Put the class name in the submit button. Also use the anonymous functions because you are calling the trigger function but you are not telling it what to do. Here is two ways you can proceed after you fix the class name:
Method 1:
$(".kn-submit").trigger("click", function(){
// what you want to do
});//trigger function
Method 2:
$(".kn-submit").click(function(){
// what you want to do
});//click function

html and javascript form not working

THis is the code :
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br>
<input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"
</form>
Why is it not working?
Once i click the submit button, nothing happened.
Pls help. Thx.

You should write
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
'==' instead of '=' in comparison
Change submit button also,
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search" />

Certain error
a) it should be window.location.href
b) close the submit button tag
c) use '==' equal to for comparision
<script>
function searchFor(searchEngine,searchQuery){
for (var i = 0; i < searchEngine.length; i++) {
if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
value = searchEngine[i].value;
}
}
if (value=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location.href=x
}
if (value=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc,this.form.searchContent.value);return false;" value="Search" />
</form>

<script type="text/javascript">
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x;
}
}
</script>
<form onsubmit="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;">
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" value="Search"/>
</form>
Modify the code as above. searchEngine="google" should be searchEngine == "google" and use onsubmit on tag instead of onclick on submit button.

instead of:
if (searchEngine="google")
try this:
if (searchEngine === "google")

preview before submit

can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(

Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});

You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/

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>