Dynamic Search Parameters Based On Dropdown Selection - javascript

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>

Related

Create form after index.php&value=1

Hello I have this form code as shown below
<td>
<form action="pay/index.php">
<input type="submit" class="btn btn-primary">
<input type="hidden" value="1.00" name="amount">
</form>
</td>
The result is index.php?amount=1.00, I want to create
index.php?amount=1.00&value=1
How should I add &value=1 after it?
When you use method="GET", which is the default, all the named inputs become URL parameters. So you just need to add another hidden input with the name value.
<form action="pay/index.php">
<input type="submit" class="btn btn-primary">
<input type="hidden" value="1.00" name="amount">
<input type="hidden" value="1" name="value">
</form>

How do I align a search bar and search button in HTML?

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>

DOM changes with javascript aren't working

I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>

Form does not shows on clicking using JS

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/

jquery on submit form search for its corresponding div and hide form

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.

Categories

Resources