Full page is at http://f14.co/auto-search/reno
I have the following checkbox set up outside a form:
<div class='span5' style='margin-left:0px !important;'>
<label for='model0'>
<input type="checkbox" name="model0x" id="model0x"
value="Accord" style='margin-top:-5px !important;'> Accord</label>
</div>
I have this javascript between the checkbox and the form:
<script>
if($("#model0x").is(':checked')){
$("#model0_is_checked").val($("#model0x").val());
}else{
$("#model0_is_checked").val("Not Checked");
}
</script>
Finally, I have this hidden input to call that value inside the form when the item is checked or not:
<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
<input type="hidden" id="model0_is_checked" name="model0_is_checked">
MORE FORM STUFF AND SUBMIT BUTTON
</form>
No matter what I'm getting no value in the send_mail.php ....what am I doing wrong?
$('#model0x').click(function(){
var self=this;
$("#model0_is_checked").val($(self).is(':checked')?self.value:'Not Checked');
// do something
});
// or use submit ()
Bind the function to the form submit.
<script>
$('#final_form').on('submit',function(){
if($("#model0x").is(':checked')){
$("#model0_is_checked").val($("#model0x").val()); }
else { $("#model0_is_checked").val("Not Checked");}
});
</script>
jsFiddle example http://jsfiddle.net/KZrLp/
Your Javascript runs once, when the page (or more accurately, the <script> tag) is loaded. You have to make it run when the form is submitted instead:
<script type="text/javascript">
function updateHidden() { // Find a better name ;)
if($("#model0x").is(':checked'))
$("#model0_is_checked").val($("#model0x").val());
else
$("#model0_is_checked").val("Not Checked");
}
$(document).ready(function() { $('#final_form').submit(updateHidden); });
</script>
P.S. : not tested code
Related
I am trying to pass form values through post form but nothing shows.
using this HTML5 Text Editor http://suyati.github.io/line-control/
I'm using this method for form and php code
<?php
if(isset($_POST['submit'])){
echo $_POST['txtEditor'];
}
?>
html form i am using
<form method="post">
<textarea name="txtEditor" id="txtEditor" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>
and the java script is
<script src="WYSIWYG-Text-Editor/editor.js"></script>
<script>
$(document).ready(function() {
$("#txtEditor").Editor();
});
</script>
Have checked the doc and apparently you need to set the value by yourself, here is a solution:
Add some code to your initialization code:
<script>
$(document).ready(function() {
$("#txtEditor").Editor();
$('form').submit(function () {
$('#txtEditor').val($('#txtEditor').Editor('getText'));
});
$('#txtEditor').Editor('setText', $('#txtEditor').val());
});
</script>
On form submit we actually set the textarea value with what the user input in the WYSISWYG.
In the next line of code we set the value of the WYSISWYG with what value comes in the textarea (as you requested in your comment).
I posted a smaller to this yesterday and was shown how to do this but it doesn't work and the user never got back to me and I have been working on the same problem for hours.
I am trying to post a checkbox array from jQuery to php, when I run my code nothing seems to happen and when I try var_dump($_POST) this is all I get
Using this question as a reference, it seems that jQuery doesn't handle arrays too well. You can use to snippet from the accepted answer and it should work just fine.
serialize().replace(/%5B%5D/g, '[]')
Change the submit to a button or better use the form's submit event
why data-type html?
Your php does not seem to react to the serialised data but returns a button...
try my code here: http://plungjan.name/SO/sport.php
I am not unravelling the check box array - that is up to you
<?PHP
if (isset($_POST['saved'])) {
echo "saved"; exit(0);
}
else if (isset($_POST['Submit'])) {
echo var_dump($_POST["sport"]); exit(0);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Sports quiz</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('#myForm').on("submit", function(ev) {
ev.preventDefault(); // cancel submit
var $form = $(this);
if ($("[type=checkbox]:checked").length ==0) {
alert("Please check one or more");
return false;
}
var formData = $form.serializeArray();
formData.push({name:"Submit",value:"submit"}); // note I changed the name from submit to Submit
$.post('sport.php',formData, function(data) {
console.log("Data",data);
if (confirm('You want to save \n' + data + ' as your sport?')) {
formData = $form.serializeArray();
formData.push({name:"saved",value:"saved"});
$.post('sport.php',formData,function(data) {
console.log("Saved Data",data);
});
}
});
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="checkbox" name="sport[]" value="Football">Football<br>
<input type="checkbox" name="sport[]" value="Rugby">Rugby<br>
<input type="checkbox" name="sport[]" value="Golf">Golf<br>
<input type="checkbox" name="sport[]" value="Basketball">Basketball<br>
<br> <input type="submit" class="btn btn-info" name="Submit" value="submit">
</form>
</body>
</html>
this a simple example in how to submit form using the Jquery form plugins and retrieving data using html format
html Code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<form id="htmlForm" action="post.php" method="post">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
PHP Code
<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>';
?>
this just work fine
what i need to know if what if i need to Serialize the form fields so how to pass this option through the JS function
also i want show a loading message while form processed
how should i do that too
thank you
To serailize and post that to a php page, you need only jQuery in your page. no other plugin needed
$("#htmlForm").submit(function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData}, function(data) {
//do whatever with the response here
});
});
If you want to show a loading message, you can do that before you start the post call.
Assuming you have div with id "divProgress" present in your page
HTML
<div id="divProgress" style="display:none;"></div>
Script
$(function(){
$("#htmlForm").submit(function(){
$("#divProgress").html("Please wait...").fadeIn(400,function(){
var serializedData= $("#htmlForm").serialize();
$.post("post.php", { dat: serializedData},function(data) {
//do whatever with the response here
});
});
});
});
The answer posted by Shyju should work just fine. I think the 'dat' should be given in quotes.
$.post("post.php", { 'dat': serializedData},function(data) {
...
}
OR simply,
$.post("post.php", serializedData, function(data) {
...
}
and access the data using $_POST in PHP.
NOTE: Sorry, I have not tested the code, but it should work.
Phery library does this behind the scenes for you, just create the form with and it will submit your inputs in form automatically. http://phery-php-ajax.net/
<?php
Phery::instance()->set(array(
'remote-function' => function($data){
return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow');
}
))->process();
?>
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<div id="htmlExampleTarget"></div>
</body>
</html>
I have this code :
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
});
});
</script>
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="changeArtist" name="artist" value="<?=$artist?>" />
<a name="linkArtist" title="a" href="#">A</a> -
<a name="linkArtist" title="b" href="#">B</a> -
<a name="linkArtist" title="c" href="#">C</a>
</form>
When I click on the button, I set the link value (as 'title') to the hidden field, and after I'd like to send that form! How can I do it? And what do you think about this code? Can I better it?
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
$('#myForm').submit();
});
});
</script>
The form:
<form action="index.php?explore=browse" method="post" id="myForm">
Note the form id and the change to the click handler to access it.
I don't think you need to use preventDefault() at all. The form should not submit until the function has returned.
I have a form using the form jQuery plug in to handel the posting of the data. In the example i am working with the data is psoted to another php file which reades a database and echos back a result which is displayed below the from.
The code works very well with one glitch. If you hit the enter button while the text filed is selected everything cleared including the result that has been written to the screen. Is it possible to disable to enter key and prevent it from doing this?
FORM:
<html>
<head>
</head>
<p>enter code here
<form name="form" action="" method="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name"/>
<input type="button" value="get" onclick="get();"/>
</form>
<div id="age"></div>
</p>
</body>
</html>
SCRIPT:
function get() {
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
}
Cheers.
You should consider using the jQuery Forms Plugin. It will save you from doing some of the dirty work, additionally it will intercept all ways of submitting the form - so instead of having to disable the RETURN key it will submit your form via AJAX.
If you don't want that, get rid of the button with the onclick event and replace it with a submit button and register your function as a onsubmit handöer:
$('form[name=form]').submit(function(e) {
e.preventDefault();
$.post('data.php', {name: form.name.value},
function(output) {
$('#age').hide().html(output).fadeIn(1000);
});
}
});
$(document).ready(function(){
$('form').submit(function(){
return false;
});
});
This will prevent the form from submitting, however the form will not work at all for users with javascript disabled.
A found some tuts and solved the issue.
I just put this in before my Jquery code to disable the enter button.
$(function () {
$('input').keypress(function (e) {
var code = null;
code = (e.keyCode ? e.keyCode : e.which);
return (code == 13) ? false : true;
});
});