When I send a form using jQuery post and serialize, I only seem to send the items in the form that have been changed. I want to serialize the entire form. How do I do that?
I have some HTML.
<form name ="XXX" class="user_goal_form">
<input type="hidden" name ="goalID" value="1"/>
<input type="hidden" name ="userID" value="1"/>
Fullfilled: <input type="number" class="user_goal_input" name="achievedLevel" value="5"/.>
Finished: <input type="checkbox" class="user_goal_input" name="goalCompleted" value="false"/>
</form>
To that is attached some jQuery:
$(".user_goal_input").change(function(){
$.post("./handelform.php", {form: $(this).serialize()})
.done(function(data) {
$("#userList").html(data);
});
The content of the posted form I receive in handleform.php is only the things in the form that have changed. Never the hidden inputs or any input that has not been altered. How can I make this submit the entire form?
You're serializing the input instead of the form.
You can do this :
$(".user_goal_input").change(function(){
$.post("./handelform.php", {form: $(this.form).serialize()})
Related
I have a form which I want to post to my PHP file. The form consists of the submit button and a hidden value which contains the value of a localStorage entry:
<form action="submit.php" method="post">
<input type="hidden" name="formAnswers" id="localStorageAnswers" />
<input type="submit" id="btnSubmit" value="Submit" />
</form>
jQuery:
$('#btnSubmit').on('click', function() {
$("#localStorageAnswers").val(localStorage.getItem(answers));
});
PHP:
if (isset($_POST['formAnswers'])) {
echo $_POST['formAnswers'];
}
When the PHP file is launched no answers are shown. At first I thought maybe It wouldn't set it on the on('click') but I've set the value at a sooner point on the page with no difference.
I believe answers is not a variable, but a keyword. Use localStorage.getItem("answers") instead of localStorage.getItem(answers)
first of all, greetings and excuse my English...
I explain my problem:
I have some JS functions that generate some variables, I would like to send these variables via the POST method to a php file to be consulted in a database...
I have read that the best way to do this is sending the variables to the respective values about inputs within a form, Below I show the variables and the form:
Javascript variables:
On click in "Buscar"
$('#Buscar').on('click', function () {
document.getElementById("tipo").value=TipoDeInmuebleDATA.selectedData.value;
document.getElementById("operacion").value=TipoDeOperacionDATA.selectedData.value;
document.getElementById("habitaciones").value=HabitacionesDATA.selectedData.value;
document.getElementById("MetrosCuadrados").value=MetrosCuadrados;
document.getElementById("banos").value=BanosDATA.selectedData.value;
document.getElementById("precio").value=Precio;
});
The Form:
<form name="FormBuscar" method="post" action="consulta.php">
<input id="tipo" name="tipo" type="hidden" />
<input id="operacion" name="operacion" type="hidden" />
<input id="MetrosCuadrados" name="MetrosCuadrados" type="hidden" />
<input id="habitaciones" name="habitaciones" type="hidden" />
<input id="banos" name="banos" type="hidden" />
<input id="precio" name="precio" type="hidden" />
<input type="submit" name="Buscar" class="BotonBuscar">
</form>
I suspect that something is wrong, in the sense that I think the variables are not being sent to consultation
In consultation, if I do the following:
$tipo=$_POST['tipo'];
echo $tipo;
No result :-(
Greetings, I will await your answers in!
The event is wrong. You want to change the values right before submitting. So also add id="buscar-form" to the form tag. Then you can change the jQuery to this:
$('#buscar-form').on('submit', function () {
$('#tipo').val(TipoDeInmuebleDATA.selectedData.value);
$('#operacion').val(TipoDeInmuebleDATA.selectedData.value);
...
});
Forget about the #buscar button. When you click the button, the form is going to submit. So that's the event captured above. Careful with your typing, there are a lot of typos!
I have a simple form as outlined in the code below. I would like to append the value submitted in rm_accounts text box to the hidden page_confirm input value at the end of the URL. Hopefully that makes sense.
Essentially, if the user enters '123456' in the rm_accounts textbox, I want value of page_confirm to be http://www.mywebsite.com/index.php?rm_accounts=123456
<form name="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >
<input type='text' name='rm_accounts' value='' />
<input type="hidden" name="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
<input type="submit" name="Submit" value="Submit" >
</form>
All help is very much appreciated. Thanks!
Use Jquery focusout event to update hidden field value
When user enters 12345 and focus out of textbox or clicks submit(or anywhere) the below code get executed and update the value of hidden field.
$('input[type=text]').focusout(function(){
$('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
console.log($('input[type=hidden]').val());
});
or in submit button click
$('input[type=submit]').click(function(){
$('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
console.log($('input[type=hidden]').val());
});
Working JSFiddle link
http://jsfiddle.net/mkamithkumar/qNdny/1/
I would first suggest you give your HTML some IDs like so:
<form id="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >
<input type='text' name='rm_accounts' id='rm_accounts' value='' />
<input type="hidden" name="page_confirm" id="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
<input type="submit" name="Submit" value="Submit" >
</form>
Then use some jQuery for your task:
$('#signup').submit(function(){
var value = $('#rm_accounts').val();
var page_confirm = 'http://www.mywebsite.com/index.php?rm_accounts='+value;
$('#page_confirm').val(page_confirm);
});
I have a hidden input field that I fill with some arbitrary value using jquery such that:
function foo() {
// Obtains the contents of a div within the current page
var $elem = $("#something").html();
// Places the contents of the div into a hidden input field
$("#hidden").val($elem);
}
In debugging the thing, I can see that the elem variable obtains the html from within the desired div, but not whether the variable is passed to the hidden input field value.
I have a form:
<form method="POST" action="file.php" target="_blank">
<input id="hidden" type="hidden" value=""/>
<input type="submit" onmouseover="foo()" value="Download"/>
</form>
That upon submission executes the file.php:
<?php
$html = $_POST["hidden"];
echo $html;
?>
The echo call returns nothing, and all I get is a blank page. I am wondering why the value of the hidden input field is not being changed, or why it is not being passed during the POST call.
Some further experimentation revealed that even if I set the value of the hidden field with some random value:
<input id="hidden" type="hidden" value="Some Value"/>
it is still not obtained during the execution of the PHP file. The echo call returns nothing. What is the problem with my obtaining the value of this hidden input field? I have worked very sparingly with PHP but in the past have not had issue with obtaining values from a form upon POST submission.
You need to have a name for your input field in order to access it in php with $_POST
<input id="hidden" name="hidden" type="hidden" value=""/>
You should just indicate name attribute
<form method="POST" action="file.php" target="_blank">
<input name="hidden" id="hidden" type="hidden" value=""/>
<input type="submit" onmouseover="foo()" value="Download"/>
</form>
I am trying to pass values of selected checkboxes to a PHP file using jQuery's .getJSON method.
Problem: The values does not seem to be received by the PHP file. I am using print_f to see if the PHP file has received the form data. Looking at the return data, the error PHP throws [Undefined index:] tell me that the 2 arrays $bedroom and $bathroom are not defined. How do I get this to work?
HTML Code
<form action="form_ajax.php" method="post">
<input type="checkbox" name="bedroom[]" value="1">
<input type="checkbox" name="bedroom[]" value="2">
<input type="checkbox" name="bedroom[]" value="3">
<input type="checkbox" name="bathroom[]" value="1">
<input type="checkbox" name="bathroom[]" value="2">
<input type="checkbox" name="bathroom[]" value="3">
<input type="submit" id="button" value="submit!!!">
</form>
jQuery Code
$(function() {
$("#button").click(function(e) {
e.preventDefault();
var other_data = "hello";
$.getJSON("form.php", {some-other-data: other_data, bedroom: bedroom[], bathroom: bathroom[]}, function(data) {
console.log(data);
});
});
});
PHP Code
<?php
$bedroom = $_GET['bedroom'];
$bathroom = $_GET['bathroom'];
print_r($bedroom);
print_r($bathroom);
?>
According to the jQuery documentation of $.getJSON() the data is passed as querystring variables, so I would suggest you try to use $_GET instead:
$bedroom = $_GET['bedroom'];
$bathroom = $_GET['bathroom'];
Edit, how to send all form-data to the php-file:
If you add an id attribute to the form-tag, you can easily use jQuery to serialize the form, like this, and pass that as the data object in $.getJSON():
$.getJSON("form.php", $("#your-form-id").serialize());
Then all your selected checkboxes should be passed along to the PHP-file.