How can I pass with form what is selected from dropdown field? So that url goes to ?s=sdf&tag=bookor ?s=sdf&tag=newspaper in this example
http://codepen.io/filaret/pen/yazXKQ
I couldn't create my design goal with <select><option>... inside input element so I used Bootstrap dropdown with .input-group-btn.
<form action="<?php echo esc_url( home_url( '/' ) ); ?>">
<div class="input-group">
<input type="text">
// SELECT OPTIONS
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-book"></i></a></button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i></li>
<li><i class="fa fa-newspaper-o"></i></li>
</ul>
</div>
// SUBMIT BUTTON
<div class="input-group-btn">
<button type="submit" class="btn btn-default" data-toggle="dropdown">Submit</button>
</div>
</div>
</form>
I managed to make it work with this
<input id="search-hidden" type="hidden" value="">
$selectWrapper.find(".dropdown-menu li").click(function() {
var $selectedIcon = $(this).find('.fa');
$selectWrapper.find("#search-hidden").val( $selectedIcon.data('value') );
});
Related
I have a simple form in which a user can fill the form and can add multiple input fields as he/she wishes,
Here is HTML
<form id="paramsForms">
{{csrf_field()}}
<div class="modal-body">
<dvi class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-12 animated bounceInDown myForm" id="multiple-container">
<div class="card-header">
<h4>Bidders Information</h4>
</div>
<div class="card-body" id="add_info">
<div id="dynamic_container">
<small id="bidder">Bidder 1</small>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="Bidders Name" name="bidders_name[]" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
</div>
<input type="text" placeholder="atribute name" name="params_name[]" id="field1" class="form-control"/>
<input type="number" placeholder="atribute value" name="params_value[]" id="field2" class="form-control"/>
<a class="btn btn-secondary btn-sm moreinput_field" id="add_more_input">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
</div>
<div class="card-footer" id="card-footer">
<a class="btn btn-success btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
<!-- <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button> -->
</div>
</div>
</div>
</dvi>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
Here is js to save the form
$("#paramsForms").on('submit', function(e){
e.preventDefault();
$.ajax({
type:"POST",
url: "/parameters",
data: $("#paramsForms").serialize(),
success: function(response){
console.log(response)
alert('data saved');
},
error: function(error){
console.log(error)
alert('Data not saved');
}
})
})
Here is controller store function
public function store(Request $request)
{
$parameters = new Parameter;
$parameters->params_name = $request->input('params_name');
$parameters->params_value = $request->input('params_name');
$parameters->bidders_name = $request->input('bidders_name');
// dd($parameters);
$parameters->save();
}
The dd($parameters) in-store function gives the following.
So when I remove dd($parameters) and click submit button I get the following error on console (network).
message: "Argument 1 passed to Illuminate\Database\Grammar::parameterize() must be of the type array, string given, called in C:\xampp\htdocs\roayalad-blog\vendor\laravel\framework\src\Illuminate\Database\Query\Grammars\Grammar.php on line 869
What is wrong with my codes?
The issue is that you are sending params_name and params_name as an array but controller as handling as strings. Make this change in controller:
public function store(Request $request)
{
$parameters = new Parameter;
$record_count = count($request->input('params_name'));
for($i=0; $i<$record_count; $i++) {
$parameters->params_name = $request->input('params_name')[$i];
$parameters->params_value = $request->input('params_name')[$i];
$parameters->bidders_name = $request->input('bidders_name')[$i];
$parameters->save();
}
}
Above code will execute one query each record. You can also do bulk insertion. This is the link.
Try just
$request->params_name[$i]
Instead of
$request->input(“params_name”)[$i]
I have a set of form fields in PHP. I also added jQuery functionality to clone some fields and add them to the form. However, after I submit the form only the original fields are submitted and not the ones added though cloning.
PHP
<form id="myForm" method="post" action"...">
<div class="row contRow">
<div class="col-md-5">
<input type="text" id="contactInputName['.$i.']" name="name['.$i.']" value="'.$output['0'].'" class="form-control" placeholder="Name">
</div>
<div class="col-md-6">
<input type="text" id="contactInputEmail['.$i.']" name="email['.$i.']" value="'.trim($output['1']).'" class="emlVal form-control">
</div>
<div class="col-md-1 text-right">
<span class="btn btn-default rmContact"><i class="fas fa-times fa-fw fa-lg text-danger"></i></span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span id="saveContacts" class="btn btn-success"><i class="fas fa-check fa-fw fa-lg"></i> Save Contacts</span>
<span id="addRow" class="btn btn-default"><i class="fas fa-plus-circle fa-fw fa-lg"></i> Add More</span>
</div>
</div>
</form>
JS
$(document).on("click", "#addRow", function() {
var lastRow = $("#addContactsForm").find(".contRow").last();
lastRow.clone().insertAfter(lastRow);
lastRow.find("input").val("");
});
$(document).on("click", "#saveContacts", function() {
$(this).closest("form").submit();
});
What am I missing?
I would remove id="contactInputName['.$i.']" and id="contactInputEmail['.$i.']" because I don't see the need to set these attributes.
If you set name attributes with empty keys, incremented keys will be generated for you. E.g.
name="name[]"
and
name="email[]"
This should eliminate the issue with copied indexes while cloning.
i have following div in project. after clicking on "request for demo" button , it will redirect to next window to registration form (link is mentioned in javascript function). i want to save relevant div id in database after clicking on button and save register.
following is my html and javascript
<div class="row">
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Supermarkets, Fruits & Vegetables</b></span>
<hr>
<p>Uninterrupted fast billing, inventory control, CRM & Loyalty programs makes your shoppers happier</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<!--<button type="button" onclick="openWin()" class="btn btn-default" id="demo-btn" data-toggle="modal" data-target="#demoModal">Request for Demo</button>-->
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Grocery & Departmental Stores</b></span>
<hr>
<p>POS for grocery, departmental store, hypermarket and convenience store with GSmartPOS</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Grocery and Departmental Stores" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Pharmacy, Medical Shop POS</b></span>
<hr>
<p>Prefilled drug index, update stock position and bill from Day One. Manage batches and expiry with ease</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Pharmacy Medical Shop POS" >Request for Demo</button>
</div>
<br>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Apparel & Footwear</b></span>
<hr>
<p>POS Features like matrix-inventory, non-moving stock analysis, can help keep inventory latest and fashionable</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Apparel and Footwear" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Electrical & Electronics POS</b></span>
<hr>
<p>Perfect solution to manage serialized inventory for mobile, computer electrical and electronics shops</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Electrical and Electronics POS" >Request for Demo</button>
</div>
<div class="col-md-4 col-sm-6 pos-vertical">
<span><b>Fashion Jewellery Shop</b></span>
<hr>
<p>An integrated, modular & scalable POS for furniture, glass & crockeries, opticals, music, toys & baby shop retail</p>
<button type="button" class="btn btn-default" id="dwmld-btn">Free Download</button>
<button type="button" onclick="openWin()" class="modalBtn btn btn-default" id="Fashion Jewellery Shop" >Request for Demo</button>
</div>
</div>
following function is called on each div button,
<script>
function openWin() {
window.open("register.php");
}
</script>
after clicking on each div button following form will be open in new window,
<div class="register">
<div class="container">
<div class="row main">
<div class="main-register main-center">
<form class="" method="post" id="contact-form">
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon" id="register-icon"><i class="fa fa-phone fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="contact_no" placeholder="Enter your contact number"/>
</div>
</div>
</div>
<input type="hidden" id="requestType">
<div class="form-group ">
<button class="btn btn-primary btn-lg btn-block register-button submit">Register</a>
</div>
</form>
<span class="success" style="display:none">Thank You for Register with us.</span>
</div>
</div>
</div>
</div>
form will be save using ajax and php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".modalBtn").click(function(){
var formName = $(this).attr("id");
$('#requestType').val(formName);
$('.success').hide();
$('.error').hide();
$('#contact-form').show();
$("#demoModal").modal();
});
$(".submit").click(function() {
var name = $("#name").val();
var requestType = $('#requestType').val();
var contact_no = $("#contact_no").val();
var email = $("#email").val();
//alert(requestType);
var dataString = 'name='+ name + '&contact_no=' + contact_no + '&email=' + email+ '&requestType=' + requestType;
if(name=='' || contact_no=='' || email=='')
{
$('.success').fadeOut(200).hide();
$('.error').show();
}
else
{
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$('#contact-form').hide();
}
});
}
return false;
});
});
</script>
Php code to insert data is,
<?php
require('connection.php');
if($_POST) {
$id = $_POST['regid'];
$name = $_POST['name'];
$contact_no = $_POST['contact_no'];
$email = $_POST['email'];
$requestType = $_POST['requestType'];
if ($id == '') {
$sql = "INSERT INTO registration(name,contact_no,email,requestType) VALUES ".
"('".$name."', '".$contact_no."', '".$email."','".$requestType."')";
}
$query_result = mysql_query( $sql );
if(!$query_result ) {
echo 'Could not enter data: ' . mysql_error();
} else {
//header("Location: lead-view.php?s=Y");
$successMsg = 'Record instered successfully';
}
}
?>
i want save those div id as in url after submitting form of relevant dive click button. url will be save in "requestType" field in database. please help.
You can make use of sessionStorage for passing the requestType value.
https://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/
While calling openWin() pass the div value to it. For example:
<button type="button" onclick="openWin('abc')" class="modalBtn btn btn-default" id="Supermarkets, Fruits and Vegetables" >Request for Demo</button>
Then save this value in sessionStorage as follows:
function openWin(div_value) {
sessionStorage.setItem("registerType", div_value);
window.open("register.php");
}
You can retrieve this variable in register.php:
var registerType = sessionStorage.getItem("registerType");
Add this value to the hidden input control in register form and save it to database.
<input type="hidden" id="requestType">
<script type="text/javascript">
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" ); // this working perfect
$(this).next().find('.remove_text').removeAttr( "readonly" ); // this is not working
});
</script>
<?php foreach ($faq as $faq): ?>
<div class="form-group">
<label class="col-sm-2 control-label">Question : </label>
<div class="col-sm-8">
<input type="text" id="question" class="form-control remove_att" value="<?php echo $faq['faq_question'] ?>" placeholder="Enter the question" readonly="readonly" required="">
</div>
<div class="col-sm-2" class="edit_all">
<button type="button" class="btn btn-warning btn-sm show_edit" data-toggle="tooltip" data-placement="bottom" title="Edit"><i class="fa fa-edit"></i></button>
<button type="button" id="<?php echo $faq['faq_id'] ?>" class="btn btn-success btn-sm edit_faq" data-toggle="tooltip" data-placement="bottom" title="Save" style="display: none"><i class="fa fa-floppy-o" ></i></button>
<button type="button" class="btn btn-danger btn-sm delete_faq" id="<?php echo $faq['faq_id'] ?>" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Answer : </label>
<div class="col-sm-8">
<textarea class="form-control remove_text" id="answer" rows="5" placeholder="Type your answer..." required="required" readonly ><?php echo $faq['faq_answer'] ?></textarea>
</div>
</div>
<?php endforeach; ?>
i'm doing inline edit using save and edit button with the help of jquery.
when i click on edit button input type="text" and textarea remove the readonly attribute. where input type="text" is working correctly,now i want to remove the readonly from textarea how to do this, any help would be appreciated
Your .show_edit button wrapped in 2 divs:
div.edit_all and div.form-group
And, your textarea is located in the next div.form-group,
So, try this:
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" );
$(this).closest('.form-group').next().find('.remove_text').removeAttr( "readonly" );
// ^find the closest div.form-group parent
});
You can find parent of .show_edit then again find its parent.
Your textarea is present in next div where we find .remove_text class for remove readonly
so try this :
<script type="text/javascript">
jQuery(document).ready(function(){
$('.show_edit').click(function() {
$(this).hide();
$(this).siblings('.edit_faq').show();
$(this).parent().prev().find('.remove_att').removeAttr( "readonly" );
$(this).parent().parent().next().find('.remove_text').removeAttr( "readonly" );
})
});
</script>
I have a dropdown search box and I want it so that when the user clicks "Check", it will go to http://example.com/check/UserInput. Is this possible to do with php/html?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-search"></i>
</a>
<ul class="dropdown-menu" style="padding:12px;">
<form class="form-inline">
<input type="text"
class="searchAddress2 form-control pull-left"
placeholder="Address">
<button type="submit"
class="searchAddress btn btn-default pull-right">Check</button>
</form>
</ul>
</li>
For example, the user clicks the search icon, the dropdown appears, they enter "alksndlkasn" in the input form, and they click check. They are now sent to http://example.com/check/alksndlkasn.
I tried this but it isn't working.
<form class="form-inline" action="https://example.com/check/text">
<input id="text"
type="text"
class="searchAddress2 form-control pull-left"
placeholder="Address">
<button type="submit"
class="searchAddress btn btn-default pull-right">Check</button>
</form>
well you can post user input and then if it is not empty go to a link with your prefix .
simple code
$add = !empty( $_POST['address']) ? $_POST['address'] : "--";
if($add !== "--" ) {
$go = "http://example.com/check/$add";
header("Location: $go");
}
This can be done with HTML itself.
There is an attribute named action for the form tag.
The action attribute specifies where to send the form-data when a form
is submitted.
As an example, see this link
Thus, For the submit button to redirect to a page, you should specify an action for the form tag
So, Replace your form as below
<form class="form-inline" action="your_file.php">
<input type="text" class="searchAddress2 form-control pull-left" placeholder="Address">
<button type="submit" class="searchAddress btn btn-default pull-right">Check</button>
</form>
where your_file.php is the page to which it has to be redirected.
Read more about HTML form in the docs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon glyphicon-search"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="padding:12px;">
<input type="text" class="searchAddress2 form-control pull-left" placeholder="Address" id="text">
<input type="hidden" name="url" id="url" value="http://example.com/check/">
<button type="submit" class="searchAddress btn btn-default pull-right"
onclick="window.location.replace($('#url').val()+$('#text').val())">Check</button>
</ul>
</div>
You dont need php to do that, look at this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon glyphicon-search"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="padding:12px;">
<input type="text" class="searchAddress2 form-control pull-left" placeholder="Address" id="text">
<input type="hidden" name="url" id="url" value="http://example.com/check/">
<button type="submit" class="searchAddress btn btn-default pull-right"
onclick="window.location.replace($('#url').val()+$('#text').val())">Check</button>
</ul>
</div>
I'm not sure exactly how you want it to look, but here is a simple example of a little HTML and Javascript that lets the user select something in a form and then redirects the user to the selection. Another let's the user type in something then click a button to be redirected.
It may not do exactly what you're describing, but the javascript demonstrates how to redirect a user based on a selection in a form. You can change the form controls as you like but the concept is still the same.
<HTML>
<HEAD>
<script language="javascript" type="text/javascript">
function changeFunc()
{
var tmp = document.getElementById("myList").value;
window.location = tmp;
}
function goFunc()
{
var tmp1 = "http://www.example.com/check/";
tmp1 += document.getElementById("myinput").value;
window.location = tmp1;
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select id='myList' onchange='changeFunc()'>
<option value="default">Default</option>
<option value="http://cnn.com">CNN</option>
<option value="http://www.foxnews.com">Fox News</option>
</select>
</form>
<form>
<input type="text" id="myinput"></input>
</form>
<button onclick="goFunc()">Go!</button>
</BODY>
</HTML>