I am trying to write a simple Regex Checker function that takes the user input and checks it against certain criteria. Only problem is, I can't get the user input to be passed into the new variable to begin the checking.
Can someone help me understand why I'm not seeing the user input in the log? I just want to be able to see the user input in the console so I can continue writing the code I need. EDIT-I know it is set to ALERT at the moment and not console.log-
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
function regexChecker () {
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
Thanks in advance.
Just assign values of first and last inside the function cause these two lines invoke when the page loads so have null or empty string values. You must reassign them.
function regexChecker () {
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
Related
In the following code, I wanted the button "Add Lines" to:
run the function 'MoreRentals_fromSidebar' from code.gs in the SpreadsheetApp
then "google.script.host.close();" to close the sidebar
When I try to stack the commands, nothing happens. If I try to invoke the submitForm function to run the two commands, nothing happens (although I thought this was working last week and has now stopped).
Any suggestions would be appreciated.
<!DOCTYPE html>
<script>
function getDataFromHtml(idData) {
if (!idData)
idData = "mydata_htmlservice";
var dataEncoded = document.getElementById(idData).innerHTML;
var data = JSON.parse(atob(dataEncoded));
return data;
}
function initialize() {
var data = getDataFromHtml();
// I would have expected to be able to accept the two parameters but whichever is coded second does not get set.
//document.getElementById("myAgency").innerText = data.agency;
//document.getElementById("myRow").innerText = data.row;
// My workaround is to create the header of the sidebar to contain the agency and the line number
var arr = data.first.split("##");
document.getElementById('myTitle').innerText = arr[0]+"\n# line "+arr[1];
//alert(arr[0]+"\n\n"+arr[1]); // used for debugging
}
window.onload = initialize; //Note that there is no "()". It must be this way for this to work!
</script>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
//alert('in submitForm: '+document.getElementById("RentalLinesForm");
google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));
google.script.host.close();
}
</script>
</head>
<body>
<h1 id="myTitle" ></h1>
<form id="RentalLinesForm">
<label for="numLines">Number of lines to add</label>
<input type="text" id="numLines" name="numLines"><br><br>
<div>
<label for="location">Where to place the new lines:</label><br>
<input type="radio" id="above" name="location" value="above">
<label for="above">Above line</label><br>
<input type="radio" id="below" name="location" value="below">
<label for="below">Below line</label><br>
<input type="radio" id="bottom" name="location" value="bottom">
<label for="bottom">At bottom</label>
<br><br><input type="button" value="Add Lines" onclick="google.script.run.MoreRentals_fromSidebar(document.getElementById('RentalLinesForm'));">
<br><br><input type="button" value="DONE" onclick="google.script.host.close();">
</form>
</body>
</html>
I'm having trouble with learning laravel and decided to ask my question here since I can't find an answer via Google etc.
I am trying to return a client from the database via Id, maybe later via name.
This is my form:
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Klant invoeren</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<p><<form action="{{route('client/'.$client->id.'/show/')}}"
method="get">
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="price">Achternaam:</label>
<input type="text" class="form-control" name="id">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
{{csrf_field()}}
<button type="submit" class="btn btn-success" style="margin-
left:38px">Zoek klant</button>
</div>
</div>
</form></p>
</body>
</html>
Which redirects to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Klant invoeren</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div class="container">
<h2>Voer een klant in</h2><br />
<h1>Showing {{ var_dump($client) }}</h1>
</div>
</body>
</html>`
And this is the show method from the Clientcontroller:
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
This is the route I'm using:
Route::get('client/{id}/show','ClientController#show');
Can someone spot my mistake, because I can't after messing with this the last few hours.
EDIT: updated code and added the route, now getting the error that the client variable isn't defined in the
You must echo the client id in the form action. So, remove the inverted comma from $client->id. Use the following code :
<form action="{{action('ClientController#show', $client->id)}}"
method="get">
Additionally, remove backtick from the code. Use the following code :
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
In your routes/web.php
Route::get('client/{id}/show','ClientController#show');
In your form:
<form action="{{URL::to('client/'.$client->id.'/show/')}}"
method="get">
In your controller:
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
In your Client Controller make sure you use the Model that you are referencing to
Assuming App\Client.php Change it to App\User.php if you are referring to user
ClientController
use App\Client;
public function show($id)
{
$client = Client::find($id);
return view('clients.show', compact('client'));
}
Now you can fetch the client model with $client For example $client->id
Make sure you pass the {id} parameter in the route
Alright I could use a small tip here:
I have a form with two buttons, one has to submit the form and the other one has to reset the complete form.
The text - field keeps its value after every submit, but I would like to clear it completely with the reset button
<form method="post">
<input type="text" name="text" value="Clear Me Please">
<button type="submit" name="submit">Submit</button>
<button type="reset" name="reset">Reset</button>
</form>
I have a input field, submit button and a reset button. Upon submiting the form the user input will be inserted as value, because I dont want to lose the input. Now, when I type something into the field I can reset the form as planed, but after submiting the value now stays as supposed, but pressing the reset button resets the input to the value.
Example: I type in "TEXT", press Reset, gets reseted to "". Type "TEXT2", press Submit, gets submited, put in as value, field has now "TEXT2" written in. Replace "TEXT2" with "TEXT3", press Reset, now field contains "TEXT2" instead of "". I hope this is explaination enough.
may a little bit more you have to do
But his may help-Using Jquery
Edited Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
document.getElementById("myForm").reset();
$('#input').attr("value", "");
});
});
</script>
</head>
<form id="myForm" method="post">
<input type="text" name="input" id="input" value="<?= $_POST['input'] ?>"><br>
<button type="submit">Submit</button>
<input type="button" id="btn" value="Reset">
</form>
Orginal Version:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#btn").on('click', function(e)
{
values= $('#fname').val();
document.getElementById("myForm").reset();
$('#fname').attr("placeholder", values);
});
});
</script>
<head>
<form id="myForm">
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" id="btn" value="Reset form">
</form>
jsfiddle linkhere
I have a external js file that has the following function in it. It is supped to be called by the forms onsubmit but it doesn't appear to be happening. The form is just submitted without validation. At one point this was working but now it is not. Where am I going wrong? Any help is appreciated.
function validateDelete(form)
{
alert("Validation Started!");
var photoName=form.deleteName;
if (photoName === "")
{
alert("Photo Name Required");
return false;
}
}
<script src="galleryScripts/validation.js" type="text/javascript" ></script>
<form action="galleryScripts/deletePhoto.php?submit=true" name="deleteForm" onsubmit="return validateDelete(this);" id="deleteForm" method="post">
<label>
File Name: <input name="deleteName" type="text" id="deleteName">
</label>
<label>
<input type="submit" name="deleteButton" id="deleteButton" value="Delete" />
</label>
</form>
Make sure that your js is included.
For example under mozilla press CTRL+U and click on a link to your validation.js file.
Also you can just paste in tag in your tag it should work.
I have 1 main search form with a submit button and several secondary search forms with submit buttons.
What I would like to do is when I enter text and click on the submit button of the main search form, the same text gets copied in all of the secondary search forms and all the submit buttons of the secondary search forms get automatically hit.
The HTML code for the mains earch form is shown below:
<form action="query.php" method="get">
Search: <input type="text" name="item" size="30">
<input type="submit" value="send">
</form>
One of the several secondary search forms is shown below:
<FORM action="http://www.dpbolvw.net/interactive" method="GET" target="_blank">
<div style="float: left; padding: 0 3px 0 0;">
<INPUT type="text" name="src" size="9"
value="<?php
$input = $_GET['item'];
echo $input;?>" style="width: 110px; height: 22px;margin:0; padding: 0; font-size:140%;">
</div>
<div style="float: left; padding: 0 3px 0 0;">
<input type="image" name="submit" value="GO" src="http://images.guitarcenter.com/Content/GC/banner/go.gif"
alt="Search" style="font-size:140%">
/div>
<input type="hidden" name="aid" value="1234"/>
<input type="hidden" name="pid" value="1234"/>
<input type="hidden" name="url" value="http://www.guitarcenter.com/Search/Default.aspx"/>
</form>
Notice the php code that I put in the "value" field of the secondary search form:
<?php
$input = $_GET['item'];
echo $input;?>
This automatically copies the text that I entered in the main search form into the secondary search form. I thus figured out how to do that.
The problem is to "simulate" an "Enter" keystroke or a click on the "GO" button with the mouse on the secondary search form when the user hits the Enter key or hits the "SEND" button with the mouse on the main search form.
Thank you for your insight!
I'm not sure what the point of that would be, It looks like all of these are search forms all pointing to different sites. Web browsers won't allow that. They can navigate to one page at a time. When you post a form to a page you are navigating to that page. Therefore, you are trying to navigate to several pages at once. It's like trying to be in Paris and London at the same time. I don't see how your plan will work the way you're describing it.
That said, You can use client-side javascript to call
document.forms[0].submit();
so if you can come up with a plan that does not involve trying to have the user see all the different search results in one window, you could try this on your first form...
<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">
You should use AJAX (JQuery) as Brandon Suggested. Read http://docs.jquery.com/Events/submit
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function() {
//Do you stuff here like triggering other submits
//Like:
$("input#submit2").click();
$("input#submit3").click();
return false;
});
});
</script>
</head>
<body>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" id="submit" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit2" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit3" />
</div>
</form>
</body>
</html>
Take a look at the submit() event in jQuery. That is going to be your key.
I am assuming that you are planning on submitting via ajax? Otherwise it is futile.
So you could do something like this-
Give all of your forms a certain class, let's call it 'ajax_search_forms'. So now you can actually hook into the submit event.
$('.ajax_search_forms').submit(function(){
var search_string = $('input[name=src]').val();
$('.ajax_search_forms').each(function(){
$.ajax({
url : $(this).attr('action'),
data : 'search_string=' + search_string,
success : function(html){
// Do something with the result
}
});
});
// Return false is VERY important so that the form submission does not continue
return false;
});