Develop Reference

jquery get specific input value from clicked button on form when multiple forms on page

I have multiple forms on the same page but need to get the values of the input element when a particular form is clicked i.e
However the jquery returns undefined query i
MY SCRIPT to get the values
jQuery(function($) {
$('.theform').submit(function(e) {
e.preventDefault();
var user = $(this).find(".product").val();
alert(user);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$product='productOne';
<form class="theform">
<input id="" class='product' name="product" value="<?php echo $product; ??>" style="display: none">
<input type="hidden" class="userName" name="userName" value="john759">
<button class="action">Click</button>
</form>
$product='productTwo';
<form class="theform">
<input id="" class='product' name="product" value="<?php echo $product; ?>" style="display: none">
<input type="hidden" class="userName" name="userName" value="dDuck">
<button class="action">Click</button>
</form>

instead of this:
var user = $(this).find(".product").val();
use:
var user = $(this).parent().find(".product").val();

Use jquery closest function to get closset form value;
$(this).closest('form').find(".product").val();

Try to change type of button
<button class="action" type="submit">Click</button>

How to change the value of input type in html?

I have a simple html form i.e.
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value=""/>
</form>
in <script> tag I am doing validation and changing the value of return:
<script>
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname");
});
</script>
Validation is working successfully while submitting the form but I am getting empty value in return input type. How can I make it work?

Looks like you are missing an id on the return input, you just have a name. So it should look like this:
<input type="hidden" name="return" id="return" value=""/>
That way when you call the input in js with $('#return') it will get it by it's proper id.

<input type="hidden" name="return" value=""/>
$("#return").val("http://localhost:9000/app/fname");//PROBLEM RESIDE Here
See what are you doing you are trying to assign the value to a selector that have id = return . But you don't have any element with this id however , you have an element with the same name.You can resolve this in two ways:
First selecting the element by its name:
$("input[name='return']").val("http://localhost:9000/app/fname");
or you can assign the id attribute to your input element as
<input type="hidden" id="return" name="return" value=""/>

You are assigning the value of input with id="return" which doesn't exist.
$("#return").val("http://localhost:9000/app/fname");
You should either give an id to input tag as
<input type="hidden" name="return" id="return" value=""/>
Or change script to
$("input[name='return']").val("http://localhost:9000/app/fname");

You call node using id in jquery , your return input doesnt have the Id called return
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname"); //setting the value
console.log($("#return").val()); //getting the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value="" id="return"/>
</form>

Multiple Forms on Same page AJAX

I'm having troubles on making this work.
I need to have multiple forms on the same page... I've tried countless things, but nothing seem to work.
What I'm trying to do here is identify every form (in some way) in order to submit that one instead of the FIRST form on the page. Code below, works but submits always the same form, the first one!
Here's my current code
JS:
$(document).ready(function(){
$('.submit').on("click", function() {
var artworkId = $("#inquirebox").data("artworkid");
$.post("send.php";, $("#artinquire"+artworkId).serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
HTML:
<div id="inquirebox" data-artworkid="<?php echo 456;?>">
<form action="" method="post" id="artinquire<?php echo 456;?>" data-artworkid="<?php echo 456;?>">
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message"></textarea><br />
<input type="hidden" name="id" value="<?php echo 456;?>">
<input type="hidden" name="artist" value="<?php echo $title1; ?>">
<input type="hidden" name="url" value="<?php echo $uri1; ?>">
<input type="hidden" name="artwork" value="<?php echo $artwork1; ?>">
<input type="button" value="send" class="submit" id="submit" data-artworkid="<?php echo 456;?>">
<div id="success"></div>
</form>
</div>

You're using the same ID on all the DIV wrappers around the forms.
ID's must be unique, so you could use a class instead, but you really don't need any identifiers at all, nor do you need data attributes, the .submit button is inside the form, so all you need is this.form, or more jQuery'ish $(this).closest('form') to get the parent form
$(document).ready(function(){
$('.submit').on("click", function() {
var form = $(this).closest('form');
$.post("send.php", form.serialize(), function(response) {
form.find('.success').html(response);
});
return false;
});
});
You should however use a class on the #success element to find it based on the form.

name of uploaded file in title field

I have seen on youtube when we upload any videos automatically, the title field of form gets filled with the name of the video file. How can i achieve this?
my form is
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>

Here's some jquery code to make it work:
$('#myfile').change( function(){
var fileValue = $(this).val();
$('#mytitle').val(fileValue);
});
And here's the modified HTML:
<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
<span class="form_label">Title</span><input id="mytitle" type="text" value="" name="title" style="width:400px" class="inputText required"></p>
<p><label>Upload</label><input id="myfile" type="file" name="song">
<p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>
Click here for the working JSFiddle. If you've never used jQuery before, then tell me, as this may be confusing!
Edit: Here's the replacing code:
$('#myfile').change( function(){
var fileValue = $(this).val();
fileValue = fileValue.replace('_', ' ');
fileValue = fileValue.replace('-', ' ');
$('#mytitle').val(fileValue);
});
Here's the updated jsfiddle

Use this code:
//use this in your form tag
<input id="song" type="file" />
//use this in your destination(action)
document.title = document.getElementById("song").value ;

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>