Changing form action based on text input - forms

So what I have is a simple search form and submit button. What I want to do is validate the input to determine whether or not an "=" was included in the search query, if so then I want it to send the input string (que) to vert.php. If not then I would like it to send to search.php.
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.indexOf(=) == true) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>
Any help at all would be so grealty appreciated! :)

Change line 4 to if (document.myform.que.value.indexOf('=') != -1) {
You need to get the value of que, you need to enquote the equals sign (you're searching for the character '='), and the indexOf function returns either -1 if not found or the position of the first occurrence, which is an integer. It does not return a boolean value.
Here is the updated code:
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.value.indexOf('=') != -1) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>

I would suggest you perform this action with PHP. If your site visitor has JavaScript turned off, they won't get the benefit of your logic. I suggest you look at strpbrk() function to detect the "=" char.

Related

Required for the first or second input form

I use Bootstrap 4.5, where it is possible to check the filling of the form, for example by inserting required.
<input type="text" class="form-control" name="name_1" required>
How can I please check where I need to have input #1 OR input #2 filled in?
<input type="text" class="form-control" name="name_1">
<input type="text" class="form-control" name="name_2">
if you want to check whether the input#1 OR input#2 is filled. I recommend you to write a piece of javascript code to check that. if you are familiar with java script, create a separate javascript file and write a function to validate. or else you can just put a script tag inside the head tag as follows.
Javascript Validation:
<head>
<script>
function validateForm(){
if(document.myform.input1.value == "" || document.myform.input2.value == ""){
alert("Both input1 and input2 should not be empty!");
}
}
</script>
</head>
HTML form:
<form name="myform" method="post" onsubmit="validateForm()" >
Input1: <input type="text" name="input1"><br/>
Input2: <input type="text" name="input2"><br/>
<input type="submit">
</form>

Form getting submitted even if submit button is disabled

I have a form where I have disabled the submit button. This button only gets enabled if I select a value of the dropdown. But I got a strange issue in IE and Chrome: if I press enter in the textbox, the form gets submitted (even though my submit button is disabled).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Form Submit</title>
</head>
<body>
<div>
<form method="post" action="/distributor-locations-global/index.html?qa=Y" >
<input type="hidden" value="" id="filter-url" name="filter_url">
<input type="hidden" value="SKF Distributor" id="filter_type" name="filter_type">
<input type="hidden" value="Y" id="filter_type" name="identifier">
<div class="field country-field full">
<select id="country" name="country" class="custom replaced" title="Sweden">
<option value="">Select location *</option>
<option value="1042">Albania</option>
<option value="1043">Algeria</option>
<option value="1064">Benin</option>
</select>
</div>
<div class="field zip-field full">
<input type="text" id="zip" name="zip" class="ui-disabled styled-text" >
</div>
<div class="button"><input type="submit" disabled="disabled" value="Show results" class="button styled-button"></div>
</form>
</div>
</body>
</html>
Submit button is not only way to submit the form, if you want to set some restrictions of form submit you have to use js function like this
add onsubmit="return validate();" in your form tag
e.g. <form method="post" action="/distributor-locations-global/index.html?qa=Y" onsubmit="return validate();">
add appropriate javascript function
<script>
function validate()
{
if (check_what_you_need_here==true) {
return true;
}
return false;
}
</script>
now each time form will be about to submit it will go to validate method, and only after it passes validation form will be send
you could disable the enter key on the form by using the below code in your header:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>

.asp validate_form wrong somehow?

I've got a little problems with my "contact us" form, whenever i submit it i get the error message 500. IE tells me it's a error at line 62, and that validate_form is not specified.
My code goes like this:.
<form method="POST" action="/cgi-bin/emailer.asp" onsubmit="return validate_form(this); ">
I really don't know anything about .asp, .php, .js etc. so some help would really be needed.
Thanks
-Niko
Update:
function validate_Form(form)
{
var x=document.forms["yhteys"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Sähköposti osoite ei ole oikein.");
return false;
}
}
that's how the code looks right now, but it still isn't working.
<form name="yhteys" method="POST" action="/cgi-bin/emailer.asp" onsubmit="return validate_form(this);">
<div style="float:left;">
Aihe:<b>*</b><br>
<select name="Aihe" required="required" id="Aihe">
<option value="Yhteydenotto">Yhteydenotto</option>
<option value="Arviokäynti">Arviokäynti</option>
<option value="Esitetilaus">Esitetilaus</option>
<option value="Esittelyajan varaus">Esittelyajan varaus</option>
<option value="Palaute">Palaute</option>
<option value="Muu viesti">Muu viesti</option>
</select><br><br>
Nimi:<b>*</b><br>
<input type="text" required="required" name="nimi" size="35"><br><br>
Osoite:<b>*</b><br>
<input type="text" required="required" name="osoite" size="35"><br><br>
Puhelin:<b>*</b><br>
<input type="text" required="required" name="puh" size="35"><br><br>
Sähköposti:<b>*</b><br>
<input type="text" required="required" name="email" size="35"><br><br>
Viesti:<b>*</b><br>
<textarea rows="5" name="viesti" cols="45" required="required" id="Viesti"></textarea>
<div style=" margin-right: 2px; margin-top: 2px;"><input type="submit" value="Lähetä" name="B1"></div><br />
<p>Tähdellä merkityt kohdat ovat pakollisia.</p>
</form>
</div>
There is the whole form section, just so you could tell me more specifically what's wrong.
validate_form(this) is a call to a JavaScript function you have to define.
it might look something like this:
function validate_form(form){
if (form.fieldname.value /* fulfills some condition */)
{
//this will abort the submit
return false;
}
//will only get called when the if-statement does not return true
//this allows the submit to procede
return true;
};
alternatively you can declare a function like this:
var validate_form = function(form){/*your code here*/};
you should put that block of code in the <head>-section of your page inside of:
<script type="text/javascript" >
// your code
</script>
EDIT:
As of your javascript:
If you send this to your function, you do not have to crawl DOM to get your elements.
--> to get any field in your form (which you pass to function with this-Keyword) you can do the following:
form.fieldname
this allows you to access your email like that:
var email = form.email.value;
You can now check your email with a custom-validation, but i recommend using a freely available regex to check it. you can find a nice one in the answer no.3 here
if (!isValid(email)){ //if the given email is not Valid by the function you call
alert("Sähköposti osoite ei ole oikein.");
return false;
}

How do I automatically insert a default value into a textarea if no value was entered in by a user?

I have a form with a few textareas in it and I need to figure out a way to automatically insert the word "null" as the textarea values if a user chooses not to include any data in the textarea fields. I would greatly appreciate any one who would be willing to help me out with this. Thank you!
Here's a copy of the code:
<?php
$title = "Add a New Page";
$url = "add";
$metadescription = "Create and publish a new page";
include('/templates/head.php');
echo ('<title>'.$title.'</title>
<meta name="description" content="'.$metadescription.'" />');
include('/templates/meta.php');
echo ('<div id="content">');
include('/page-creator.php');
?>
<h2>Add a New Page</h2>
<form method="post" action="#">
<input type="hidden" name="url" value="null">
<input type="hidden" name="commentform" value="yes">
<h3>Author and Page Information (Required):</h3>
<p><strong>Author Name</strong>: <input style="width:250px;" type="text" name="authorname" value="null"></p>
<hr>
<p><strong>Author URL</strong>: <input style="width:250px;" type="text" name="authorurl" value="null"></p>
<hr>
<p><strong>Page Title</strong>: <input style="width:250px;" type="text" name="title" value="null"></p>
<hr>
<p><strong>Page Date</strong>: <input style="width:250px;" type="text" name="pagedate" value="<?php echo date('D, M d Y, g:ia T'); ?>"></p>
<hr>
<p><strong>Brief Description</strong>: One or two sentences.<br/><br/>
<textarea style="width:95%; height:50px;" name="metadescription">null</textarea></p>
<hr>
<h3>Top Section (Required):</h3>
<p><strong>TOP SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="topsectioncontent"></textarea></p>
<hr>
<p><strong>TOP SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="topsectionimage"></p>
<hr>
<p><strong>TOP SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="topsectioncode">null</textarea></p>
<hr>
<h3>Middle Section (Optional):</h3>
<p><strong>MIDDLE SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="middlesectioncontent">null</textarea></p>
<hr>
<p><strong>MIDDLE SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="middlesectionimage" value="null"></p>
<hr>
<p><strong>MIDDLE SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="middlesectioncode">null</textarea></p>
<hr>
<h3>Bottom Section (Optional):</h3>
<p><strong>BOTTOM SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="bottomsectioncontent">null</textarea></p>
<hr>
<p><strong>BOTTOM SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="bottomsectionimage" value="null"></p>
<hr>
<p><strong>BOTTOM SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="bottomsectioncode">null</textarea></p>
<hr>
<h3>Credits and Footnotes (Optional):</h3>
<p><strong>Ref #1 Name:</strong>: <input style="width:250px;" type="text" name="ref01name" value="null"></p>
<p><strong>Ref #1 URL:</strong>: <input style="width:250px;" type="text" name="ref01url" value="null"></p>
<hr>
<p><strong>Ref #2 Name:</strong>: <input style="width:250px;" type="text" name="ref02name" value="null"></p>
<p><strong>Ref #2 URL:</strong>: <input style="width:250px;" type="text" name="ref02url" value="null"></p>
<hr>
<p><strong>Ref #3 Name:</strong>: <input style="width:250px;" type="text" name="ref03name" value="null"></p>
<p><strong>Ref #3 URL:</strong>: <input style="width:250px;" type="text" name="ref03url" value="null"></p>
<hr>
<input type="submit" value="Publish">
</form>
<?php
include('/templates/footer.php'); ?>
Use a shorthand if:
var myValue = myText.value ? myText.value : 'null';
This is, essentially:
var myValue = function() {
if (myText.value) {
return myText.value;
} else {
return 'null';
}
}
With that said, I don't feel you should include this logic on the client. It may be best if whatever you're sending these values handle this scenario, if you have control over it.
So if you are using jQuery then you would do something like this when they click on the submit button, the return true is there so that it will continue with the submit after this function is run.
$(function() {
$('#submitButton').click(function() {
$('textarea').each(function(element) {
if ($(this).text() === '') {
$(this).text('null');
}
});
return true;
});
});
​
I have a JSFiddle that you can try to see what it does.
JSFiddle
I assume you don't want the word 'null' appearing in the UI. I am also assuming that you are handling the returned values in some sort of server-side script.
Be that the case, I would simply test the length of the values stored in the textareas, and if the length is zero (and remember to check for entered spaces etc. using TRIMs and string cleaning routines) I would simply do (pseudo code):
if (mytextarea1.text.length == 0)mytextarea1.text='null'
if (mytextarea2.text.length == 0)mytextarea2.text='null'
etc.

Create an html form with a radio button that opens an optional input text field

I'd like to write a form with a radio button that opens an optional input text field.
e.g. radio button : Do you have a wife/husband ? If the user says yes input fields dd, mm, and yyyy appear (for wife/husband birthday day, month, and year) and correct values must be written for the form to be submitted (01 plus 12 plus 1978 are accepted but not 1a plus yy plus 1945).
If the user answers no to the question then this field has no reason to appear (no wife/husband means no wife/husband birthday) and the default values of dd, mm, yyyy are transmitted.
I know how to make a div visible with the style property on the onClick event of the radio button but I have no idea of how to make the input fields compulsory for the yes answer and optional for the no answer (actually not visible and the default values are going to be transmitted).
I've found a very simple way to do this.
My code for those of you interested :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample</title>
</head>
<body>
<script type="text/javascript">
function aff_div(ladiv) {
document.getElementById(ladiv).style.display = "inline";
}
function cach_div(ladiv) {
document.getElementById(ladiv).style.display = "none";
}
function affich_conj() {
if (document.forms.devis.votconj[0].checked == true) {
aff_div("ssconj");
}
if (document.forms.devis.votconj[1].checked == true) {
document.getElementById("jj").value = 0;
document.getElementById("mm").value = 0;
document.getElementById("aaaa").value = 0;
cach_div("ssconj");
}
}
</script>
<form id="devis" name="devis" action="Validation-du-formulaire.php" method="post">
<label>Do you have a wife/husband ?</label>
<input type="radio" name="votconj" value="yes" onclick="affich_conj();">yes
<input type="radio" name="votconj" value="no" checked="checked" onclick="affich_conj();">no
<div id="ssconj">
<p>
<label>Her/his birthdate :</label>
<select name="jj" id="jj">
<option value="0" selected="selected">--</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="mm" id="mm">
<option value="0" selected="selected">--</option>
<option value="01">01</option>
<option value="02">02</option>
</select>
<select name="aaaa" id="aaaa">
<option value="0" selected="selected">--</option>
<option value="1993">1970</option>
<option value="1992">1969</option>
</select>
</p>
</div>
</form>
<script type="text/javascript">
cach_div("ssconj");
</script>
</body>
</html>
Create a custom input field with class="required" that appears after the click event. But if you put the input before clicking the radio just add a class name required to the input. you can add a new class to an element with id="test" as following :
$(document).ready(
function(){
$('#testRadio').click(function(){
$('test').addClass("required");
});
});
now validate the input element with class name required.
You can disable/enable or show/hide the element as needed!!!
Just disable the submission if your inputs with class required are not in perfectly filled up by writing return false;