I am trying to learn web design with a search function using MySql. I want make it to 2 steps selection however, I have run into a problem which really confuses me since I don't have a strong background to design. I am trying to be as specific as possible to make the question clear.
test.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>count</title>
<link rel="stylesheet" type="text/css" href="dbstyle.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</head>
<body>
<form id="serc" method="post" action="">
<input type="radio" value="typeA" name="comments" onclick="expr()">Good
<input type="radio" value="typeB" name="comments" onclick="expr()">Bad
</form>
<form id="form1" name="form1" method="post" style="visibility:hidden">
<p>please select reason:</p>
<input type="checkbox" class="check" name="checkbox[]" value="COL 8">aaa<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 9">bbb<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 10" >ccc<br />
<button id="aaa" type="submit" class="butt" name="sub2" style="visibility:hidden">Submit</button>
</form>
<?php
$comm = $_POST["gender"];
$reas = $_POST["checkbox"];
if($comm){$respond = $_POST['comments'];
echo $respond;
}
<script src="limit.js"></script>
</body>
</html>
limit.js
//click to get Value
$("input[type='Radio']").click(function(){
var radioValue = $("input[name='comments']:checked").val();
$("#serc").css("display", "none");
$("#form1").css("visibility", "visible");
});
//limit multiple selection up to 4
$("input:checkbox").click(function() {
var bol = $("input:checkbox:checked").length;
if(bol == 4){
$("input:checkbox").not(":checked").attr("disabled",bol);
$("#aaa").css("visibility", "visible");
}
else {
$("#aaa").css("visibility", "hidden");
$("input:checkbox").removeAttr("disabled");
}
});
// return value
function expr()
{
var radioValue = $("input[name='comments']:checked").val();
var dataTosend= radioValue;
$.ajax({
url: 'index.php',
type: 'POST',
data: dataTosend,
async: true,
success: function (data) {
alert(data)
},
});
}
The function will be:
First stage select from radio item, onclick use jQuery to hide the selection items and also get radioValue from the jQuery by Ajax way to send to php use.
Second stage select 4 items from checkbox, and submit to run search field.
I expect load the radioValue back to php as a variable but seems it didn't get the value.
Any help would be appreciated.
You must send data using key value pair like this:
function expr(){
var radioValue = $("input:radio[name='comments']").val();
var dataTosend= {'radioValue': radioValue};
$.ajax({
url: 'index.php',
type: 'POST',
data: dataTosend,
async: true,
success: function (data) {
alert(data)
},
});
}
Related
Good afternoon,
I am trying to tick a checkbox in my html page using a script.
Unfortunately, I get the following error message :
SCRIPT5007: Unable to set property 'checked' of undefined or null reference
File: ajax3, Line: 37, Column: 5
Do you have an idea what went wrong in my code?
Thanks a lot and have a great Sunday.
Laurent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo for Ajax Auto Refresh</title>
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
<script src="jquery-2.1.3.min.js"></script>
<script>
/* AJAX request to checker */
function check(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#message-list').data('counter')
}
}).done(function( response ) {
/* update counter */
$('#message-list').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list').html(response.news);
sayHello();
}
});
}
//Every 1 sec check if there is new update
setInterval(check,1000);
</script>
<script>
function sayHello(){
//console.log("Coucou");
check();
}
function check() {
document.getElementById("chk1").checked = true;
}
function uncheck() {
document.getElementById("chk1").checked = false;
}
</script>
</head>
<body>
<div id="message-list" data-counter="<?php echo (int)$db->check_changes();?>">
</div>
<input type="checkbox" name="chk1" id="chk1"> Living room<br>
<input type="checkbox" name="chk2" id="chk2"> Entrance<br>
<input type="checkbox" name="chk3" id="chk3"> Kitchen<br>
</body>
</html>
As suggested by nmnsud and gcampbell, I have replaced value="chk1" by id="chk1". The correct bit of code is now the following :
<input type="checkbox" name="chk1" id="chk1"> Living room<br>
<input type="checkbox" name="chk2" id="chk2"> Entrance<br>
<input type="checkbox" name="chk3" id="chk3"> Kitchen<br>
Thanks a lot for your contribution. Best wishes,
Laurent
Is there a Jquery way to send 50 forms as if it was 1 form?
<form><input name="1"></form>
<form><input name="2"></form>
<form><input name="3"></form>
<form><input name="4"></form>
as if it was:
<form><input name="1">
<input name="2">
<input name="3">
<input name="4"></form>
sending it like this object including all inputs:
document.forms[0]
You can build a new single form that contains the 50 other forms values:
var $form = $(document.createElement('form'));
$('form :input').clone().appendTo($form);
Now, $form contains all of the inputs.
Send form data by serialize it.
<html>
<head>
<title>36373219</title>
<script type="text/javascript" src="assets/js/jquery-2.1.4.js"></script>
</head>
<body>
<form class="form" id="f1" >
<input name="f1_inp_1" value="1">
<input name="f1_inp_2" value="2">
</form>
<form class="form" id="f2" >
<input name="f2_inp_1" value="1">
<input name="f2_inp_2" value="2">
</form>
<form class="form" id="f3" >
<input name="f3_inp_1" value="1">
<input name="f3_inp_2" value="2">
</form>
<button id="fire">Fire</button>
</body>
<script type="text/javascript">
$('#fire').on('click', preparesend);
function preparesend(event)
{
sendform(event);
}
function sendform(event){
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening
var data = new FormData();
$('form').each(function(key,value) {
data.append( key, $(this).serialize());
});
$.ajax({
url: 'get_response.php',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
alert(data);
}
});
}
</script>
</html>
I have a list, each row is a form with a submit button. When I submit the form, data is sent through the post and must be update the div with the result. But there is a problem when sending the post, javascript does not send data correctly.
This is index file:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
$(".notif-close").click(function(e) {
e.preventDefault();
var notif_id = $(".notif_id").val();
var data = 'notif_id='+ notif_id;
$.ajax({
type: "POST",
url: "post.php",
data: data,
beforeSend: function(send) {
$("#notif_box").fadeOut(400, function() {
$('.loader').fadeIn(50);
}
)},
success: function(html){ // this happen after we get result
$(".loader").fadeOut(50, function()
{
$("#notif_box").html(html).fadeIn(400);
$(".notif_id").val("");
});
return false;
}
});
});
});
</script>
</head>
<body>
<form method='post' action='post.php'>
<input type='hidden' id='notif_id' name='1' class='notif_id' value='1' />
<button type="submit" id="notif-close" class="notif-close">notif-close1</button>
</form>
<form method='post' action='post.php'>
<input type='hidden' id='notif_id' name='2' class='notif_id' value='2' />
<button type="submit" id="notif-close" class="notif-close">notif-close2</button>
</form>
<div class='notificationsblock' id='notif_box'>Result</div>
<span class='loader' style="display: none; position: absolute;">Please wait...</span>
</body>
</html>
And this is post.php:
<?
sleep(2);
print_r($_POST);
?>
Help me.
Please tell me what am I doing wrong?
Try changing
var notif_id = $(".notif_id").val();
to
var notif_id = $(this).parent().find(".notif_id").val();
You can also try changing
var data = { 'notif_id' : notif_id }
You also have same IDs: #notif_id, #notif_close, which can (and will) cause errors and conflicts. You must give unique IDs. Giving unique names to input elements and forms is also a better idea.
Are there any jQuery/AJAX functions that when a form (or anything for that matter) is displayed, upon pressing a button the div containing the original form is replaced by a new form? Essentially, a multi-part form without having to reload the page.
Can I use something like this?
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
//somehow repopulate div with a second form?
}
})
return false;
});
I've used this before for adding items to a list, but I've never used it to totally repopulate it with different content. How can I direct it to the second form?
edit - I got it to work, but only when I write '#form2' for the replacement. I alerted the response and I get {"formToShow":"show2"}. I tried doing response.formToShow but it's undefined.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<div id="divName">
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1" value="1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2" value="2"/>
<input type="submit" name="submit2"/>
</form>
</div>
<script>
$('form#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'JSON',
url: 'receiving.php',
data: $(this).serialize(),
success: function(response) {
$('#form1').hide(); //hides
//$('#form2').show(); //this will show
$(response.formToShow).show(); //this does not display form 2
}
})
return false;
});
</script>
Here is receiving.php. When I view this page {"formToShow":"show2"} is displayed
<?php
echo json_encode(array("formToShow" => "#form2"));
?>
Check the JQuery Load Function
This is personal preference, but I'd never send HTML through the response and display it like that, what I'd do is:
Send a JSON array back from the server, such as { formToShow: "#form1" }
Then you can simply do this:
success: function(response) {
$('form').hide();
$(response.formToShow).show();
}
Obviously, using this method, you'd also have to have the second form in your markup like this:
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
You'd also have to change (to pickup the array):
$.ajax({
type: 'JSON'
try this
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
$('#form1').hide();
$('#form2').show();
}
})
return false;
});
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="dispay:none;">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
is there a way of adding the form name or id to this Function to make it unique? I have a loop process that displays 5 forms and I need this piece of coding to be unique to each.
<script type="text/javascript">
$(function() {
$("input, select, textarea, checkbox, radio").autosave({
url: "/js/autosave/autosave.php",
method: "post",
grouped: false,
success: function(data) {
$("#message").html("Data updated successfully");
},
send: function(){
$("#message").html("Sending data...");
},
dataType: "html"
});
});
</script>
the form
<form action="/js/autosave/autosave.php" method="post">
<fieldset>
<label for="name">Name:<input type="text" name="word" id="word" value="<?php echo $row['word'] ?>"/></label>
<label for="email">Email:<input type="text" name="type" id="type" value="<?php echo $row['type'] ?>" /></label>
<input type="hidden" name="id" value="<?php echo $row['Id'] ?>" />
<input type="submit" value="Save changes" />
</fieldset>
</form>
Based on your updated question...
$(function() {
var formCounter = 0;
$("form:not([id])").each(function(){
$(this).attr("id", "form_" + formCounter);
formCounter++;
});
}
You could reference $(this) within autosave to get the caller and query it for its parent (and add an attribute or some identifying characteristic to each)
$(function(){
$('form').each(function(){
$(this).find('input, select, textarea, checkbox, radio').autosave({
url: "/js/autosave/autosave.php",
method: "post",
grouped: false,
success: function(data) {
$("#message").html("Data updated successfully");
},
send: function(){
$("#message").html("Sending data...");
},
dataType: "html"
});
});
});
The code above adds autosave functionality to each form individually, which should solve your issue.