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
Related
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}">
I have two buttons in my form, one is for answer a question and the other is for copy the question.
<div id="question">
<?php echo($question->content) ?>
</div>
<form action="script.php" method="GET" id="question">
<input type="text" name="question">
<button id="answer" onclick="document.getElementById('question').submit()">Answer the question</button>
<button id="copy" onclick="document.getElementById('question').submit()">Copy the question</button>
</form>
The URL of script.php look now like:
script.php?question=sometext
Now I want that when you click at the copy button the URL looks like this:
script.php?question=sometext©
And for the answer button:
script.php?question=sometext&answer
EDIT:
There are much answers where is said: "use <input type> instead of <button>"
The problem is that I can't use a input field as button because the button is outside my form. And I can't put it inside my form
What you can do is to use one hidden field and change it's name according to the pressed button. Something like the following:
<div id="question">
<?php echo($question->content) ?>
</div>
<form action="script.php" method="GET" id="question">
<input type="text" name="question">
<input id="action" type="hidden" name="" value="">
<button id="answer" onclick="document.getElementById('action').setAttribute('name','answer'); document.getElementById('question').submit()">Answer the question</button>
<button id="copy" onclick="document.getElementById('action').setAttribute('name','copy'); document.getElementById('question').submit()">Copy the question</button>
</form>
Although this would give you the result you want at the url, it would be more appropriate to have as the hidden's field name the "action" and to change it's value to "copy" or "answer" through javascript.
Try to make two forms, with a hidden input field with the values. Then you get the extra parametrt in your url when submitting
Change your form to the following
<form action="script.php" method="GET" id="question">
<input id="question" type="text" name="question">
<input id="answer" type="submit" name="answer" value="true">
<input id="copy" type="submit" name="copy" value="true">
</form>
url:
script.php?question=hello©=true
Then you can check
if(isset($_GET['answer']) && $_GET['answer']=="true"){
//answer action
}
if(isset($_GET['copy']) && $_GET['copy']=="true"){
//copy action
}
Here is the snippet of html code.....
1)After checking each check box the value's is posting to the database.
2)But the problem is when i checked other, i need to take the value of the text box and it is posting the value of the checkbox instead of the textbox value
but i don't know where i did mistake...
<form action="purchase.php" name="form1" id="form1" method="POST">
<ul class="n_ul"> <span>*</span>
What is your Primary goal?
<br>
<br>
<li>
<input name="goal" id="goal" value="Add a popular customer service to attract/retain more customers"
type="checkbox">
</li> <span>*</span>
Popular customer Services
<br>
<br>
<li>
<input name="goal" id="goal" value="Add a turnkey revenue sources for my location(s)"
type="checkbox">
</li> <span>*</span>
trunkey revenue source
<br>
<br>
<li>
<input name="goal" id="goal" type="checkbox" value="other">
</li> <span>*</span>
Other (Please specify below)
<br>
<br>
<input name="other" id="goal" type="text" class="new">
</ul>
<input type="submit" name=submit value="submit">
</form>
Any suggestions are acceptable....
Try something like
$_POST['goal'] = ($_POST['goal']=='other') ? $_POST['other'] : $_POST['goal'];
This will overwrite the value of goal with the value of other only when the 'other' radio is ticked
Also id attributes of html elements should be unique on the page
EDIT
Your question is a little vague. It seems like you may want the form to submit when a checkbox button is clicked.
If this is the case the other field will be unlikely to be filled as the form will often be submitted before the user gets to populate it
Try adding a button or input to submit the form
Like this
<button type="submit">Submit</button>
You can check the value of your checkbox, and if it equals to other, you can grab your value from textbox. Do it following way:
if (isset($_POST['goal']) && $_POST['goal'] == 'other')
{
// do something with $_POST['other']
}
Try this
<form action="" name="form1" id="form1" method="POST">
<ul class="n_ul"> <span>*</span>
What is your Primary goal?
<br>
<br>
<li>
<input name="goal[]" id="goal" value="Add a popular customer service to attract/retain more customers"
type="checkbox">
</li> <span>*</span>
Popular customer Services
<br>
<br>
<li>
<input name="goal[]" id="goal" value="Add a turnkey revenue sources for my location(s)"
type="checkbox">
</li> <span>*</span>
trunkey revenue source
<br>
<br>
<li>
<input name="goal[]" id="goal" type="checkbox" value="other">
</li> <span>*</span>
Other (Please specify below)
<br>
<br>
<input name="other" id="goal" type="text" class="new">
</ul>
<input type="submit" name=submit value="submit">
</form>
<?php
$other="";
$goal=$_REQUEST['goal'];
if(in_array("other", $goal)){
$other=$_REQUEST['other'];
}
echo $other;
?>
I have a 3 page registration page. After the user selects an option on the first page and clicks submit, the form transforms into the next form using jquery's animate method, meaning it stays on the same page. The question I have is how to get the data from the first form because the content of the 2nd forms is dependent on that information. Here's my html:
<div id="Registration" style="display:none;">
<div class="box">
<form id="frmtype1" action="#" name="frmtype1" method="post">
<header>Registration Options</header><br/>
<label for="Reg_type1"><input type="radio" name="Reg_type" id="Reg_type1" value="1"/> Option 1</label> <br/><br/>
<label for="Reg_type2"><input type="radio" name="Reg_type" id="Reg_type2" value="2"/> Option 2</label><br/><br/>
<label for="Reg_type3"><input type="radio" name="Reg_type" id="Reg_type3" value="3"/> Option 3</label><br/><br/>
<p id="error_message" style="display:none">Please choose an option</p><input type="submit" class="button" name="Submit" value="Submit"/>
</form>
<form name="everything" id="everything" action="#" method="post">
<header>Registration Information</header><br/>
<label>First Name<font color="red">*</font>: <input type="text" name="fname" id="fname" /> </label><br/>
Last Name*: <input type="text" name="lname" id="lname" /> <br/>
Address*: <input type="text" name="address" id="address" /> <br/>
</form>
</div>
</div>
So once an option is selected, the first form disappears and the next one appears. So how do I get the data of which option they selected? Thanks
Since they depend on information on one form, the "pages" should really be the same form. You use the jQuery/JavaScript to show/hide the "current page". This will allow you to submit all the data in one go.
Wrap all the input elements in one html form tag
For each form "segment" you will need to use your js to hide/show the wrapping HTML container. The default being "page 1" of the form and the rest hidden.
Change your submit button to just a button and have a on click event on it. When the user clicks the button the input is validated and then the jQuery unhides "page 2".
On your last "page" have a normal submit button and then all the form data is posted in one.
For example, the html might look like this:
<script type="text/javascript">
$(document).ready(function{
$(".next-page").click(function(){
$(".box-wrapper").hide();
$("#page-" + $(this).data("page")).show();
});
});
</script>
<div class="registration">
<form name="regform" action="" method="post">
<!-- Page 1 -->
<div class="box-wrapper" id="page-1">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="2"/>
</div>
</div>
<!-- Page 2 -->
<div class="box-wrapper" id="page-2" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="button" name="next-page" class="next-page" value="Continue" data-page="3"/>
</div>
</div>
<!-- Page 3 -->
<div class="box-wrapper" id="page-3" style="display: none;">
<div class="box">
<!-- form inputs go here -->
<input type="submit" name="submit" class="submit" value="Complete Registration"/>
</div>
</div>
</form>
</div>
Using jquery --- $('input[name=Reg_type]:checked').val() this will give you the selected value.
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.