<form action="actions/add_cat.php" method="post" id="rtf" name="">
<input type="text" name="cat_title" id="cat_title" required="required" placeholder="Category Title"/>
<br /><br />
<button type="button" onclick="button_click('#d31b26');" value="d31b26" name="cat_color"><div class="redSelect"></div></button>
<button type="button" onclick="button_click('#f9c04c');" name="cat_color" value="#f9c04c"><div class="yellowSelect"></div></button>
<button type="button" onclick="button_click('#72bce9');" name="cat_color" value="#72bce9"><div class="blueSelect"></div></button>
<button type="button" onclick="button_click('#ec9292');" name="cat_color" value="#ec9292"><div class="pinkSelect"></div></button>
<button type="button" onclick="button_click('#b7d04e');" name="cat_color" value="#b7d04e"><div class="greenSelect"></div></button>
<div class="indexBox">
<div class="indexBoxHeader" id="box">
<i class="fa fa-question-circle" style="font-size: 2em;"></i></div>
<div class="indexBoxFooter">
<div class='printchatbox' id='printchatbox'></div>
</div>
</div>
<br><br>
<input onclick="formsubmit()" type="submit" value="Create Category" name="submit"/>
</form>
If i test using a text input and using the cat_color name it will post that entry but when using the above it does not seem to to take the item I am selecting?
Here is the post query incase you need to see it:
$sql = "INSERT INTO cat_list (cat_title, cat_color) VALUES ('".$_POST["cat_title"]."', '".$_POST["cat_color"]."')";
As I can't comment.
Try to have <radio> buttons instead of normal buttons. So the php/form would understand it is and option.
Example:
<form .. >
..
<input type="radio" name="cat_color" value="#d31b26"><div class="redSelect"></div><br>
<input type="radio" name="cat_color" value="#f9c04c"><div class="yellowSelect"></div><br>
..
</form>
EDIT
<form action="actions/add_cat.php" method="post" id="rtf" name="">
<input type="text" name="cat_title" id="cat_title" required="required" placeholder="Category Title"/>
<br /><br />
<!-- Radio Buttons With customized color class -->
<input type="radio" name="cat_color" value="#d31b26" class="redSelect"><br>
<input type="radio" name="cat_color" value="#f9c04c" class="yellowSelect"><br>
<input type="radio" name="cat_color" value="#72bce9" class="blueSelect"><br>
<input type="radio" name="cat_color" value="#ec9292" class="yellowSelect"><br>
<input type="radio" name="cat_color" value="#b7d04e" class="greenSelect"><br>
<div class="indexBox">
<div class="indexBoxHeader" id="box">
<i class="fa fa-question-circle" style="font-size: 2em;"></i></div>
<div class="indexBoxFooter">
<div class='printchatbox' id='printchatbox'></div>
</div>
</div>
<br><br>
<input onclick="formsubmit()" type="submit" value="Create Category" name="submit"/>
</form>
So in the in the end I just wrapped a hidden field inside the div for my colour picker like so:
<div class="redSelect" onclick="button_click('#d31b26');"><input type="hidden" name="cat_color" value="#f9c04c" ></div>
<div class="yellowSelect" onclick="button_click('#f9c04c');" ><input type="hidden" name="cat_color" value="#f9c04c" ></div>
<div class="blueSelect" onclick="button_click('#72bce9');"><input type="hidden" name="cat_color" value="#72bce9" ></div>
<div class="pinkSelect" onclick="button_click('#ec9292');"><input type="hidden" name="cat_color" value="#ec9292"></div>
<div class="greenSelect" onclick="button_click('#b7d04e');"><input type="hidden" name="cat_color" value="#b7d04e" ></div>
works a treat and posts out the value of the hidden field
With me, happened that my form had so so many inputs that it simply didn't send the last ones (the button and some others). In some way, there is a "limit" on how much data you may send by POST.
Then, I put a hidden input in the upper part of the form with the same name of button and it worked 👍🏻.
Related
I am trying to post a nested radio button with different field name and I have tried all I can, but I have not been successfull.
<form id="w0" class="form-vertical" action="" method="post">
<input type="hidden" name="_csrf" value="">
<label>Choose If you are human</label>
<div class="radio">
<label>
<input type="radio" name="name1" value="1">
<h4> Gender:
<input type="radio" name="male" value="m">Male
<input type="radio" name="gender" value="f">Female
</h4>
</label>
</div>
<hr>
</div>
<div class="help-block"></div>
</div><br>
<div class="form-group">
<button type="submit" class="btn btn success">Submit</button>
</div>
</form>
<?php
if(isset($_POST['name1']) && isset($_POST['gender'])){
$model->name = $_POST['name1'];
$model->gender= $_POST['gender'];
$model->save();
}
I have a form with multiple buttons and values. I want to submit which button was clicked when I press the submit button along with the value. I have the code below in a php loop with the questions. The code displays yes and no buttons for each question. I am using jquery to keep the classes active and toggle them (this works fine). My problem is when I submit the form only the questions is submitted via POST, and no data from the buttons pressed. How should I approach this to get the buttons pressed submitted (all buttons have a unique id)?
echo' <button type="button" name="yes'.$value[Key].'" id="answerf1" class="lietruth yes" >Yes</button>
<button type="button" name="no'.$value[Key].'" id="answer1" class="lietruth no" >No</button>
<div id="questions">'.$value[Question].'</div>';
//submit button is after the loop
HTML of generated page
<div id="Answertoggle16">
<div id="questions-box"><input type="hidden" name="question16" value="Question1"><input type="hidden" name="key" value="5"><input type="hidden" name="user" value="truthsandlie"><button type="button" name="yes5" id="answerf1" class="lietruth yes" >Yes</button><button type="button" name="no5" id="answer1" class="lietruth no" >No</button>
<div id="questions">Question1</div>
</div>
</div>
<div id="Answertoggle17">
<div id="questions-box"><input type="hidden" name="question17" value="Question2"><input type="hidden" name="key" value="9"><input type="hidden" name="user" value="truthsandlie"><button type="button" name="yes9" id="answerf1" class="lietruth yes" >Yes</button><button type="button" name="no9" id="answer1" class="lietruth no" >No</button>
<div id="questions">Question2</div>
</div>
</div>
<div id="Answertoggle18">
<div id="questions-box"><input type="hidden" name="question18" value="Question3"><input type="hidden" name="key" value="25"><input type="hidden" name="user" value="truthsandlie"><button type="button" name="yes25" id="answerf1" class="lietruth yes" >Yes</button><button type="button" name="no25" id="answer1" class="lietruth no" >No</button>
<div id="questions">Question3</div>
</div>
</div>
<div id="Answertoggle19">
<div id="questions-box"><input type="hidden" name="question19" value="Question4"><input type="hidden" name="key" value="30"><input type="hidden" name="user" value="truthsandlie"><button type="button" name="yes30" id="answerf1" class="lietruth yes" >Yes</button><button type="button" name="no30" id="answer1" class="lietruth no" >No</button>
<div id="questions">Question4</div>
</div>
</div>
<div id="Submit-answer" display: inline-block;"><button type="submit">Next</button>
</div>
Use type="submit" You could set your submit buttons like this:
<button type="submit" name="id1" value="value">Submit1</button>
<button type="submit" name="id2" value="value">Submit2</button>...
Then you can catch it with $_GET['id'].
Here is what I did. Added a hidden div and change that value using javascript functions changeValue1(val) and changeValue2(val).
<div id="Answertoggle18">
<div id="questions-box"><input type="hidden" name="question18" value="Question3"><input type="hidden" name="key" value="25"><input type="hidden" name="user" value="truthsandlie"><button type="button" name="yes25" onclick="changeValue1('no25')" id="answerf1" class="lietruth yes" >Yes</button><button type="button" name="no25" onclick="changeValue2('no25')" id="answer1" class="lietruth no" >No</button>
<input type="hidden" name="no25" id="no25" value="none">
<div id="questions">Question3</div>
</div>
</div>
<script type="text/javascript">
<!--
function changeValue1(val) {
var b = val;
document.getElementById(b).value = "yes";
}
function changeValue2(val) {
var b = val;
document.getElementById(b).value = "no";
}
//-->
</script>
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" placeholder="Enter Country" name="country" value="XXXXX" >
</div>
<div class="form-group">
<label for="social">Social media</label>
<input type="text" class="form-control" id="linkedin" placeholder="Enter url" value="http:\\www.google.co.in" name="url">
</div>
<button type="reset" class="btn btn-primary" name="reset" onclick="resetform(form); return false;">Clear</button>
you can use jQuery to clear all input from form/div tag like
$('.form-group').find('input:text').val('');
Just the reset button should do the magic:
<input type="reset" value="Clear">
Update 1:
<button type="reset" class="btn btn-primary" name="reset">Clear</button>
I created this form with bootstrap 3:
<form role="form" method="get" target="_self" action="checkplayer.php">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search player" name="player">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="submit">Search</button>
</span>
</div><br>
<div class="btn-group">
<button name="region" type="button" class="btn btn-primary" value="NA" autofocus="true">NA</button>
<button name="region" type="button" class="btn btn-primary" value="EUW">EUW</button>
<button name="region" type="button" class="btn btn-primary" value="EUNE">EUNE</button>
<button name="region" type="button" class="btn btn-primary" value="BR">BR</button>
<button name="region" type="button" class="btn btn-primary" value="TR">TR</button>
<button name="region" type="button" class="btn btn-primary" value="RU">RU</button>
<button name="region" type="button" class="btn btn-primary" value="LAN">LAN</button>
</div>
</form>
Im using the button group, because it looks better then a dropdwon menue or just checkboxes.
I tried to send the btn-group value by the _get methode but it does not work.
So how can in submit the value with my _get methode to my PHP file?
Thank you for helping
I found a solution
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" id="NA" name="region" value="NA" autofocus="true"/> NA
</label>
<label class="btn btn-primary">
<input type="radio" id="EUW" name="region" value="EUW" /> EUW
</label>
<label class="btn btn-primary">
<input type="radio" id="EUNE" name="region" value="EUNE" /> EUNE
</label>
<label class="btn btn-primary">
<input type="radio" id="BR" name="region" value="BR" /> BR
</label>
<label class="btn btn-primary">
<input type="radio" id="TR" name="region" value="TR" /> TR
</label>
<label class="btn btn-primary">
<input type="radio" id="RU" name="region" value="RU" /> RU
</label>
<label class="btn btn-primary">
<input type="radio" id="LAN" name="region" value="LAN" /> LAN
</label>
<label class="btn btn-primary">
<input type="radio" id="LAS" name="region" value="LAS" /> LAS
</label>
<label class="btn btn-primary">
<input type="radio" id="OCE" name="region" value="OCE" /> OCE
</label>
</div>
These buttons inside 'btn-group' div, aren't doing anything useful, apart from just displaying some buttons on the screen. They are not aware of any 'selected' property (in order for the selected value to be submitted).
Buttons are not meant to act like radio buttons, checkboxes etc. Their purpose is to perform an action when they are clicked.
So what i recomend is to forget about button group and just add checkboxes. If you are concerned about the styling, just add this very useful library (http://icheck.fronteed.com/). I think line skin will be great for you.
If you really want these buttons, you should write some js code (preferably jquery) and on the click event, store the selected value(s) in a hidden input that will get submitted. See here: Change a hidden input's value with jquery/javascript
I have a bootstrap form with 3 radio buttons. I am saving the value into a variable so that I can use to save into database and email.
HTML:
<form class="form-horizontal form-validate" id="signup-form" method="post">
<input type="hidden" name="signupForm" />
<div class="control-group">
<label class="control-label">Seed program</label>
<div class="controls">
<input type="radio" name="signup" value="Seed Program" checked="checked"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Gift Wrap Program</label>
<div class="controls">
<input type="radio" name="signup" value="Gift Wrap" />
</div>
</div>
<div class="control-group">
<label class="control-label">Sign up for both</label>
<div class="controls">
<input type="radio" name="signup" value="Both" />
</div>
</div>
<input type="submit" class="btn btn-large btn-block btn-success" value="Submit" name="submit">
</form>
PHP:
if(isset($_POST['signupForm'])){
if(isset($_POST['signup'])) {
$signup = $_POST["signup"];
}
else{
$signup = "Nothing was selected";
}
}
The Problem:
The Problem is that I can only get the value of the first radio button which has the "checked" attribute. If I select any of the other two, I wont get anything and the value shows empty.
Any help is appreciated.
Thanks,
try using
<input type="radio" name="signup" value="Seed Program" checked />
and not
<input type="radio" name="signup" value="Seed Program" checked="checked"/>