bootstrap input field and dropdown button submit mail form

Question

I have the following problem. I have a form where I can choose from three options. The problem is that it does not send the selected option while the other sections Name, surname, etc. send. Below I am sending the code: thank you in advance

<div class="col-sm-4"> 
                  <div class="dropdown"> 
                    <button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
                      <span class="drp-name" data-bind="label">Choose</span> 
                      <span class="caret"></span> 
                    </button> 
                    <ul class="dropdown-menu" aria-labelledby="service-type"> 
                   <li><a href="#">x1</a></li> 
                      <li><a href="#">x2</a></li> 
                      <li><a href="#">x3</a></li>                      
                    </ul> 
                  </div> 
                </div>

php code:

<?php 
$to = '[email protected]'; 
$subject  = "Appointment Form"; 
$servicetype = stripslashes($_REQUEST['service-type']); 
$msg = ""; 
$msg .= "Service Type: ".$servicetype."\r\n\n";  // add sender's sources to the message 
$mail = @mail($to, $subject, $msg, "From:".$email); 

if($mail) { 
   header("Location:index.html");    
} else { 
   echo 'Message could not be sent!'; 
} 

?>

I also added JS but it still does't work

Dropdown Select
    $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
      var $target = $( event.currentTarget );
      $target.closest( '.dropdown' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );
      return false;
   });

If you want to use Bootstrap code for your dropdown list, you'll need to add some JavaScript to handle changes to the dropdown and a hidden form element to handle the 'service-type' value. (The Bootstrap dropdown isn't made to be a drop-in replacement for a select element. You need to add some JavaScript to handle when a user selects something.) — Jeffwa
– Jeffwa, Commented Jan 1, 2018 at 13:22
@Jeffwa I added JS (check my edit post) but it still does't work — emix09
– emix09, Commented Jan 1, 2018 at 13:34
HTML Form elements do not get transmitted on submit if they do not have a name attribute. Also, buttons do not get transmitted unless they are clicked. — Jeffwa
– Jeffwa, Commented Jan 1, 2018 at 13:36

Jeffwa · Accepted Answer · 2018-01-01 13:50:06Z

HTML:

<div class="col-sm-4">
    <div class="dropdown">
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span class="drp-name" data-bind="label">Rodzaj usługi</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="service-type">
            <li><a href="#">x1</a></li>
            <li><a href="#">x2</a></li>
            <li><a href="#">x3</a></li>
        </ul>
    </div>
    <input type='hidden' name='service-type'> <!-- ADD THIS -->
</div>

JavaScript:

$(document.body).on('click', '.dropdown-menu li', function(event) {
    event.preventDefault();

    var $target = $(event.currentTarget);

    $target.parents('.dropdown').sibling('[name=service-type]').val($target.text());

});

jasinth premkumar · Accepted Answer · 2018-01-01 13:50:31Z

0

you cant pass values to php without name attribute and form tag . you can directly set it with select tag

<form action="file.php" method=POST>
    <select name=option>
 <option value=0 selected>0</option>
 <option value=1> 1</option>
</select><input type=button value=submit>
</form>

answered Jan 1, 2018 at 13:50

jasinth premkumar

1,4111 gold badge13 silver badges23 bronze badges

Comments

Phil · Accepted Answer · 2018-01-01 14:02:04Z

Suppose the name of form is mail_form, and there is a hidden form element to hold the choice information with id service-type-holder and name service-type. Then the following code could be used with inline Javascript:

<form  name="mail_form" id="mail_form" action="" method="post">
<input type="hidden" name="service-type" id="service-type-holder">
<div class="col-sm-4"> 
        <div class="dropdown"> 
        <button class="btn btn-dropdown dropdown-toggle" type="button" id="service-type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
            <span class="drp-name" data-bind="label">Choose</span> 
            <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="service-type"> 
            <li onclick="$('#service-type-holder').val('x1'); $('#mail_form').submit()"><a href="#">x1</a></li> 
            <li onclick="$('#service-type-holder').val('x2'); $('#mail_form').submit()"><a href="#">x2</a></li> 
            <li onclick="$('#service-type-holder').val('x3'); $('#mail_form').submit()"><a href="#">x3</a></li>                      
        </ul> 
        </div> 
</div>

Collectives™ on Stack Overflow

bootstrap input field and dropdown button submit mail form

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related