How do I access the value of the link button outside the form and pass it into the form via post met-CodePudding

This are the two options. I want to select one of the button link and have to get the value via post method when I submit the form Please, how do I go about it? To catch the value of the link having a data-value for rent if it is clicked and vice versa for the data-value having for-sale, and then when I click on the submit button, I want to catch that value and relate it to the search button.

 <div >
                <input  type="hidden" name="status" value="for-sale" data-default-value="">
                <ul >
                    <li  role="presentation">
                        <a 
                            data-toggle="pill" data-value="for-sale" href="#" role="tab" aria-selected="true" form="message">
                            sale
                        </a>
                    </li>
                    <li  role="presentation">
                        <a 
                            data-toggle="pill" data-value="for-rent" href="#" role="tab" aria-selected="false" form="message">
                            rent
                        </a>
                    </li>
                </ul>
                <form action="" method="post" id="message" >
                    <div >
                        <i ></i>
                        <input type="text"
                            
                            placeholder="Enter an address, neighborhood" name="search">
                    </div>
                    <button type="submit" name="submit"  >
                        Search
                    </button>
                </form>
            </div>

CodePudding user response：

Make your button an input type button and submit the form with jQuery Ajax call

<input type="button" id="submitButton" name="submit"   value="Search" />

And in your javascript code,

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         // ... do something with the response from the server
       },
       'JSON' // I expect a JSON response
    );
});

$('input#submitButton').click( function() {
    $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // ... do something with the data...
                 }
    });
});

In the data field in the ajax call, you can add the value of the link having a data-value attribute using $(element).attr('data-value')