Construct GET url from java script and submit - javascript

On click of search button in my form, i want to set some param to url and submit it.
Below is my javascript
function validateSubmitSearch(form) {
if(form.elements["iAccept"].checked == true) {
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.submit();
}
}
This javascript is returning url as
http://localhost:8080/Project/vendor/search?query=xxx&search_query=xxx&search=Search
Instead i need it as
http://localhost:8080/Project/vendor/search?query=xxx
How this can be done ?
EDIT:
I cannot remove form elements search_query and search
Here is HTML code
<form class="searchform" onSubmit="validateSubmitSearch(this)">
<input name="query" type="hidden" />
<input name="search_query" class="textbox" type="text" />
<input type="checkbox" id="iAccept" name="iAccept" value="I ACCEPT">
<input name="search" class="button" value="Search" type="submit" /></td>
</form>

When you submit a form with `method="GET", all the input fields in the form will be included as URL parameters. If you want some of them to be left out, you need to remove those inputs from the form.
function validateSubmitSearch(form){
if(form.elements["iAccept"].checked == true)
{
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.seach_query.parentNode.removeChild(form.search_query);
form.search.parentNode.removeChild(form.search);
form.submit();
}
}
}
Also, you should disable the default form submission by returning false from the onsubmit code.
<form class="searchform" onsubmit="validateSubmitSearch(this); return false;">

Related

Two button submit form issue

Hi successfully made a form where there are two submit buttons.
I needed two buttons because I need each button to take the form to a different place, while get/post the information in the first form.
This is how I did it
Javascript:
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" input name="pick" required value="<?php echo isset($_POST['pick']) ? $_POST['pick'] : ''; ?>"/>
</div>
<input type="button" onclick="submitForm('page2.php')" class="btn small color left" value="ADD ANOTHER STOP" />
<input type="button" onclick="submitForm('page3.php')" class="btn medium color right" value="Continue" />
</form>
It works, both buttons submits to the relevant pages.
But now there is one problem I can't seem to fix, previously if the form was not filled, and i clicked submit, it would ask me to fill up the required fields, now it does not anymore.
If required fields are not filled up, it still submits the form.
I need button 1 to not require required fields to be filled up, and button 2 to require it as button 2 submits the form, while button 1 brings it to a new form to fill up with other details before they submit from there.
Anyone know of a way I can sort this?
You can try this: <input type="text" name="pick" id="pick" required/> and in the javascript
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
if (document.getElementById('pick').value) {
form.submit();
}}
else{
alert('Please fill the required field!');}
You just need to use jquery to validate the form when the first button is clicked and you can use formaction attribute on the button to specify where the button should go when it's clicked.
$('document').ready(function(){
$('#btn1').on('click',function(){
var pick = $('input[type="text"][name="pick"]').val();
if(pick == ""){
alert("enter pick");
return false;
}else{
$(this).submit();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" >
<div class="f-row">
<label for="pick">Pick-Up Address</label>
<input type="text" name="pick" value="your value">
</div>
<button type="submit" formaction="page2.php" class="btn small color left" id="btn1">ADD ANOTHER STOP</button>
<button type="submit" formaction="page3.php" class="btn medium color right">Continue</button>
</form>
You could use jQuery for this.
if ($('#something').length)
This will check if there exist an element with the id 'something', but not if it is empty or which value it has.
To check this you can use:
if($('#something').val().length>0)
or
if($('#something').val() != "")
Do with it what ever is needed.
You could even add this check within your submitForm function just above the current code.
Try this:
<script>
function submitForm(action) {
var a = $("input[name=pick]").val();
if(a) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
} else {
alert('please fill the required field');
return false;
}
}
</script>
Using this way(simple way):--
<form id="myForm" name="myForm" onSubmit="encriptar_rc4();return false;">
<input type="submit" name="submitOne" value="submitOne" class="submitButton" />
<input type="submit" name="submitTwo" value="submitTwo" class="submitButton" />
</form>
<script>
$(function(){
$(".submitButton").click(function(e){
alert($(this).attr("name"));
});
encriptar_rc4();{
alert('hola');
}
});
</script>

Validate all form data before submitting

I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">

Clear textfield in a form after submit

I have the following form:
<form onsubmit="chat.sendMsg(); return false;">
<label for="msg" style="float:left">Message:</label>
<input type="text" id="msg" name="msg" autofocus="true" placeholder="Type Your Meassage Here" />
<input type="submit" />
</form>
and the JavaScript that goes with it:
//For sending message
this.sendMsg=function(){
msg=document.getElementById("msg").value;
chatZone.innerHTML+='<div class="chatmsg"><b>'+name+'</b>: '+msg+'<br/></div>';
oldata='<div class="chatmsg"><b>'+name+'</b>: '+msg+'<br/></div>';
this.ajaxSent();
return false;
};
All works, but when I submit the form, the text stays in the form. How to clear this textfield after I hit enter/click submit?
ps I dont use jquery
Use this: document.getElementById("msg").value = '';
this.sendMsg=function(){
msg=document.getElementById("msg").value;
chatZone.innerHTML+='<div class="chatmsg"><b>'+name+'</b>: '+msg+'<br/></div>';
oldata='<div class="chatmsg"><b>'+name+'</b>: '+msg+'<br/></div>';
this.ajaxSent();
document.getElementById("msg").value = '';//here
return false;
};
You could just add this
document.getElementById("msg").value='';
before the following statement:
return false;

Need help to redirect the form on submit

I need help. When I submit this form I want it to automatically redirect to the value option (which is url) in the select list.
So on pressing submit for Ahmedabad selected in select list it should redirect to http://intranet.guj.nic.in/passport
Currently it is not redirecting. What is the best way to do it using inline javascript code?
<html><body>
<form id="pass-form" >
<select id="pass-dropdown" ><option selected="selected">Select Passport Office
for Status page </option><option value="http://intranet.guj.nic.in/passport/">Ahemadabad
</option><option value="http://passportstatus.nic.in/passmain.php?city=asr">Amritsar
</option><option value="http://rpobangalore.gov.in/npassport.asp">Bangalore
</option><option value="http://passportstatus.nic.in/passmain.php?city=bly">Bareilly
</option></select>
<input type="submit" onsubmit="var sel = document.getElementById('pass-dropdown'); window.location = sel.options[sel.selectedIndex].value" />
</form>
</body>
</html>
onsubmit is an event of the <form> element and not of the submit button.
Change your form code to:
<form id="pass-form" onsubmit="window.location.href = 'newlocation'; return false;">
...
<input type="submit" value="Submit" />
</form>
In some cases you might have to use return to ensure the desired return value gets used:
<form onsubmit="return redirectMe();">
<input placeholder="Search" type="text">
</form>
... more code here ...
function redirectMe() {
window.location.replace("http://stackoverflow.com");
return false;
}
Source: How to pass an event object to a function in Javascript?
Change the type = "submit" to button
<input type="button" onclick="var sel = document.getElementById('pass-dropdown'); window.location = sel.options[sel.selectedIndex].value" />
Update
<input type="button" onclick="var sel = document.getElementById('pass-dropdown');
var frm = document.getElementById("pass-form"); frm.action = sel; frm.submit();" />
It would be better if you put that in a function and call the function instead
<form id="pass-form" onsubmit="var sel = document.getElementById('pass-dropdown'); window.location = sel.options[sel.selectedIndex].value" >
...
<input type="submit" />
</form>
You must do the submit attribute to the form tag. Then it should work.
http://www.w3schools.com/jsref/event_form_onsubmit.asp

Submit a form based on condition. Jquery

I have a form and a submit button. I would like to put a condition with jquery on this submit button. I wan't it to post the form only if the user enters a valid email adress.
HTML code :
<form method="post" action="{% url sportdub.views.login %}">
<input type="text" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
Javascript code :
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
What I want to do is to put a condition on my submit button:
if( !isValidEmailAddress( emailaddress ) ) {
/* don't submit the form and raise an error */
} else {
/* submit the form */
}
Any idea on how I could accomplish that?
You need to add onsubmit event handler to your form and return false if it don't pass validation.
For example according to your code:
<form method="post" action="{% url sportdub.views.login %}" onsubmit="return validateForm();">
<input type="text" id="formEmail" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
in JS:
function validateForm() {
if( !isValidEmailAddress( document.getElementById( 'formEmail' ).value ) ) {
// also before return you can add alert( 'your e-mail is invalid' );
// or display message in form, etc...
return false;
} else {
return true;
}
}
Btw, I would not recommend to use inline JS attributes, just add to all your elements and to form unique id attribute and if you use jQuery you can do all validations in .submit() method.
Inline:
<form method="post" action="{% url sportdub.views.login %}"
onsubmit="return isValidEmailAddress(this.email.value)">
<input type="text" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
Better (plain JS) - note I need an ID of the form:
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
if (!isValidEmailAddress(this.email.value)) {
alert('Please enter a valid address');
return false; // cancel submit
}
return true; // allow submit
}
}
jQuery version:
$(function() {
$("#form1").on("submit",function(e) {
if (!isValidEmailAddress($("#email").val())) {
alert('Please enter a valid address');
return false; // cancel submit
}
return true; // allow submit
});
});
Last two assuming
<form id="form1" method="post" action="{% url sportdub.views.login %}">
<input type="text" name="email" id="email" value="" class="span8"/>
<input type="submit"></button>
</form>
Use one onclick call in ur submit button with return... Your code should be,
<form method="post" action="{% url sportdub.views.login %}">
<input type="text" id="email" name="email" value="" class="span8"/>
<input type="submit" onclick = "return isValidEmailAddress();"></button>
</form>
function isValidEmailAddress() {
var emailAddress = $('#email').val();
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};

Categories

Resources