We Keep Coding

How do you send more than 2 forms to PHP?

I've gotten an assignment and it is:
Make a website/page which processes forms. You shall have atleast 4 questions/forms and you need to process it in php. After that you should be able to tell the user what they got wrong and what they got right. You should also be able to write your name and it should appear on the php site somewhere.
So here I am with a site, I got 3 questions so far (I wanted to try before I went full scale). I use jQuery to hide and show the questions and I use radio inputs and a text input for the name. When I hit submit I've tried almost everything. Currently working with jQuery like this:
$(".knapp3").click(function() {
$('#fraga1, #fraga2, #name, #fraga3').submit();
});
The php only processes the value inside #name which is my text input. My forms look like this:
<div class="fraga1">
<h1>Hejsan?</h1><br>
<form id="fraga1" action="idk.php" method="POST">
<input type="radio" name="tva" value="1">hej<br>
<input type="radio" name="tva" value="12">Hejsan<br>
<input type="radio" name="tva" value="13">Tjena<br>
</form>
</div>
<div class="fraga2">
<h1>Vad heter jag?</h1><br>
<form id="fraga2" action="idk.php" method="POST">
<input type="radio" name="tva" value="2">qqq<br>
<input type="radio" name="tva" value="22">123<br>
<input type="radio" name="tva" value="23">xxx<br>
</form>
</div>
<div class="fraga3">
<h1>Vilken linje går jag?</h1>
<form id="fraga3" action="idk.php" method="POST">
<input type="radio" name="tre" value="1">Teknik<br>
<input type="radio" name="tre" value="32">Samhälle<br>
</form>
</div>
<div class="namn">
<form id="name" action="idk.php" method="POST">
Skriv in namn: <input type="text" name="name"><br>
</form>
</div>
What is wrong? the php looks like this:
<?php
$x = 0;
if (isset($_POST["fraga1"])){ //if isset is nothing, therefore it doesnt run these statements.
$fraga1 = $_POST["fraga1"];
if($fraga1 == 1){
$x+1;
}
}
if(isset($_POST["fraga2"])){
$fraga2 = $_POST["fraga2"];
if($fraga2 == 2){
$x+1;
}
}
if(isset($_POST["fraga3"])){
$fraga3 = $_POST["fraga3"];
if($fraga3 == 3){
$x+1;
}
}
else{
echo '<p>Nope</p>';
}
echo $x;
?>
<?php
echo $_POST["name"]; //Only this one is working.
echo $_POST["fraga1"]; //This one gives the error "undefined index"
?>

Problem is solved. The solution is was like someone commented, to submit just 1 form and put all the data in there. To access it from php you just needed the name of the radio input.

use the tag id="fraga1" /2/3/4 in your inputs and put them in one form, then use the following jquery-post to send it to php in onclick-event of submit button
$.ajax({
type: 'POST',
url: 'idk.php',
data: {fraga1:$('#fraga1').val(),fraga2:$('#fraga2').val(),fraga3:$('#fraga3').val(),fraga4:$('#fraga4').val()},
dataType: "json",
success: function (data) {
//do something...
},
error: function (err) {
console.log(err)
}
});
you can use javascript jquery to $('.fraga2').show() and $('.fraga1').hide() the questions and at the end execute to post above in a button event. this is very basic programming, if you didn't have a idea how to do this i recommend reading 2 or 3 tutorials on basic php an js or go to a forum for dummis and not pros.

If checkbox checked then trick button to continue to next page

How would I do this is Javascript? I'm trying to figure out a way in Javascript to trigger that submit button below if checkbox is checked. Which is it.
<input type="checkbox" name="product[6]" value="1" checked="checked">
<input type="submit" value="Continue">
Thank for you any help!
Tim

UPDATED
You can handle submit() event and add condition like bellow :
JS :
$("#target").submit(function( event ) {
event.preventDefault(); //prevent submit action here
//Condition on checkbox
if($( "input[name='product[6]']:checked" )){
$('#submit-btn').click(); //handle submit if condition true
}
});

For simplicity and specificity of which checkbox am adding ID's to elements
<input id="product6" type="checkbox" name="product[6]" value="1" checked="checked">
<input id="submit-btn" type="submit" value="Continue">
jQuery:
$(function(){
if( $('#product6').is(':checked') ){
$('#submit-btn').click();
// or submit the form
$('#product6').closest('form').submit();
}
});

First you want to give the checkbox input an id (checkbox-id for example)
and for the submit input (submit-id for example)
document.getElementById("checkbox-id").onclick = myFunction;
function myFunction()
{
document.getElementById("submit-id").click();
//Or
document.getElementById("submit-id").submit();
}

How to get value from hidden field then it changed, without button

How can I retrieve a value from HTML hidden field then its value is changed (all time value ischanged by other javascript), without a button. Every time the value changes (value is changed without page refresh), I want to grab it with javascript/ajax/JQuery without any button press.
UPDATE
How I change the hidden fields
<?php
echo '<select name="d2" onchange="checkTextbox12(this)">';
for($i=0; $i<=$d2; $i++){
echo
'<option value='.$i.'>'.$i.'</option>';
}
echo '</select>';
?>
</td>
<td id="kiek250decaffeinatoTest">
<script>
function checkTextbox12(element){
var kiek = element.value * 14;
document.getElementById('kiek250decaffeinatoTest').innerHTML = kiek + " LT";
document.getElementById('kiek250decaffeinatoKaina').value = kiek;
kiekis(kiek);
}
</script>
</td>
<input type="hidden" name="kiek250decaffeinatoKaina" onchange="" id="kiek250decaffeinatoKaina" >

With jQuery you would need to wire-up a change event to your hidden field.
$(function() {
$("#hiddenfield").change(function() {
alert($(this).val());
});
});
http://api.jquery.com/change/

Use a javascript onChange function:
<input type="text" onchange="myFunction()">
Put this in your html and link to whatever javascript function you want to execute.

Since hidden fields do not trigger change events when their values are changed by javascript you will have to manually fire the event after your code has changed the hidden fields value.
<input type="hidden" id="myhiddenfield" value="0" />
then in javascript
$("#myhiddenfield").change(function(){
alert("field changed");
});
function changeField(){
$("#myhiddenfield").val(55);
//Manually trigger the change event.
$("#myhiddenfield").change();
}
changeField();
JSfiddle demo
If you the code changing the field is not your code (like changed from some library) you will have to setup a timer(setTimeout,setInterval etc) to constantly watch the field for changes.

Send value of div on form submit

I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.
Here is the "textarea":
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
$_POST['dash_new_shout_textarea'] : '' ?>"></div>
The form is just a normal form with method=post.
Here is the php:
$newShoutTextarea = $_POST['dash_new_shout_textarea'];
Thanks for the help

I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.
HTML
<form onsubmit="prepareDiv()">
<div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
<input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>
Javascript
function prepareDiv() {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}
Your PHP remains the same.

What you can do is this:
<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>

the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable

You can add a hidden input to your form and update it with jquery
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="></div>
<form id="target" method="post" action="destination.php">
<input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
<input type="submit" value="Submit">
</form>
script
$("#target").click(function() {
$("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});

What you can do is use jQuery for this.
DEMO HERE
Proper scenario would be:
*Get value from div and save it into hidden field. *
This has to be done when you submit form:
$(function () {
$("#send").on("click", function () {
$("#hiddenfield").val($("#dash_new_shout_textarea").text());
alert($("#hiddenfield").val());
$("form#formID").submit();
});
});

Form submit through AJAX not working

My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.
This is the HTML I'm using:
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="{{submit-text}}" />
</form>
Here is the javascript earlier in the page:
jQuery(document).ready(function($) {
$('#city').change(function() {
$(this).parents("form").submit();
});
$('#myform').submit(function() {
$.post(
'myscript.php',
$(this).serialize(),
function(data){
$("#mydiv").html(data)
}
);
return false;
});
});
Here is the myscript.php:
<?php
if ($_POST['city'] == "atlanta") {
echo "Div contents 1";
}
if ($_POST['city'] == "miami") {
echo "Div contents 2";
}
?>
The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!

It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.
$('#city').change(function() {
$(this).closest("form").submit();
});
And to stop the Default action use e.preventDefault instead of return false
$('#myform').submit(function(e) {
e.preventDefault();
// Your code here
});

In you HTML code, I think you should change input type=button to input type=submit
<input class="srch_btn" type="submit" value="{{submit-text}}" />
Then when you click that button, the form will be submitted to your php page.
Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.
$('#city').change(function() {
$('#myform').submit();
});

One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.
$('#myform').submit(function(event) {
event.preventDefault();
http://api.jquery.com/event.preventDefault/
On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?

dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.
You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.
REVISED HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
<ul>
<li>
<label>Destination:</label>
<select name="city" id="city">
<option class="level-0" value="atlanta">Atlanta</option>
<option class="level-0" value="miami">Miami</option>
</select>
</li>
</ul>
<input class="srch_btn" type="button" value="Go" />
</form>
<div id="responder"></div>
REVISED JAVASCRIPT/JQUERY:
$(document).ready(function() {
$('#city').change(function() {
//var cty = $('#city').val();
$.ajax({
type: "POST",
url: "myscript.php",
data: "city=" + $(this).val(),
success:function(data){
$('#responder').html(data);
}
});
});
});