We Keep Coding

Why is my search query returning undefined, while my page populates with the term's results? Using business catalyst

I'm trying to get the search term to appear in the URL. What am I doing wrong?
<form name="catsearchform74255" method="post" onsubmit="processSearch(this)" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="input-field search-box">
<input id="CAT_Search" type="search" name="CAT_Search" placeholder="What are you looking for?" class="white" required="true">
<label class="label-icon" for="CAT_Search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
<script type="text/javascript">
function processSearch(form) {
form.action = form.action + CAT_Search.value;
}
</script>
</form>

Change method="post" to method="get".
Update any server-side code referencing post variables to reference get variables. For example, in PHP code, change $_POST["CAT_Search"] to $_GET["CAT_Search"].
Also, the correct format for the required HTML attribute is either required="" or required="required.

Code
This can be done with JS, you can't edit the method as Business Catalyst expects a post for this form.
If you change the form to the following:
<form name="catsearchform74255" id="searchForm" method="post" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="search-box">
<input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search">
<input id="submitForm" onclick="submitFormScript()" type="button" class="cat_button" value="Search">
</div>
</form>
and then add the following jQuery:
function submitFormScript() {
var searchAction = $("#searchForm").attr("action");
searchAction = searchAction + $("#CAT_Search").val();
$("#searchForm").attr("action", searchAction);
$("#searchForm").submit();
}
Explanation
By adding the ID's to the fields on the form and then taking type="submit" off the input button we can edit the form action before we submit the form.
In the JS we are getting the form action, adding on the value of the search box (users input) and then setting that back to the form action attribute. After that we have the URL that we want to send to the next page so we can then submit the form.

How to submit 2 Forms w/ 1 Submit using Javascript? 1 Form uses "GET" & other uses "POST"

How can I submit 2 forms that are on the same page if 1 Form uses "GET" method & the other uses the "POST". Each form has the same action and goes to the same next page. Need Help. Thanks for everyones help.
How could i get these 2 forms below that use different methods submitted with one button?
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">
<form method="GET" id="Form2" action="nextppage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">

One way you can do this is add a hidden field to each form. For example,
<form action="action.php" method="get">
<input type="hidden" name="id" value="form1">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<form action="action.php" method="post">
<input type="hidden" name="id" value="form2">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
And in your script you just do a check to see what the value of id is. Another way is to check if the request sent to the server was a post or get.

Use AJAX recursively or collect all datas into one form and submit that one.
A simple form-submit will redirects your page at the first instance and the data from the second will be lost. If you can fully control the server-side, then you can submit only the form with POST data (form2 in my example) and you can apply the GET to the action attribute before submitting it.
I mean:
<form name="form1" id="form1" action="index.php" method="GET">
<input type="text" name="foo" value="bar" />
<input type="submit" value="Submit" />
</form>
<form name="form2" id="form2" action="index.php" method="POST">
<input type="text" name="foo" value="bar" />
</form>
<script type="text/javascript">
var f = document.getElementById('form1');
f.onsubmit = function() {
var t = f.getElementsByTagName('input'),
l = t.length,
i = 0,
r = [];
for (i = 0; i < l; i++) {
if (!t[i].name) continue;
r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
}
var p = document.getElementById('form2');
if (r.length) p.action += '?' + r.join('&');
p.submit();
return false;
}
</script>
But AJAX is a better and more elegant solution which is extendable easily when needed with new functionality, so i take my vote to the asynchronous way of this.

It doesn;t really make sense to use two forms with a single button, nor is it valid html.

I would, submit using your POST form, POST to the page, but instead of posting to the page nextpage.html, post to a page like "nextpage.html?var1=value&var2=value"
you would use javascript in the way of:
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>
<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>
<script>
function push() {
document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
document.getElementById('Form1').submit();
}
</script>
This should work, although messy, and beware of someone putting a ?, &, =, or otherwise non-alphanumeric character into anything you're going to send to the URL bar. The GET and POST variables would be sent to the page.

You should learn a bit about how HTTP works. The browser does a "request" which is normally either GET or POST, and the response body is parsed as HTML and shown in the web browser.
Posting two forms at the same time doesn't make any sense because that kicks off two HTTP requests. Which one should be used as the new location in the browser?

Mutliple forms on a page with each one being able to submit

How is it possible to have multiple forms on a page with each one being able to submit itself.
When i have it set up like this, the first forms submits, but the 2nd does not work. Any suggestions on how to make it work? (I will have many forms like this on 1 page)
thanks
<form action="/order-form2.php" method="post">
<input type="hidden" name="phoneType" value="iPhone 2g - 4GB//ATT">
<input type="hidden" name="price" value="75">
<div class="prodSize">4 GB</div>
</form>
<form action="/order-form2.php">
<input type="hidden" name="phone" value="iPhone 2g - 8GB//ATT">
<input type="hidden" name="price" value="25">
<div class="prodSize">8 GB</div>
</form>

use this for 2nd form it will work. as default method is set to get if it has no method.
<form action="/order-form2.php" method="post">

first form is set method to post, second has not, if you're catching with POST then it's empty, set the method to post or catch with GET, if it's not set method, default is GET

Please use the following
<form name='form1' id='form1' method='POST' action='/order-form1.php'>
<a href="#" onclick='return document.forms.form1.submit();'>4 GB</a>
</form>
Note the id and name attributes assigned to form, use that in javascript

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.

You should do the getcitybyzip and getstatebyzip in the form onSubmit.

Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.

you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>

If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>