WN - Posta utan submit-knapp

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Posta utan submit-knapp (https://www.wn.se/forum/showthread.php?t=1050775)

Posta utan submit-knapp

Jag har en enkel beställningssida som sparar produkterna med hjälp av javascript tills att det är dags att skicka iväg de beställda produkterna till min mejl. För att checka ut och skicka iväg mejlet klickar man på <a href="javascript:;" class="simpleCart_checkout" style="margin-top:8px;">Beställ</a>.
Ovanför denna länk har jag placerat två fält som jag skulle vilja skickades med i mejlet, så här ser koden i checkout.html ut:

Var god fyll i namn och telefonnummer innan du beställer.
<input placeholder="Namn" type="text" namn="namn" />
<input placeholder="Mobilnummer" type="text" name="telefon" />

Du är på väg att beställa <span class="simpleCart_quantity"></span> produkter för totalt <span class="simpleCart_total"></span>.</span>
<a href="javascript:;" class="simpleCart_checkout" style="margin-top:8px;">Beställ</a>

Men på detta vis får jag ju inte med de ifyllda fälten i mitt mejl, eftersom ingen submit-knapp klickas på. Jag kan ju inte heller byta ut länken mot en submit-knapp eftersom utcheckningen måste gå via javascriptet för att få med produkterna, eller har jag fel?

Javascriptkoden som hanterar mejlutcheckningen ser ut så här:

me.emailCheckout = function() {

itemsString = "";
for( var current in me.items ){
var item = me.items[current];
itemsString += item.quantity + " st\n" + item.name + "\n Pris: " + item.price + " kr/st \n\n";
}

me.total += "" + " KR"

var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "sendjs.php";
form.acceptCharset = "ISO-8859-1";
form.appendChild(me.createHiddenElement("jcitems", itemsString));
form.appendChild(me.createHiddenElement("jctotal", me.total));
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}

me.customCheckout = function() {
return;
};

Min sendjs.php har jag byggt upp så att det ser ut så som jag skulle vilja få informationen, tror allt ska stämma i den koden, får där lär inget behöva ändras väl?

<?php
$to = '[email protected]';
$subject = 'Beställning';
$jcitems = $_POST['jcitems'] .
" \n SUMMA: " . $_POST['jctotal'] .
" \n\n Namn: " . $_POST['namn'] .
" \n Telefon: " . $_POST['telefon'] .

$headers = 'From:' . "\r\n" .
'Reply-To:' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $jcitems, $headers);
Header('Location: tack.html');
?>

Antar att det är i javascriptkoden jag behöver lägga till något så att fälten infogas, men jag har verkligen ingen aning om hur, så vore oerhört tacksam för er hjälp här!
Tacksam om ni skickar med lite kodexempel så jag har något humm om vad ni menar när ni försöker förklara.

Tack på förhand!

Du kan skapa ett AJAX call från jQuery. Det är enklast.

Sök på jQuery AJAX

Citat:

Ursprungligen postat av frecka (Inlägg 20422620)

Du kan skapa ett AJAX call från jQuery. Det är enklast.

Sök på jQuery AJAX

Okej, stort tack!
Har googlat runt lite men allt det där är helt nytt för mig.

Hittade denna guide, är det enkelt att istället för att posta till echo direkt på sidan posta i mejlet?
http://www.devirtuoso.com/2009/07/be...x-with-jquery/

Borde det inte fungera att försöka infoga inputsen i javascriptet på något vis?

Jag tror jag kan vara något på spåret nu..!?

Har ändrat till detta i javascriptet:

me.emailCheckout = function() {

itemsString = "";
for( var current in me.items ){
var item = me.items[current];
itemsString += item.quantity + " st\n" + item.name + "\n Pris: " + item.price + " kr/st \n\n";
}

namn += " ";
telefon += " ";

me.total += "" + " KR"

var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = "sendjs.php";
form.acceptCharset = "ISO-8859-1";
form.appendChild(me.createHiddenElement("jcitems", itemsString));
form.appendChild(me.createHiddenElement("jctotal", me.total));
form.appendChild(me.createHiddenElement("namn", namn));
form.appendChild(me.createHiddenElement("telefon", telefon));
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}

me.customCheckout = function() {
return;
};

Och formuläret ser ut så här:

<form action="sendjs.php" name="form" method="post">
<input placeholder="Namn" type="text" name="namn" value="Namn" id="namn" /></li>
<input placeholder="Mobilnummer" type="text" name="telefon" value="Telefon" id="telefon" /></li>
<a href="javascript:document.info.submit('sendjs.php' ,{namn:'Namn',telefon:'Telefon'});" class="simpleCart_checkout">
</form>

När formuläret väl skickats iväg får jag följande text där jag placerat $_POST['namn'] och $_POST['telefon']
Namn: [object HTMLInputElement]
Telefon: [object HTMLInputElement]

Varför får jag texten "object HTMLInputElement"? Något måste jag gjort rätt, men samtidigt är det ju väldigt fel!?
Någon som kan hjälpa mig?

Tycker att du skall använda jQuery om du vill göra det snabbt och enkelt.

själv gillar jag inte javascript rent ut. Det känns mycket 90-tal men jQuery är ändå på JS ^^.

Följ guiden du länkade tilll så ska det fungera.

Det går enkelt att göra utan jQuery:

Pseudokod:

Kod:

<form name='bestform' method='post' action='sendjs.php'>

<input type='text' name='namn'>

<input type='text' name='tel'>

<input type='hidden' name='jcitems'>

<input type='hidden' name='jctotal'>

<a href='javascript:void(0);' onclick=''javascript:Bestall();'>Beställ</a>

</form>



<script>

function Bestall()

{

  // kontrollera fält och bygg upp hiddenfälten

  //...

  //

  document.bestform.submit();

}

</script>

Sen måste du lägga till extra kontroller i sendjs.php, du kan inte lita på att användaren skickar rätt data! Filtrera inkommande fält, beräkna totalsumman etc.

Citat:

Ursprungligen postat av SimonP (Inlägg 20422773)

Det går enkelt att göra utan jQuery:

Pseudokod:

Kod:

<form name='bestform' method='post' action='sendjs.php'>

<input type='text' name='namn'>

<input type='text' name='tel'>

<input type='hidden' name='jcitems'>

<input type='hidden' name='jctotal'>

<a href='javascript:void(0);' onclick=''javascript:Bestall();'>Beställ</a>

</form>



<script>

function Bestall()

{

  // kontrollera fält och bygg upp hiddenfälten

  //...

  //

  document.bestform.submit();

}

</script>

Sen måste du lägga till extra kontroller i sendjs.php, du kan inte lita på att användaren skickar rätt data! Filtrera inkommande fält, beräkna totalsumman etc.

Även om det Simon tar upp kanske kan kännas som en mindre detalj så är det där a och o när det kommer till användardata. Att kontrollera data på klientsidan gör man oftast som en extra service till användaren. Däremot är kontrollen på serversidan ett MÅSTE.

Stort tack för er hjälp, nu ska jag bara bygga upp kontrollen i sendjs.php.
Kommer säkert höra av mig med lite fler frågor om det.. ;)

Slänger in en snabb fråga här när vi ändå är igång:
I mitt formulär har jag försökt slänga in en php include, för jag har ett fält som jag vill bara ska visas en viss tid på dygnet och har då en annan php-fil som kontrollerar tiden och ser till att bara visa detta fält om tiden stämmer, men när jag lägger in <?php include('tidkontroll.php'); ?> mellan två fält i fomuläret fungerar inte längre submit.
Någon som vet vad det kan bero på och om det går att lösa på något vis?

har du mer än bara själva fältet i includefilen eller kan det vara något annat som gör att javascriptet går sönder?

Citat:

Ursprungligen postat av allstars (Inlägg 20423025)

har du mer än bara själva fältet i includefilen eller kan det vara något annat som gör att javascriptet går sönder?

Jag har en hel del annat där också, kom på nu att det kanske är att en annan javascriptfunction anropas på onclick i den filen? Jag har nämligen ett döljt fält som bara visas när checkboxen är iklickad. Kan säkert vara det som spökar till det?

Skickar i alla fall med hela koden här så kanske ni ser om det kan vara något annat som är problemet, men ska testa att ta bort onclick="showMe('hemlevDiv').

<?php

// -------- PHP STORE HOURS ---------
// ---------- Version 1.1 -----------
// -------- BY CORY ETZKORN ---------
// -------- coryetzkorn.com ---------

// -------- EDIT FOLLOWING SECTION ONLY ---------

// Set your timezone (codes listed at http://php.net/manual/en/timezones.php)
// Delete the following line if you've already defined a timezone elsewhere.
date_default_timezone_set('Europe/Stockholm');

// Define daily open hours. Must be in 24-hour format, separated by dash.
$time_range_mon = '16:00-20:30';
$time_range_tue = '16:00-20:30';
$time_range_wed = '15:00-20:30';
$time_range_thu = '16:00-20:30';
$time_range_fri = '16:00-21:30';
$time_range_sat = '16:00-21:30';
$time_range_sun = '12:00-19:30';

// Place HTML for output here. Image paths or plain text (H1, H2, p) are all acceptable.
$closed_output = '<li class="textbox"><p align="left" style="text-align:left">Du kan tyvärr inte göra någon beställning just nu.</p></li>';

$open_output = '<li class="checkbox"><span class="name">Vill du ha din beställning levererad?</span>
<input name="leverans" type="checkbox" onclick="showMe(\'hemlevDiv\')" value="Leverans till" />
</li>
<div id="hemlevDiv" style="display:none;">
<li class="bigfield">
<input placeholder="Fullständig Adress" type="text" name="adress" /></li>
</div>';

// OPTIONAL: Output current day's open hours
$echo_daily_hours = false; // Switch to FALSE to hide numerical display of current hours
$time_output = 'g a'; // Enter custom time output format (options listed here: http://php.net/manual/en/function.date.php)
$time_separator = ' - '; // Choose how to indicate range (i.e XX - XX, XX to XX, XX until XX)

// -------- END EDITING --------

// Gets current day of week
$status_today = date("D");

// Gets current time of day in 00:00 format
$current_time = date("G:i");
// Makes current time of day computer-readable
$current_time_x = strtotime($current_time);

// Builds an array, assigning user-defined time ranges to each day of week
$all_days = array("Mon" => $time_range_mon, "Tue" => $time_range_tue, "Wed" => $time_range_wed, "Thu" => $time_range_thu, "Fri" => $time_range_fri, "Sat" => $time_range_sat, "Sun" => $time_range_sun);
foreach ($all_days as &$each_day) {
$each_day = explode("-", $each_day);
$each_day[0] = strtotime($each_day[0]);
$each_day[1] = strtotime($each_day[1]);
}

// Defines array of possible days of week
$week_days = array("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");

// Compares current day of week to possible days of week and determines open vs closed output based on current day and time.
foreach ($week_days as &$each_week_day) {
if ($status_today == $each_week_day) {
echo '<div class="open-closed-sign">';
if (($all_days[$each_week_day][0] <= $current_time_x) && ($all_days[$each_week_day][1] >= $current_time_x)) {
echo $open_output;
} else {
echo $closed_output;
}
if ($echo_daily_hours) {
echo '<br /><span class="time_output">';
echo date($time_output, $all_days[$each_week_day][0]) . $time_separator . date($time_output, $all_days[$each_week_day][1]);
echo '</span>';
}
echo '</div>';
}
}
?>