I would like to align search button next to search bar but I don't know how to do it.
HTML :
<div id="tmsearch">
<span class="btn-toogle active"></span>
<form id="tmsearchbox" method="get">
<input type="hidden" name="controller" value="search"/>
<input type="hidden" name="orderby" value="position"/>
<input type="hidden" name="orderway" value="desc"/>
<input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
</form>
<button>Search</button>
</div>
JSFIDDLE ==> https://jsfiddle.net/bpr6qmjt/3/
Thanks
Use CSS style "display:inline"
<div id="tmsearch">
<span class="btn-toogle active"></span>
<form id="tmsearchbox" method="get" style="display:inline">
<input type="hidden" name="controller" value="search"/>
<input type="hidden" name="orderby" value="position"/>
<input type="hidden" name="orderway" value="desc"/>
<input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
</form>
<button style="display:inline">Search</button>
</div>
You can easy add style display:inline-block to the form element.
like this
<form id="tmsearchbox" method="get" style="display:inline-block">
or you can add it by id
form#tmsearchbox { display :inline-block }
You could set the style of the form in CSS:
#tmsearchbox {display:inline;}
Or embedded the style in the form tag:
<form id="tmsearchbox" method="get" style="display:inline;">
<form id="tmsearchbox" method="get">
<input type="hidden" name="controller" value="search">
<input type="hidden" name="orderby" value="position">
<input type="hidden" name="orderway" value="desc">
<input class="tm_search_query form-control" id="myinput" type="text" name="search_query" placeholder="What are you shopping for today ?" style="
float: left;
">
</form>
Related
Can someone help pull the value with "3355"?
<form action="http://www.ebest.cl/checkout/cart/add/uenc/aHR0cDovL3d3dy5lYmVzdC5jbC9hdWRpZm9ub3MtYWx0YS1maWRlbGlkYWQtaG91c2Utb2YtbWFybGV5LXJldm9sdXRpb24uaHRtbD9fX19TSUQ9VQ,,/product/3355/form_key/c2b66ca036853b1a/" method="post" id="product_addtocart_form">
<input name="form_key" type="hidden" value="c2b66ca036853b1a" />
<div class="no-display">
<input type="hidden" name="product" value="3355" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
Which getElementBy function would I use?
Thanks.
document.querySelector(".no-display > input[name=product]").value;
or more specific:
document.querySelector("#product_addtocart_form .no-display > input[name=product]").value;
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.
I have a form like so:
<form name="search" class="form-search" method="get" action="http://www.bernhardt.com/search.php?">
<div>
<input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
I would like it so that when Option1 is selected, the form's input be like this:
<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</div>
When Option2, like so:
<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="searchbynum" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<input type="hidden" name="searchbydesc" value="" />
<input type="hidden" name="Submit" value="Go" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
So no and so forth with other options. I do understand that a fair bit of Javascript is required here, but I don't know how (I know basic HTML and CSS, not so much Javascript). I would appreciate any help on this topic.
Take a look at document.createElement()
You should be able to do:
<script>
function addInputs() {
var input = document.createElement("input");
document.getElementById("frm").appendChild(input);
}
</script>
<form id="frm">
<select onchange="addInputs()" id="sel">
<option>Option 1</option>
</select>
</form>
I need to prepend a huge DIV block, which can be seen at the bottom of the question.
My current idea would be to put inside one
$('#content').prepend();
and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR
The code would be quite hard to maintain and read.
Is there a clever way to do this?
<form action="" method="post">
<input name="anchor" value="<TMPL_VAR ID>" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title" value="<TMPL_VAR TI>" type="text" /> </div>
<div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner" value="<TMPL_VAR OW>" type="text" /> </div>
<div class="cellData"> <input name="from" id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="<TMPL_VAR ID>_end_date" value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="<TMPL_VAR ID>_users" size="35" value="<TMPL_VAR US>" type="text" />
<label> Groups </label> <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
</span>
</div>
</div>
</form>
I would personally go for jQuery.tmpl() to handle this sort of issue.
This way you could specify a template like so:
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
<input name="anchor" value="${id}" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="${id}_title" value="${ti}" type="text" /> </div>
<div class="cellData"> <input name="owner" id="${id}_owner" value="${ow}" type="text" /> </div>
<div class="cellData"> <input name="from" id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="${id}_end_date" value="${ed}" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="${id}" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="${id}_users" size="35" value="${us}" type="text" />
<label> Groups </label> <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
</span>
</div>
</div>
</form>
</script>
and then with jQuery populate the template with
$('#template').tmpl(myData).appendTo('#myContainer')
which will insert the populated template into #myContainer given that you have data in the javascript scope myData wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer which is appendable.