How to get the Specific Form Field value using JQuery - javascript

I have a form
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
</form>
I am accessing the form using this code
$("#post_comment").submit(function(event){
var form = $(this);
});
How can I get the value of <input type="hidden" name="type" value="sub" /> from this form.
I tried to get using form.input("type") but it is not working.

$("#post_comment").submit(function(event){
var inputValue = $("input[name='type']",this).val();
});

Try using an id like this:
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" id='hidden' name="type" value="sub" />
<textarea id="body"></textarea>
</form>
and later:
$("#post_comment").submit(function(event){
var hiddenValue = $("#hidden").val();
});

<form id="post_comment" action="" method="post">
<input type="hidden" class="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
<input type="submit" value="submit" class="submit"/>
</form>
$(".submit").click(function(){
var hiddenVal=jQuery("#post_comment .hidden").val();
//alert(hiddenVal);
});

var form = $(this);
var inputValue = form.find('input[name="type"]').val();
or
var form = $(this);
var inputValue = form.find('input:hidden').val();

Another approach for this
Consider if you have multiple forms with multiple input fields having name attribute than this code will be helpful for you :
$("#formId input[name='valueOfNameAttribute']").val()
$("#formId textarea[name='message']").val()
Hope it'll help somebody.

$("#post_comment").submit(function(event){
var form = $("input[name='type']").val();
})

Related

How to pass the input entered in an html form to the action of the same form

<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
In the above code, I want the action attribute of form to be /deal/(deal-id-entered-by-user). Is there any way to do it without using any javascript? And is it at all possible even with javascript?
You should be able to do it simply with javascript like this:
document.querySelector('form').onsubmit = function() {
this.setAttribute('action', "/baseurl/" + document.querySelector('input[name=dealId]').value)
}
<form action="/baseurl/" method="POST">
Kindly enter the deal id :
<input type="text" name="dealId">
<input type="submit" value="Get the deal" />
</form>
The best way is to change the form action by javascript:
document.forms[0].action=documnet.getElementById('dealId').value;
You can use it like this:
<form action="<c:url value = "/deal/#value-that-user-enters#"/>" method="POST">
Kindly enter the deal id : <input type="text" class="myBox" name="dealId">
<input type="submit" value="Get the deal" />
</form>
$('.myBox').on('change', function (event) {
var myVal = $(this).val();
$('form').attr('action', function(i, value) {
return value + myVal;
});
});

Passing value from one field to another

I want to pass the value 9112232453 of one textfield to another.
I know I need Javascript for this but I don't know how to do it.
HTML
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
Then later, I want to use the value in my php.
You could use a JS. function to take param (this.value) like:
<script>
var some_func = function (val){
var input = document.getElementById("phone");
input.value = val;
}
</script>
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func(this.value);' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
The best way is to not obtrude the HTML code with Javascript event handlers.
So, you can add a DOMContentLoaded event listener to the document, and as soon as DOM is loaded:
You add a change event listener to the input[type=checkbox], and then:
1.1. If the checkbox is checked, then you change the input#phone's value to its value
1.2. If not, then you empty the input#phone's value.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cbphone').addEventListener('change', function(e) {
var phone = document.getElementById('phone');
if (this.checked) {
phone.value = this.value;
// you can even enable/disable the input#phone field, if you want to, e.g:
// phone.disabled = false;
}
else {
phone.value = '';
// phone.disabled = true;
}
});
});
<form method="post" action="">
<input type="checkbox" name="cbphone" id="cbphone" value="9112232453">
<input type="text" name="phone" id="phone">
<input type="submit" name="Go" value="Go">
</form>
before submit form use validation and check whether the field value is filled up or not. if yes get value of the field.
if(document.getElementBy("fieldIdfirst").value!="")
{
document.getElementBy("fieldIdSecond").value=document.getElementElementById("fieldIdfirst");
}
Thanks it..
Try this: http://jsfiddle.net/yhuxy4e1/
HTML:
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' id="chk_phone">
<input type="text" name="phone" value="" id="txt_phone">
<input type="submit" name="Go">
</form>
JavaScript:
some_func = function() {
var checkBox = document.getElementById('chk_phone');
var textBox = document.getElementById('txt_phone');
textBox.value = checkBox.value;
}

javascript submit lose $_POST value

I have the following script
$(document).ready(function(){
$("#SoumettreCarte").submit(function(ev) {
alert('ok');
ev.preventDefault();
ville="bonjour";
$.post("../cartes/essai2.php", {ville:ville})
.done(function (response) {
// window.location.replace("http://localhost/projet2/cartes/essai2.php");
});
});
});
When i click on submit, i want it to redirect me to essai2.php, so i use window.location.replace, but then i lose the value of my $_POST. So my problem, is how to load another page after submitting a form with javascript without losing my $_POST. Thanks for your help.
When i try action="essai2.php", i don't get "ville" in my $_POST.
You can make a hidden field like this:
HTML
<input type="hidden" name="ville" id="ville">
You can change the input field's value like this:
JQUERY
$(document).ready(function(){
ville = 'Bonjour';
$("#ville").val(ville);
//or $("[name=ville]").val(ville);
}
you can do like this
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
in jquery part do like this
var lat = "some lattitude";
var lng = "some longtitude";
$("[name=submit]").click(function(e){
$("[name=lat]").val(lat);
$("[name=lng]").val(lng);
});
<form action="essai2.php" class ="SoumettreCarte" id="SoumettreCarte" method="post" >
<input type="text" name="pays" id="pays">
<input type="hidden" name="lat" value="">
<input type="hidden" name="lng" value="">
<input type="submit" name="submit" id="soumettre" value="soumettre la carte" >
</form>
<script type="text/javascript">
$.post("../cartes/essai2.php", data:$("#SoumettreCarte").serialize())
.done(function (response) {
});</script>
you can try this one..

How can I set the value of a hidden input field using Jquery?

I am attempting to set the value of a hidden input field to the same as the value of a clicked link.
This is what I have attempted which doesnt work:
$(document).ready(function(){
$(".delete_link").click(function(){
var deleteID = $(this).attr("data-value");
$("#delete_value").attr("value") = deleteID;
});
});
The variable deleteID is correctly set.
and the form for reference:
<form name="delete_form" action="delete_post.php" method="POST">
<p>Please confirm you want to delete this post.</p>
<input type="submit" id="delete_submit" name="delete_submit" value="confirm" />
<input type="hidden" id="delete_value" value="" />
</form>
use the val method
$("#delete_value").val(deleteID);
also for data attributes you might want to use the data method
$(this).data('value');
links:
http://api.jquery.com/val/
http://api.jquery.com/data/
For all form elements you need to use .val():
$("#delete_value").val(deleteID);
A complete example you (http://jsfiddle.net/79HEY/):
HTML
<form id="deleteform" action="delete_post.php" method="POST">
<p>Please confirm you want to delete this post.</p>
<input type="submit" data-id="100" id="delete_submit" name="delete_submit" value="confirm" />
<input type="hidden" id="delete_value" value="" />
</form>
JavaScript
$(document).ready(function(){
$("#deleteform").submit(function(){
var deleteID = $("#delete_submit").data("id");
$("#delete_value").val(deleteID);
return true;
});
});

enhance name attribute in a form

I have a form, and add dynamically fields to it. After adding the fields I want to enhance the name attribute in the way that this:
<form id="workshops" action="" method="post">
<input type="hidden" value="1" name="form-0-Workshops">
<input type="hidden" value="morning" name="form-0-Day">
<input type="hidden" value="3" name="form-0-Workshops">
<input type="hidden" value="evening" name="form-0-Day">
<input type="hidden" value="3" name="form-0-Workshops">
<input type="hidden" value="morning" name="form-0-Day">
</form>
Becomes:
<form id="workshops" action="" method="post">
<input type="hidden" value="1" name="form-0-Workshops">
<input type="hidden" value="morning" name="form-0-Day">
<input type="hidden" value="3" name="form-1-Workshops">
<input type="hidden" value="evening" name="form-1-Day">
<input type="hidden" value="3" name="form-2-Workshops">
<input type="hidden" value="morning" name="form-2-Day">
</form>
I have this to start with but I don't make any progress.....
var forms = $('form#workshops input[name$="Workshops"]');
for (var i=0, formCount=forms.length; i<formCount; i++){
$('form#workshops input[name$="Workshops"]').each(function() {
//$(this) seems to be empty
});
}
Try using this:
// Get all the forms inputs
var $forms = $('form#workshops input[name$="Workshops"]');
// Loop through each form inputs
$forms.each(function () {
console.log($(this));
});
Your code keeps re-selecting things inside of a loop. Makes no sense.
Use each to your advantage, it gives you the index so there is no need to do the for loop. .
function rename (i) {
var parts = this.name.split("-");
parts[1] = i;
this.name = parts.join("-");
}
var form = $("#workshops");
form.find('input[name$="Workshops"]').each(rename);
form.find('input[name$="Day"]').each(rename);
Maybe just try :
$('#workshops input[name$="Workshops"]').each(function() { /*...*/ });
Please try the following code:
var forms_input = $('form#workshops input[name *="Workshops"]');
forms_input.each(function() {
console.log($(this))
});

Categories