We Keep Coding

Issue with javascript retrieve form data for url

I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}

Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.

Textbox values are cleared after function ends (Issue): JQuery

I have below code to set fullName value, logic works but after it sets the value all the textbox values are cleared. I need overcome this issue.
<script>
$(document).ready(function() {
$('#check').click(function() {
if ( $('#city').val() == '' )
{
alert('Empty!!!');
}
else
{
$('#fullName').val("hi");
}
});
});
</script>
<form name="form1" method="post" action="">
City: <input type="text" name="city" id="city"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
Full name: <input type="text" name="fullName" id="fullName"><br>
Phone number: <input type="text" name="Last" value="Mouse"><br>
<button id="check">Check</button>
</form>

By default a button within a form but with no type is a submit button. My guess is you are actually submitting the form when you click the button, and the inputs are 'cleared' because a new page is loading.
Try adding type="button" to your button.
<button id="check" type="button">Check</button>

Use PreventDefault() to cancel postback, becouse your button does not have type so HTML put the default behavior like submit, try:
$('#check').click(function(e) {
e.preventDefault();
if ( $('#city').val() == '' )
{
alert('Empty!!!');
}
else
{
$('#fullName').val("hi");
}
});
LIVE DEMO

How to delay form submit?

I have a form that once the user clicks the Submit button - it runs 2 functions - (1) it pops up with a div that says 'Item added successfully to basket' then (2) a prefill function that sends the selected options to a Mals-E cart.
It works, but what i need to do is not let the form submit until the popup has shown for around 5 seconds - currently it flashes for a split second as the form is submitted immediately with the prefill function.
Can anyone help with this please?
Script Below:
function showDiv(f) {
document.getElementById('basket-center').style.display='block';
}
function prefill(f) {
var val = document.forms["basket"].elements["product[2]"].value;
val = val + gettext(document.forms["form"].elements['users']);
document.forms["basket"].elements["product[2]"].value = val;
document.forms["basket"].elements["price"].value = document.forms["form"].elements['sum'].value;
return false;
}
Form Script Here:
<form id="basket" name="basket" action="http://ww8.aitsafe.com/cf/add.cfm" method="post" onsubmit="showDiv(); prefill();">
<input name="userid" type="hidden" value="A1251773"/>
<input type="hidden" name="nocart"/>
<input name="product[]" type="hidden" value="{b}Sage 50 Accounts (The VAT Edition) 2014{/b}"/>
<input name="product[2]" type="hidden" value="{br}"/>
<input name="product[3]" type="hidden" value="{br}FREE Installation onto 1 Server/PC & Same Day Download when ordered before 3pm"/>
<input name="price" type="hidden" value=""/>
<input name="noqty" type="hidden" value="1"/>
<input name="thumb" type="hidden" value="sage50-thumb.png"/>
<input name="return" type="hidden" value="http://10.10.0.195/reality-solutions-development/sage-50-accounts.php"/>
<input type="image" src="img/buynow-button-green.jpg" border="0" alt="Buy Now" style="float:right; margin-top:-24px"/>
</form>

Try this:
//html
<form id="my_form">
<button id="my_button">submit</button>
</form>
//javascript
var my_form = document.getElementById("my_form"), button = document.getElementById("my_button");
my_form.onsubmit = function() {
return false;
}
button.onclick = function() {
setTimeout(function() {
my_form.submit();
}, 5000);
return false;
}
Working jsfiddle: http://jsfiddle.net/njoqnwwf/

You could use Jquery for that
$(function() {
$('#form').delay(milliseconds).submit();
});

Remove unchanged input fields from Form while submit

In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.

I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted

jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});

Disable submit button and display message

id like to be able to disable the submit button when the form is submitted, also id like to add a message like ("this may take a while") when the form is submitted.
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this);">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
</p>
</form>

Modify your Validate() function to include disabling the submit button and showing the message:
function Validate(f) {
var isValid = true;
// do validation stuff
if (isValid) {
f.submitbutton.disabled = true;
document.getElementById("submitMessage").style.display = "block";
}
return isValid;
}
http://jsfiddle.net/gilly3/EjkSV/

Add a simple span or something to your HTML:
<span id="waitMessage" style="display: none;">This may take a while....</span>
Then on the click event, show that span and disable the button:
In pure javascript:
document.getElementById('submitbutton').addEventListener("click", function()
{
document.getElementById('submitbutton').disabled = true;
document.getElementById('waitMessage').style.display = 'visible';
}, false);
In jQuery:
$('#submitButton').click(function()
{
this.disabled = true;
$('#waitMessage').show();
});

First, if you're doing a traditional postback adding a message isn't much use - the browser's going to post and reload the page anyways. (unless of course the postback is so long the browser just spins forever...) but anyways... If you don't mind using jquery,
<input type="submit" id="submitbutton"/>
<span style="display:none">This may take a while...</span>
$("#submitbutton").click(function () {
$(this).next().show();
$(this).attr("disabled","disabled");
});

It is not advisable to disable a submit button onclick since that could stop the submission.
I suggest instead something like this
function Validate(theForm) {
if (.....) {
.
.
.
return false; // stop submission
}
// here we are happy
document.getElementById("submitbutton").style.display="none";
document.getElementById("pleaseWait").style.display="";
return true;
}
<form id="myform" method="post" action="default.asp" onsubmit="return Validate(this)">
<p>Select credit card:
<select tabindex="11" id="CardType">
<option value="AmEx">American Express</option>
<option value="CarteBlanche">Carte Blanche</option>
</select>
</p>
<p>Enter number:
<input type="text" id="CardNumber" maxlength="24" size="24" value="1234" />
<input type="submit" id="submitbutton" />
<span id="pleaseWait" style="display:none">Please wait...</span>
</p>
</form>