I have a get form on a store website. The idea is, as you click on the "Add to Cart button" it sends the parameters (3 out of 4 are already known, being the last one an user input). The problem here is that the URL sent is not correct.
Here's an example of a form for one product:
<div class='product'>
<article class="produto_box">
<h3>Salsa</h3>
<img src='https://gnomo.fe.up.pt/~ee10174/trabalhosSiem/trabalhoPHP2/images/ervas/salsa'.'.png'>
<br>
<span class="preco"><b>Preço: </b>1€</span>
<form method="GET" action="https://gnomo.fe.up.pt/~ee10174/trabalhosSiem/trabalhoPHP2/actions/produtos/add_to_cart.php?preco=1&qtd=qtd&id=4&nome=Salsa>
<input type="hidden" name="encomendar[4][preco]" value="1" />
Qtd (1-10): <input type="number" name="qtd" min="1" max="10"><br>
<input type="submit" name="encomendar[4]" value="Adicionar ao Carrinho">
</form>
</article>
</div>
Generated by:
{foreach $produtos as $produto}
<div class='product'>
<article class="produto_box">
<h3>{$produto.nome}</h3>
<img src='{$BASE_URL}/images/{$produto.tipo}/{$produto.ref}'.'.png'>
<br>
<span class="preco"><b>Preço: </b>{$produto.preco}€</span>
{if $TIPO == 'cliente'}
<form method="GET" action="{$BASE_URL}/actions/produtos/add_to_cart.php?preco={$produto.preco}&qtd=qtd&id={$produto.id}&nome={$produto.nome}>
<input type="hidden" name="encomendar[{$produto.id}][preco]" value="{$produto.preco}" />
Qtd (1-10): <input type="number" name="qtd" min="1" max="10"><br>
<input type="submit" name="encomendar[{$produto.id}]" value="Adicionar ao Carrinho">
</form>
{/if}
</article>
</div>
{/foreach}
Instead of the desired URL, I get this passed:
(...)add_to_cart.php?qtd=3&encomendar%5B4%5D=Adicionar+ao+Carrinho
Any idea why does this happens?
You need to encode the URL, but you should really use POST and not GET if you want to accept any input. You will get into a lot of encoding problems with GET.
I don't use smarty so you may have to fix my syntax a little, but I think this is approximately what you need:
{assign var="url" value="{$BASE_URL}/actions/produtos/add_to_cart.php?preco={$produto.preco}&qtd=qtd&id={$produto.id}&nome={$produto.nome}" }
<form method="GET" action="{$url|urlencode}">
Related
I've got a small form where I store information regarding some user choices. I'm not sure though how I can pass href links that are different for each user.
Here is a small example of the code:
<form method="post" action="save.php" class="form">
<fieldset>
<input type="checkbox" name="checkthing" value="g1">
<label>Option 1</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="g2">
<label>Option 2</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="e1">
<label>Option 3</label>
</fieldset>
<fieldset>
<input type="checkbox" name="checkthing" value="e2">
<label>Option 4</label>
</fieldset>
<a data-column="1" href="link here" style="color: green;">Text</a> <br>
<a data-column="2" href="link here">Text</a> <br>
<a data-column="3" href="link here" style="color: green;">Text</a> <br>
<a data-column="4" href="link here">Text</a> <br>
<button type="submit" name="save">
<i class="ft-check"></i> Save
</button>
</form>
When href got a style, it means that is customized for the user. What I want is to store the data-column ID for that user but I am not sure how I can achieve that through PHP.
So for the above example I would store the checked checkboxes + data-column 1 + 3.
You could create a hidden form element with javascript like this, and pull it off when the form is submitted as $_POST['style_ele']
$("form.form").find("a").each(function(){
if($(this).attr("style")!==undefined){
$("form.form").append("<input type='hidden' name='style_ele[]' value='"+$(this).data('column')+"'/>");
}
});
But, if you are generating that style attribute from server-side code like php, you could just create additional hidden input along with the a tag
This question already has answers here:
When submitting a GET form, the query string is removed from the action URL
(13 answers)
Closed 1 year ago.
I'm trying to make a filter using a MySQL database and PHP for a school project, but whenever I press my filter button, it doesn't execute the action so the querystring is not updated.
The reason it's referring to my homepage is because of this block code:
if (empty($_GET['page'])) {
$_GET['page'] = 'home';
}
if (empty($routes[$_GET['page']])) {
header('Location: index.php');
exit();
}
This is when there is no $GET['page'] passed, and it will just refer to my homepage.
So the problem probably lies with my form action, which is clearly correct: action="index.php?page=agenda"
<form class="filter_form" method="get" action="index.php?page=agenda">
<div class="location">
<p class="filter_by">filter by:</p>
<label for="location">location</label>
<select name="location" id="location">
<option value="all">-- Locations --</option>
<?php foreach($locations as $location): ?>
<option value="<?php echo $location['location']; ?>"
<?php
if(!empty($_GET['location'])){
if($_GET['location'] == $location['location']){
echo ' selected';
}
}
?>
>
<?php echo $location['location']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="checker_wrapper">
<div>
<input type="checkbox" name="check1" id="check1">
<label for="check1">skills only</label>
</div>
<div class="bottom_row">
<input type="radio" name="group" id="radio1">
<label for="radio1">day</label>
</div>
</div>
<div class="radio_wrapper">
<div>
<input type="checkbox" name="check2" id="check2">
<label for="check1">in group</label>
</div>
<div class="bottom_row">
<input type="radio" name="group" id="radio2">
<label for="radio2">evening</label>
</div>
</div>
<input class="button filter_button" type="submit" value="filter" />
</form>
When I press the filter button, I'm in the homepage and the querystring is like this: index.php?location=all, so the $_GET[location] for my project works. It's just not adding the correct page in the string.
Your form is overriding the query string parameters in your action attribute.
Instead of putting the query string in the action, add a hidden field
<form class="filter_form" method="get" action="index.php">
<!-- ... the rest of your form code -->
<input class="button filter_button" type="submit" value="filter" />
<input type="hidden" name="page" id="page" value="agenda" />
</form>
Related post: submitting a GET form with query string params and hidden params disappear
You should use a hidden input element in your form rather than adding your parameters in the URL:
<input id="page" name="page" type="hidden" value="agenda">
You should add a hidden input field into the form. Instead attach it into the action string,
<input type="hidden" name="page" value="agenda" />
Add a hidden field:
<input type="hidden" name="page" value="agenda" />
The get parameter in your action is overruled by the method "GET".
I am trying to create a multi step form by getting questions and answer alternatives from a mysql database through php/ajax (No page reload is necessary). I do however seem to have problems submitting the data if a .php page generates all the divs(at least that is a theory as to why it won't work). The way I am trying to do it seems to work fine if I write it all directly in HTML, but that would not be dynamic and therefore useless for this particular task. Is it possible to create a form like psuedo-coded underneath?
<div>
<div id="stepone" class="section"> </div>
<div id="steptwo" class="section"> </div>
<div id="stepthree" class="section"> </div>
<div id="stepfour" class="section"> </div>
</div>
And then have a PHP site generate the input tags and assign it to the correct div, so that the divs are created in HTML/JS but the inputs like checkboxes and textareas are generated dynamically through PHP. I can't seem to think of a good way to do this?
Worth mentioning that this page is made in JQM (jQuery Mobile) so I think the different div-roles can appear problematic for this task.
A generated question in my PHP script will be something like this:
<form id="eval_form">
<h3>Hva tenkte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="2">
<input type="checkbox" name="res[2][1]" id="2_1" value="1"><label for="2_1">asd1</label>
<input type="checkbox" name="res[2][2]" id="2_2" value="2"><label for="2_2">asd2</label>
<input type="checkbox" name="res[2][3]" id="2_3" value="3"><label for="2_3">asd3</label>
</fieldset>
<h3>Hva følte du om møtet?</h3>
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="3">
<input type="checkbox" name="res[3][1]" id="3_1" value="1"><label for="3_1">test1</label>
<input type="checkbox" name="res[3][2]" id="3_2" value="2"><label for="3_2">test2</label>
<input type="checkbox" name="res[3][3]" id="3_3" value="3"><label for="3_3">test3</label>
<input type="checkbox" name="res[3][4]" id="3_4" value="4"><label for="3_4">test4</label>
</fieldset>
<input type="button" id="submit" value="Submit" class="submit-btn">
</form>
The code for my demo program looks like this, and it has no problems being posted:
<form id="eval_form">
<!-- STEP 1-->
<div data-role="content" id="form1" class="section">
<input type="text" name="answer[1]" placeholder="Write something..." class="required"></input><p/>
<input type="text" name="answer[2]" placeholder="Write something..." class="required"></input><p/>
<input type="button" name="next1" value="Next" id="next1" onClick="toggleVisibility('form2')" class="next-btn"/>
</div>
<!-- STEP 2-->
<div data-role="content" id="form2" class="section">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="answer[4]" id="1" value="1" class="required"/><label for="1">Value 1</label>
<input type="radio" name="answer[4]" id="2" value="2" class="required"/><label for="2">Value 2</label>
<input type="radio" name="answer[4]" id="3" value="3" class="required"/><label for="3">Value 3</label>
</fieldset>
<input type="button" id="back2" value="Back" onClick="toggleVisibility('form1')" class="back-btn">
<input type="button" name="next2" value="Next" id="next2" onClick="toggleVisibility('form3')" class="next-btn"/>
</div>
<!-- STEP 3-->
<div data-role="content" id="form3" class="section">
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" class="required">
<input type="checkbox" name="answer[5][1]" id="1" value="1"/><label for="1">Testie</label>
<input type="checkbox" name="answer[5][2]" id="2" value="2"/><label for="2">Testoe</label>
<input type="checkbox" name="answer[5][3]" id="3" value="3"/><label for="3">Tester</label>
</fieldset>
<input type="text" name="answer[3]" placeholder="Write something..." class="required"></input><p/>
<input type="button" id="back3" value="Back" class="back-btn" onClick="toggleVisibility('form2')">
<input type="button" id="submit" value="Submit" class="submit-btn"/>
</div>
</form>
Ajax function to send the data:
$(document).ready(function()
{
$("#submit").click(function()
{
var data_string = $('#eval_form').serialize();
$.ajax(
{
type:'POST',
url:'add.php',
data:data_string,
success:function(response)
{
$("#eval").html(response);
}
});
})
});
The way id do it is just have a single div to contain your steps
<div id="stepContainer" >
<input type="text" id="step1Input" />
</div>
Something like that.
The ajax query will take any elements within the step container and submit them appropriatley via GET/POST to your php/asp whatever page does your server logic. When it returns it can return some confirmation or the html required for the next step.
Once you have this returned html or built the new html in javascript based on the response from the server you can replace the contents of the stepContainer with the new html. This will then act as step 2.
You may want to have a hidden div or some counter in javascript to keep track of which is your current step.
It may even be wise to use json return from the server which can allow you to pass more information across (well more easily anyway), allowing you to have error messages, confirmations, html etc embedded in the single response.
I wonder whether someone could help me please.
I'm put together the following form contained within a PHP file.
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<input name="submit" type="submit" onclick="MM_callJS('savedata()')" value="Submit" />
</form>
It all works fine, but I'd now like to add a button that opens the following php page, 'blobupload.php'. If I've understood this correctly from the research that I've done, I need to use javascript to open the page, using the 'submit' action from the main form.
What I don't understand is how to do this when the 'submit' action is already taken for the saving of the information on the main form.
Could someone perhaps please show me how to get around this, i.e. using the same 'submit action but for two different purposes.
Just modify your form tag (add the action attribute to file you want to load):
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="blobupload.php">
And you submit input tag:
<input name="submit" type="submit" value="Submit" />
You can use a second javascript function to open new window like this way
<input name="submit" type="submit" onclick="MM_callJS('savedata()');SECOND_JS_FUNCTION()" value="Submit" />
Use php to process the form is one of the way to do it.
<input name="submit" !!!!!!action="process.php" method="POST (or get)!!!!!!!!!! type="submit" onclick="MM_callJS('savedata()')" value="Submit" />
that way the the variable will be passed to the process.php while you can also redirect the page in the process.php
header("Location:URL");
I have a form with over 50 input fields. The input fields are divided into 5 jquery jabs within the form container. Here's a sample of what it looks like:
<form action="admin/save" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="department" />
<input type="hidden" name="id" value="21" />
<div id="tabs">
<ul>
<li>Tab 1<li>
<li>Tab 2<li>
<li>Tab 3<li>
</ul>
<div id="tab-1">
<label>Name</label>
<input type="text" name="user-name" />
</div>
<div id="tab-2">
<label>Address</label>
<input type="text" name="user-address" />
</div>
<div id="tab-3">
<label>Phone</label>
<input type="text" name="user-phone" />
</div>
</div>
<input type="submit" value="Send" />
</form>
I'm using PHP's Kohana framework, so admin maps to a controller, and save maps to the method action_save.
When I output the $_POST variables in action_save, only 'type' and 'id' show up, all the other fields don't seem to submit their data.
What could I be doing wrong?
Have you tried this with different browsers and sniffed the network traffic to see exactly what's being sent?
Grab Firebug and make sure it's actually sending the POST data.