I am working on a project that includes an search function , currently the search works fine for that i am using an dropdown and select the value .
this is code that i am using with dropdown
<div class="form-group form-group-lg form-group-icon-left search"><i class="fa fa-plane input-icon"></i>
<label>Select an option</label>
<select class="typeahead form-control" name="search">
<?php foreach($search_des as $sd) { ?>
<option value="<?php echo $sd->des_category_id;?>">
<?php echo $sd->des_category_name;?></option>
<?php } ?>
</select>
<br>
</div>
Now as per our client requirement they need to display all the items with a radio button and also they want to submit the page by clicking on the radio
. I tried to use radio button it doesnot works properly.
This is the code that ia am using with radio button.
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
while using this all items are listing correctly but all the radio buttons are checked, also i dont know how to auto submit a form using a radio button.
You'll need to use Javascript to trigger submitting the form on click.
Add an event listener to the radio button being clicked, and then trigger the form to submit when that event happens.
Something like this should work, just change the IDs accordingly.
var form = document.getElementById("form-id");
document.getElementById("radio-id").addEventListener("click", function () {
form.submit();
});
You did not give the
name
attribute
to input
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input name="search" class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio"><?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
Ok, so there are multiple things to be addressed in this question.
First, as mentioned above, you need to add the name tag to your radio button.
Secondly, you need to use JavaScript to submit the form on the click event of radio button. To get the click event set up, add the class at your radio button.
Posting the answer here with the link to my Codepen.
Code
<form name="theForm">
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control radioClass" value="<?php echo $sd->des_category_id;?>" type="radio" name="category">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
</form>
JS
var classname = document.getElementsByClassName("radioClass"); // The radio button class we've added
var myFunction = function() {
document.theForm.submit(); //theForm is the name of the form.
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false); //Adding listener to the click event.
}
You can play with the code (of course PHP script has been replaced with the dummy data) at this link: https://codepen.io/akshit_ij/pen/KydVXz
Let me know if it helps.
Related
I am having trouble passing a value
when pressing this button(the code for the button down below).
<div class="timeline-footer">
<button class="btn btn-primary btn-xs" name="onderreact_btn" type="submit">Reageer</button>
</div>
It needs to give a <form> a id from that reaction.
the code for the form to save it in the db. this works just fine but now it needs to give the id from the reaction when pressing the button to this form.
<?php
if(isset($_POST['react_btn'])){
unset($q1);
$q1['reactie'] = $app->check_string($_POST['reactie']);
$q1['topic_id'] = $app->check_string($_POST['topicid']);
$q1['klant_id'] = $app->check_string($_POST['klantid']);
$q1['ledenpagina_id'] = $app->check_string($_POST['ledenpaginaid']);
$app->insert_query('reacties', $q1, 'id');
}
?>
<form action="" method="post">
<div class="form-group">
<label for="comment">Reactie:</label>
<textarea class="form-control" name="reactie" rows="3" id="comment"></textarea>
<input type="hidden" name="klantid" value="<?php echo $_SESSION["klant_id"] ?>">
<input type="hidden" name="topicid" value="<?php echo $actieftopicid ?>"
<input type="hidden" name="ledenpaginaid" value="<?php echo $_SESSION["ledenpagina_id"]; ?>">
<input type="hidden" name="onderreactieID" value="<?php echo $reactie; ?>">
<button type="submit" name="react_btn" class="btn btn-primary">Plaats reactie</button>
</div>
</form>
I think I need to make a hidden input where I post the reactionID in and make some kind of javascript variable with a default set to 0 and when pressing on a button it needs to give that value trough to this variable
If you just need a test, if the button was pressed, check if the button was submittd:
if (isset($_POST['react_btn')) {
// ...
}
But as the value of the button is it's text, you should also add an hidden field, storing your id.
Keep in mind, that you could also submit the form by pressing enter inside a textfield in the form - in this case, the button wasn't pressed!
I have been trying to make a custom form located on a separate page in my WordPress website. I ended up making a plugin that generates the form html and should post entered data in wp_usermeta. There are three radio button options, one of which is "other", that once clicked makes a textbox visible for alternative input.
The issue I have is that radio button values are not posted to wp_usermeta, only textbox input is (if entered).
Here is the html snippet for the form:
<form name="forming_the_team" method="POST" action="">
<div id="about">
A. Tell us about the team. <br/>
<input type="radio" name="team" value="club" onclick="otherCheck()" id="club"/>Club<br/>
<input type="radio" name="team" value="class" onclick="otherCheck()" id="class"/>Class<br/>
<input type="radio" name="team" value="other" id="other-radio" onclick="otherCheck()"/>Other</br>
<input type="text" name="team2" id="other-box"/><br/>
</div>
<br/>
<input type="submit" value="Submit"/><br/>
</form>
otherCheck() onclick attribute is a javascript function that makes a text box visible if "other" radio button is checked.
Here is one of the things I tried (among others) to update wp_usermeta:
<?php function handleDB() {
$user_id = get_current_user_id();?>
<script type="text/javascript">
if(document.getElementById('club').checked) {
<?php update_user_meta( $user_id, 'team', $_POST['team']);?>
}
if(document.getElementById('class').checked) {
<?php update_user_meta( $user_id, 'team', $_POST['team']);?>
}
if(document.getElementById('other-radio').checked) {
<?php update_user_meta( $user_id, 'team', $_POST['team2']);?>
}
</script>
<?php
}?>
I call handleDB() from the same page via shortcode:
function shortcodeDB() {
ob_start();
displayHTML();
handleDB();
return ob_get_clean();
}
add_shortcode('form_handle','shortcodeDB');
To summarize, text input gets posted successfully, while radio button values post NULL. What can I do to post radio button values as well.
Thank you in advance.
You can't mix client side code (javascript) and server side code (PHP) in the that way. The PHP is going to run no matter what in what you have posted. Here is a solution that should work using only PHP.
<?php function handleDB() {
$user_id = get_current_user_id();
if( 'other' == $_POST['team'] ){
update_user_meta( $user_id, 'team', $_POST['team2']);
}else{
update_user_meta( $user_id, 'team', $_POST['team']);
}
}
?>
If this doesn't work comment below and I will troubleshoot further but this should do the trick.
Here is my dilemma. A multi-select drop-down displays pre-selected options. When the user makes any changes, I'm running some code in the PHP action file (called through a submit button). I'm trying to accomplish this using a flag and updating the flag in the onchange event of "select option". The rest is working fine. I just wanted to execute the queries in action file only when the user changed selections in drop down rather than every time the form is submitted. However I'm unable to pass the flag successfully. I know I'm missing something basic and have spent two days looking at it. Any help is appreciated.
The relevant code is pasted below:
//Initialize flag
<?php
...
$multi_prog_change_flag = '0';
...
?>
//Hidden Form Element
<form action="update_u.php" method="post" id="cForm" name="cForm" onsubmit="return validateForm()" autocomplete="off">
...
<?php echo '<input type="hidden" id="email" value="'.$email.'"> ';?>
<?php echo '<input type="hidden" id="multiprogchangeflag" name="multiprogchangeflag" value="'.$multi_prog_change_flag.'"> ';?>
...
// Drop-down Element where update is triggered
<tr id="odd">
<td><select id="programName" name="programName[]" onchange="updateflag();>" multiple="multiple" size=10>
..
<option name="drop1" value ="<?php echo $data['Program_Id'] ?>" <?php if ($data[curr_prog] == '1') echo 'selected="selected"'; ?>> <?php echo $data['Program_Name'];?></option>
..
</select>
<input type="hidden" id="pNames" name="pNames" value="" />
</td>
</tr>
// Function to update flag
function updateflag() {
<document.getElementById("multiprogchangeflag").value = "1";
}
// update_u.php PHP Action File
$multi_prog_flag=mysql_real_escape_string($_POST['multiprogchangeflag']);
if ($multi_prog_flag == '1'){
$multi_prog_delete_query=mysql_query("UPDATE multi_prog_access SET is_act = '0', Updated_by = '$updatedby', update_timestamp = NOW() WHERE user_id = '$useid'");
$count = count($multi_prog_names);
for($i=0;$i<$count;$i++){
$multi_prog_ID=$multi_prog_names[$i];
$multi_prog_update_query=mysql_query("INSERT INTO multi_prog_access (user_id, Prog_id, created_by, is_act, Update_timestamp) VALUES ('$ids','$multi_prog_ID', '$updatedby', '1', NOW())");
}
}
I have a php page with 2 submit buttons and 2 radio buttons:
<?php
$choiceIdx = 1;
$language = 'English';
if($_GET)
{
if(isset( $_GET['choice'] ))
{
$choiceIdx = $_GET['choice'];
}
if(isset( $_GET['language'] ))
{
$language = $_GET['language'];
}
}
?>
<form method="get">
<button type='submit' name='choice' value='1'>Choice1</button>
<button type='submit' name='choice' value='2'>Choice2</button>
<input id="English" type="radio" name="language" value="English" <?php echo ($language=='English')?'checked':'' ?> onchange="this.form.submit();" />
<label for="English">English</label>
<input id="Slovenian" type="radio" name="language" value="Slovenian" <?php echo ($language=='Slovenian')?'checked':'' ?> onchange="this.form.submit();" />
<label for="Slovenian">Slovenian</label>
</form>
If I click on Slovenian radio button, I get:
http://localhost/index.php?language=Slovenian
If I then click on Choice2 submit button, "language" is saved and I get:
http://localhost/index.php?choice=2&language=Slovenian
If I then click on English radio button, "choice" is not saved and I get:
http://localhost/index.php?language=English
This is my first php page and after hours of googling i added this line:
<input type="hidden" name="choice" value="<?php echo $choiceIdx; ?>">
The "choice" is now saved, but i get:
http://localhost/index.php?choice=1&language=Slovenian&choice=2
I don't want it twice in url. Please explain what i am doing wrong. Thank you!
EDIT: I want to use GET (and not POST) because the URL has to be saved as a bookmark.
Here is an alternate version (as a followup to my first answer) that updates the hidden value when clicking the choice-button:
<script>
function setChoice(val) {
document.getElementById('hiddenChoice').value=val;
}
</script>
<form method="get">
<button type='submit' onClick="setChoice(1);">Choice1</button>
<button type='submit' onClick="setChoice(2);">Choice2</button>
<input type='hidden' id='hiddenChoice' name='choice' value='<?php echo $choiceIdx; ?>'>
<input id="English" type="radio" name="language" value="English" <?php echo ($language=='English')?'checked':'' ?> onchange="this.form.submit();" />
<label for="English">English</label>
<input id="Slovenian" type="radio" name="language" value="Slovenian" <?php echo ($language=='Slovenian')?'checked':'' ?> onchange="this.form.submit();" />
<label for="Slovenian">Slovenian</label>
</form>
If you have more values to retrieve you might want to create a more sofisticated and less specific js-function. You could easily pass in the id of the target input f.e.
Also you should rethink if it's realy neccessary to always submit the form, or if it might be better to first collect all the data and only send one form back to the server.
Add that to your form:
<input type='hidden' name='choiceStored' value='<?php echo $choiceIdx; ?>'>
This will store the last received val for choice and re-send it at the next form submit.
and change your php to:
$choiceIdx = 1;
$language = 'English';
if($_GET)
{
// eighter get new value
if(isset( $_GET['choice'] ))
{
$choiceIdx = $_GET['choice'];
// or if we don't have a new value, take the 'stored' one:
} elseif (isset($_GET['choiceStored']))
{
$choiceIdx = $_GET['choiceStored'];
}
if(isset( $_GET['language'] ))
{
$language = $_GET['language'];
}
}
You are passing the same name twice. 'choice' has been defined as both the hidden value name and the button value name. To be able to differentiate, you should change the hidden value name to something like 'savedchoice'. And reference it by that name
I have created an input fields populated by ids that I will use later to make a query in my database via javascript. Using foreach loop, the fields were populated correctly by their respective ids. Using javascript I want to be able to access this ids, however, using the onclick function that is based on their class name, the values for the first and second input fields are the only fields that returns the correct id value and the rest input field values were taken from the second input field having the id value of 2 instead of returning the right id value. What is the wrong with this? How could I retrieve right id values from this input fields? Thanks a lot. Here is my code
View:
<?php
foreach($data_currencies as $row){
?>
<div class="row-fluid">
<div class="span2"><input type='checkbox' class="currency_check_box" id='chk' name='currency_id[]' value="<?php echo $row->id; ?>" /></div>
<div class="span4" style="text-color:black;"><?php echo anchor("currencies/edit_currency/$row->id/$tennant_id",$row->pretty_name);?></div>
<div class="span4" style="text-color:black;"><?php echo $row->currency_code;?></div>
<div class="btn-group span1" id="condition" data-toggle="buttons-radio" >
<?php if($row->status==1) { ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn active first" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn passive" id="disable"/>
<?php }
else{ ?>
<input type="text" value="<?php echo $row->id; ?>" class="btn off" id="enable"/>
<input type="text" value="<?php echo $row->id; ?>" class="btn active on" id="disable"/>
<?php } ?>
</div>
</div>
</address>
<address>
<?php
}
?>
Javascript
<script type="text/javascript">
$(".first").click(function(){
alert($(".first").val());
});
$(".passive ").click(function(){
alert($(".passive").val());
});
$(".off").click(function(){
alert($(".off").val());
});
$(".on ").click(function(){
alert($(".on").val());
});
</script>
Output:
Clicking the input field with id value 1
Clicking the input field with id value 2
Clicking the remaining input fields gives the same outputs
The problem is that you need to use the this keyword in your js. Otherwise you will just be getting the element with the first occurence of that class. Also considering all of your input fields have the 'btn' class why don't you change your js to
$(".btn").click(function(){
//Use 'this' to get the value of the element you clicked on
alert($(this).val());
});
Note You are looping through your rows in your PHP code but each time giving the elements the same id (id="enable" and id="disabled"). This will cause multiple elements to have the same id, which will invalidate your HTML and could cause you problems later on.
Try this
$(".first").click(function(){
alert($(this).val());
});
$(".passive ").click(function(){
alert($(this).val());
});
$(".off").click(function(){
alert($(this).val());
});
$(".on ").click(function(){
alert($(this).val());
});